Learn to setup Page Navigation in WPF - MVVM

Learn about switching from one view to another with WPF and MVVM.

Created byMouse Events

Last updated 4/2023

English

English [Auto],

What you'll learn

Learn how to create page navigation in WPF with MVVM
Change views with ContentControl styling
Learn basics about CommunityToolkit from Microsoft
Introduction to NET 6 WPF Xaml

Course content

1 section • 8 lectures • 33m total length

Introduction5:07
A brief introduction on the course and what to expect ahead..
Application Demo0:44
Create a minimal WPF application with MVVM that demonstrates simple page navigation using four buttons to switch views, and bind a text box to propagate data to a child controller.
Setup the view2:08
Learn to set up the view in a WPF MVVM app by implementing INotifyPropertyChanged and ICommand, using the Microsoft Community Toolkit, and creating four colored, navigable user controls.
Create a simple Navigation Bar5:11
Create a simple top navigation bar in WPF MVVM to switch between pages with buttons and a horizontal stack panel. Learn key-based styling, grid alignment, and basic debugging.
Setup the ViewModel7:58
Learn how to implement a WPF MVVM navigation pattern by building a ViewModel with INotifyPropertyChanged, an observable page ID enum, and a relay command to switch views via data binding.
Setup ContentControl Style Triggers5:31
Learn to implement mvvm navigation in wpf by binding a view model to a content control and using a data trigger on page id to swap content templates.
Recap2:14
Demonstrate how page navigation in WPF uses MVVM, linking views, pages, and a view model with INotifyPropertyChanged, ICommand, and RelayCommand to drive the content template and a data trigger.
Bind DataContext to Child controls5:04
Bind the parent view model to a child control in WPF MVVM, preserving a shared data context for two-way binding via content controls.

Requirements

Basic WPF & C# experience is needed to understand the concepts

Description

In this simple course, you will learn about setting up Page navigation in WPF with MVVM.

Community Tool kit from Microsoft will be used for supporting the ViewModel setup
Simple ContentControl with style triggers will be used for switching the views.
Get introduced to basic Xaml view setup
Get introduced to .NET 6
Four basic sample pages are created and used as an example in the navigation
Also learn how to quickly setup a Top Navigation bar and arrange them with in a Stackpanel UI element.

The full course is built on .NET 6 using Visual Studio 2022 as the Integrated Development Environment (IDE). Also, you will learn how to install external third party packages from Nuget Package source from within the Visual Studio.

Course will be simple enough to understand even for the beginners. If you are a professional with years of experience or a novice WPF developer with intermediate knowledge, this course will still be helpful to you in understanding new way of implementing page navigation in your projects and switching the views easily.

By the end of this course, you will be able to setup page navigation in WPF MVVM application of any size and scale. Source codes are provided for the full project which will be

Who this course is for:

Beginners of WPF who wish to implement page navigation in their application