WinUI 3 - Navigate to a NavigationViewItem in Code

Question

I have created a NavigationView which contains multiple items and an item with various menu items in it:

<NavigationView.MenuItems>
    <NavigationViewItem x:Uid="Home" helpers:NavigationHelper.NavigateTo="Program.ViewModel.HomeViewModel">
    </NavigationViewItem>
    <NavigationViewItem x:Uid="List" helpers:NavigationHelper.NavigateTo="Program.ViewModel.ListViewModel">
    </NavigationViewItem>
    <NavigationViewItem x:Uid="Details" helpers:NavigationHelper.NavigateTo="Program.ViewModel.DetailsViewModel">
    <NavigationViewItem.MenuItems>
        <NavigationViewItem x:Name="SummaryViewItem" x:Uid="Details_Summary" helpers:NavigationHelper.NavigateTo="Program.ViewModel.SummaryViewModel">
        </NavigationViewItem>
        <NavigationViewItem x:Uid="Details_Distances" helpers.NavigationHelpers.NavigateTo="Program.ViewModel.DistancesViewModel">
        </NavigationViewItem>
        <NavigationViewItem x:Uid="Details_Location" helpers.NavigationHelper.NavigateTo="Program.ViewModel.LocationViewModel">
        </NavigationViewItem>
    </NavigationViewItem.MenuItems>
    </NavigationViewItem>
</NavigationView.MenuItems>

The "DetailsViewModel" contains code to collect information for its sub-pages, and the "Details" page is a blank page.

Sub-pages contain views and fields to show information in an organized fashion.

I want to achieve that when the user clicks on the "Details" navigation item, the program runs the associated ModelView and automatically navigates to the "Summary" page.

I have added the following code in the "Details" ModelView:

public async void OnNavigatedToAsync(object parameter)
{
    //Other functions
    
    NavigationHelper.SetNavigateTo(ShellPage.SummaryNavigationItem, typeof(SummaryViewModel).FullName);
}

And this in Shell's code-behind to make "SummaryViewItem" accessible:

public static NavigationViewItem SummaryNavigationItem;

public ShellPage(ShellViewModel viewModel) {

    SummaryNavigationItem = SummaryViewItem;
}

but, it does not navigate to the "Summary" page, instead shows the "Details" page, which is blank.

How can I achieve this?

more information: Code of NavigationHelper (copied from sample WinUI 3 app)

public static void SetNavigateTo(NavigationViewItem item, string value) => item.SetValue(NavigateToProperty, value);

public static readonly DependencyProperty NavigateToProperty =
        DependencyProperty.RegisterAttached("NavigateTo", typeof(string), typeof(NavigationHelper), new PropertyMetadata(null));

Answer 1

First of all, SetNavigateTo doesn't do the navigation. It sets the destination when the NavigationViewItem is selected. So this line:

NavigationHelper.SetNavigateTo(ShellPage.SummaryNavigationItem, typeof(SummaryViewModel).FullName);

is setting that when SummaryNavigationItem is selected navigate to the corresponding page for SummaryViewModel, which is already set in ShellPage.xaml.

Then you might want to change this line to:

_navigationService.NavigateTo(typeof(SummaryViewModel).FullName!);

but this will fail. It seems that this doesn't work when you try to navigate while navigating. In your case, you are trying to navigate to SummaryViewModel while navigating to DetailsViewModel.

In order to achieve what you are trying to do:

1. Remove the NavigationHelper at Details's NavigationViewItem.
2. Name the NavigationViewItem for Details and create an Tapped event handler.

<NavigationViewItem x:Name="Details" Tapped="Details_Tapped" x:Uid="Details"/>

3. Use the ViewModel to navigate to wherever you want.

private void Details_Tapped(object sender, TappedRoutedEventArgs e)
{
    // This is an example how you can navigate, 
    // but you might want to create an method in the ViewModel 
    // and do your pre-navigation process there.
    ViewModel.NavigationService.NavigateTo(typeof(ListDetailsViewModel).FullName!);
}