Easiest way to apply mvvm with NavigationView

Viewed 25

I am still somewhat new to the concept of MVVM and I need to use NavigationView and apply mvvm. Is there any easy way to convert this to navigationview?

I have this code from an mvvm tutorial

<Grid MaxWidth="600" Margin="20 10">
        <Grid.Resources>
            <DataTemplate DataType="{x:Type vms:MakeReservationViewModel}">
                <views:MakeReservationView />
            </DataTemplate>
            <DataTemplate DataType="{x:Type vms:ReservationListingViewModel}">
                <views:ReservationListingView />
            </DataTemplate>
        </Grid.Resources>

        <ContentControl Content="{Binding CurrentViewModel}" />
    </Grid>

I understand that I can use NavigationView ItemInvoked method but I need some guidance as to how to call the ViewModel from the ItemInvoked method

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{  
    if (args.IsSettingsInvoked)
    {
        ContentFrame.Navigate(typeof(SettingsPage));
    }
    else
    {
        // find NavigationViewItem with Content that equals InvokedItem
        var item = sender.MenuItems.OfType<NavigationViewItem>().First(x => (string)x.Content == (string)args.InvokedItem);
        NavView_Navigate(item as NavigationViewItem);
    }
}

private void NavView_Navigate(NavigationViewItem item)
{
    switch (item.Tag)
    {
        case "MakeReservation":
            ContentFrame.Navigate(typeof(MakeReservationPage));
            break;

        case "ReservationList":
            ContentFrame.Navigate(typeof(ReservationListPage));
            break;
    }}

How do I navigate to the ViewModel?

EDIT

xmlns:ui =“http://schemas.modernwpf.com/2019”

<Grid>
    <ui:NavigationView x:Name=“NavView” ItemInvoked=“NavView_ItemInvoked”>
        <ui:NavigationView.MenuItems>
            <ui:NavigationViewItem Content = “Make Reservation” Tag=“MakeReserve”/>
            <ui:NavigationViewItem Content = “Reservation List” Tag=“List”/>
        </ui:NavigationView.MenuItems>

    <ui:Frame x:Name=“ContentFrame”>
        <ui:Frame.ContentTransitions>
            <ui:TransitionCollection>
                <ui:NavigationThemeTransition/>
            </ui:TransitionCollection>
        </ui:Frame.ContentTransitions>
    </ui:Frame>
</ui:NavigationView>

I am able to change the view without a problem but I wanted to change it so that when I select one, it will navigate to the viewmodel?

0 Answers
Related