如何防止WinUI 3 NavigationView在向后导航时先导航子页面

Question

我已使用 WinUI Template Studio 生成解决方案。

Visual Studio 2022

WinUI 3 中的 NavigationView 允许您在同级和页面之间导航。我发现的一个问题是左侧导航有多个父页面，每个页面有多个子页面。如果我从父级 -> 子级 -> 父级导航，然后单击后退按钮，则子级将加载到当前父级中，而不是导航回原始父级。我确信我搞砸了一些事情，但我正在学习导航层次结构。

示例： 主页（父）-> 团队页面（子）-> 设置（父）

要从主页导航到团队，我使用的是

Frame.Navigate(typeof(TeamPage))

，它有效。

    private void SettingsCard_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
    {
        var effect = new SlideNavigationTransitionInfo()
        {
            Effect = SlideNavigationTransitionEffect.FromRight
        };

        Frame.Navigate(typeof(TeamPage), null, effect);
    }

Page在PageService中配置：

    public PageService()
    {
        Configure<MainViewModel, MainPage>();
        Configure<ContentGridViewModel, ContentGridPage>();
        Configure<ContentGridDetailViewModel, ContentGridDetailPage>();
        Configure<ListDetailsViewModel, ListDetailsPage>();
        Configure<SettingsViewModel, SettingsPage>();
        Configure<TeamViewModel, TeamPage>();
    }

使用模板提供的 NavigateService 时

Frame.Navigate

是正确的导航方式吗？

我已审阅了以下内容的大部分文档：

框架：https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.frame?view=windows-app-sdk-1.3

导航：https://learn.microsoft.com/en-us/windows/apps/design/basics/navigation-basics

Answer 1

我会尽力提供帮助。我有点中级，但我也很难使用 NavigationView。

基本上，NavigationView 发生的事情是您正在更新内容框架。

这是一个基本的 XAML：

<NavigationView x:Name="NavigationMenu" Loaded="NavigationMenu_Loaded" SelectionChanged="NavigationMenu_SelectionChanged">
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Your Icon" Content="Text You See" Tag="Your tag" />
            <NavigationViewItem Icon="Your Icon" Content="Text You See" Tag="Your tag" />
            <NavigationViewItem Icon="Your Icon" Content="Text You See" Tag="Your tag" />
        </NavigationView.MenuItems>
        <Frame x:Name="contentFrame"/>
    </NavigationView>

这是使用 NavigationView 切换页面的 C# 代码：

private void NavigationMenu_Loaded(object sender, RoutedEventArgs e)
{
    contentFrame.Navigate(typeof(YourChoice));
}

private void NavigationMenu_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
    if (args.IsSettingsSelected)
    {
        // Handle settings here
    }
    else
    {
        NavigationViewItem item = args.SelectedItem as NavigationViewItem;

        switch (item.Tag.ToString())
        {
            case "Your tag":
                contentFrame.Navigate(typeof(Your Choice));
                break;
            case "Your tag":
                contentFrame.Navigate(typeof(Your Choice));
                break;
            case "Your tag":
                contentFrame.Navigate(typeof(Your Choice));
                break;

        }
    }
}

switch 语句基本上是说，“Switch == '你的标签'”。

然后不同的标签都有一行代码会用到。

contentFrame.Navigate(typeof(YourChoice));

这行代码之所以有效，是因为 YourChoice 或 Page1 或 Home 或您选择的任何名称都是一个类。应用程序的每个页面都是一个类。

子菜单应该只是为了 UI 和设计的目的。据我所知，它不应该改变您编码导航的方式。

我会尝试为菜单中的每个子对象的 switch 语句添加更多情况，并将其视为所有父对象。看看是否有效。

你的做法有点不同。我这里的示例基本上就是 NavigationView 如何完成其工作。我希望这能在某种程度上有所帮助。

Answer 2

Frame.Navigate()

和

Frame.GoBack()

应该有效。这是导航的基本示例。

<Page
    x:Class="NavigationExample.ShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:NavigationExample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <NavigationView
        BackRequested="NavigationView_BackRequested"
        IsBackEnabled="True"
        ItemInvoked="NavigationView_ItemInvoked">
        <NavigationView.MenuItems>
            <NavigationViewItem
                Content="Page A"
                Tag="NavigationExample.PageA">
                <NavigationViewItem.MenuItems>
                    <NavigationViewItem
                        Content="Page A-1"
                        Tag="NavigationExample.PageA1" />
                </NavigationViewItem.MenuItems>
            </NavigationViewItem>

            <NavigationViewItem
                Content="Page B"
                Tag="NavigationExample.PageB">
                <NavigationViewItem.MenuItems>
                    <NavigationViewItem
                        Content="Page B-1"
                        Tag="NavigationExample.PageB1" />
                </NavigationViewItem.MenuItems>
            </NavigationViewItem>

        </NavigationView.MenuItems>
        <Frame x:Name="ContentFrame" />
    </NavigationView>

</Page>

using Microsoft.UI.Xaml.Controls;
using System;

namespace NavigationExample;

public sealed partial class ShellPage : Page
{
    public ShellPage()
    {
        this.InitializeComponent();
    }

    private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
    {
        if (args.IsSettingsInvoked is true)
        {
            ContentFrame.Navigate(typeof(SettingsPage));
            return;
        }

        if (args.InvokedItemContainer is NavigationViewItem item &&
            item.Tag is string itemTag &&
            Type.GetType(itemTag) is Type pageType)
        {
            ContentFrame.Navigate(pageType);
        }
    }

    private void NavigationView_BackRequested(NavigationView sender, NavigationViewBackRequestedEventArgs args)
    {
        if (ContentFrame.CanGoBack is true)
        {
            ContentFrame.GoBack();
        }
    }
}