Skip to content

UtopiaDreamTeam/MVVM-Navigation-WinUI

Repository files navigation

This sample shows how to implement navigation in WinUI 3 using MVVM.

It uses ViewModel First approch

It has 3 mode of backward navigation :

-None(Default mode)

-StoreTypes (ViewModels are not stored only their types and then are inistited)

-StoreStates (ViewModels are stored)

It supports max number for Backward Navigation

It also supports Nested Views.

Quick Tuto

1.Create a root Page:

<Page
    x:Class="MvvmNavigation.Views.RootPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MvvmNavigation.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodel="using:MvvmNavigation.ViewModel" xmlns:converters="using:MvvmNavigation.Converters"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.DataContext>
        <viewmodel:RootPageViewModel/>
    </Page.DataContext>
    <Frame Content="{Binding ChildPageNavigation.ViewModel,Converter={StaticResource Vm2V}}"/>
</Page>

also include the converter

<converters:ViewModelToView x:Key="Vm2V"/>

2.Create the ViewModel for the root Page

internal class RootPageViewModel:ObservableObject
{
        public RootPageViewModel()
        {
            ChildPageNavigation = new PageNavigation(new Page2ViewModel());
        }
        public PageNavigation ChildPageNavigation { get; }
}
  1. Create two ViewModels for the child Pages
internal class Page1ViewModel:BasePageViewModel
{
        public Page1ViewModel()
        {
        }
}
internal class Page2ViewModel:BasePageViewModel
{
        public Page2ViewModel()
        {
        }
}

4.To bind new Page to its view model, just add it to The Dictionary in ViewModelToView class:

private static readonly Dictionary<Type, Type> pairs = new Dictionary<Type, Type>()
        {
            {typeof(Page1ViewModel),typeof(Page1)},
            {typeof(Page2ViewModel),typeof(Page2)},
        };
  1. To navigate to new Page from View Model
ParentPageNavigation.ViewModel = new Page2ViewModel()