UWP NavigationView通过MVVM切换到另一个页面

Posted 2021-05-06

从WPF到UWP的第一次切换我发现在UWP世界中存在像SplitView和NavgiationView这样的伟大控件。

为了更新我当前的家庭项目，我选择了NavigationView控件作为我的主要UI控件来提供各种信息。使用代码隐藏页面导航（as shown here）非常简单，但对于我的用例，我想使用MVVM（作为学习过程而不使用像MVVMLIght或类似的FW）。

目前，我的NavigationView看起来像这样;但我还没有正确的想法如何通过页面在框架内进行更改（从我的理解，我必须使用NavigationService，但没有找到一个易于理解的例子）：

<NavigationView x:Name="nvTopLevelNav" Grid.Column="0" Grid.Row="1" Grid.RowSpan="3" IsPaneOpen="False"  IsPaneToggleButtonVisible="False" CompactModeThresholdWidth="0" IsBackButtonVisible="Collapsed" Background="Black" Foreground="Black"
        Loaded="nvTopLevelNav_Loaded"
        Margin="0,12,0,0"
        SelectionChanged="nvTopLevelNav_SelectionChanged"
        ItemInvoked="nvTopLevelNav_ItemInvoked"
        IsTabStop="False"
                IsSettingsVisible="False"
                AlwaysShowHeader="False"
        Header="asdasdaasdasdasd">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Home" Content="Home" Tag="Home_Page" />
        <NavigationViewItem Icon="Globe" Content="Weather" Tag="Weather_Page" />
        <NavigationViewItem Content="My Agenda" Tag="Agenda_Page">
    <!-- some custom PathIcon -->
        </NavigationViewItem>
        <NavigationViewItem Icon="Contact" Content="My News" Tag="News_Page" />
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame"></Frame>
</NavigationView>

答案

UWP NavigationView通过MVVM切换到另一个页面

根据您的要求，您可以使用Windows Template Studio创建包含MVVM模式和NavigationService的UWP项目。

private void OnItemInvoked(NavigationViewItemInvokedEventArgs args)
{
    if (args.IsSettingsInvoked)
    {
        NavigationService.Navigate(typeof(SettingsViewModel).FullName);
        return;
    }

    var item = _navigationView.MenuItems
                    .OfType<NavigationViewItem>()
                    .First(menuItem => (string)menuItem.Content == (string)args.InvokedItem);
    var pageKey = item.GetValue(NavHelper.NavigateToProperty) as string;
    NavigationService.Navigate(pageKey);
}