NavigationView

项目
06/10/2024

NavigationView 控件可为应用提供顶级导航。它适应各种屏幕大小，支持顶部和左侧导航样式。

顶部导航左侧导航
NavigationView 支持顶部和左侧导航窗格或菜单

这是正确的控件吗？

NavigationView 是非常适合于以下功能的自适应导航控件：

在整个应用中提供一致的导航体验。
在较小窗口上保留屏幕空间。
组织对许多导航类别的访问。

有关其他导航模式，请参阅导航设计基础知识。

UWP 和 WinUI 2

重要

本文中的信息和示例是针对使用 Windows App SDK 和 WinUI 3 的应用优化的，但通常适用于使用 WinUI 2 的 UWP 应用。有关特定于平台的信息和示例，请查看 UWP API 参考。

本部分包含在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

用于 UWP 应用的 NavigationView 控件是 WinUI 2 的一部分。有关详细信息（包括安装说明），请参阅 WinUI 2。此控件的 API 存在于 Windows.UI.Xaml.Controls 和 Microsoft.UI.Xaml.Controls 命名空间中。

UWP API：Windows.UI.Xaml.Controls.NavigationView 类
WinUI 2 Apis：Microsoft.UI.Xaml.Controls.NavigationView 类
打开 WinUI 2 库应用，查看 NavigationView 的运行情况。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

建议使用最新的 WinUI 2 来获取所有控件的最新样式、模板和功能。 NavigationView 的某些功能（如顶部和分层导航）需要 Windows 10 版本 1809 (SDK 17763) 或更高版本，或是 WinUI 2。

要将本文中的代码与 WinUI 2 配合使用，请使用 XAML 中的别名（我们使用 muxc）来表示项目中包含的 Windows UI 库 API。有关详细信息，请参阅 WinUI 2 入门。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:NavigationView />

重要 API：NavigationView 类

打开 WinUI 3 库应用，查看 NavigationView 的运行情况。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

本示例介绍如何在 XAML 中创建简单的导航视图。

<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Nav Item A"/>
        <NavigationViewItem Content="Nav Item B"/>
        <NavigationViewItem Content="Nav Item C"/>
    </NavigationView.MenuItems>

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

显示模式

可以使用 PaneDisplayMode 属性配置不同的导航样式或显示模式（对于 NavigationView）。

顶部

窗格位于内容上方。
PaneDisplayMode="Top"

顶部导航的示例

在以下情况下建议使用顶部导航：

具有 5 个或更少的同等重要顶级导航类别，最终采用下拉溢出菜单中的任何其他顶级导航类别都被视为不太重要。
需要在屏幕上显示所有导航选项。
要为应用内容提供更多空间。
图标无法清楚地描述应用的导航类别。

左

窗格会展开并位于内容左侧。
PaneDisplayMode="Left"

展开的左侧导航窗格示例

在以下情况下建议使用左侧导航：

具有 5-10 个同等重要的顶级导航类别。
希望导航类别非常突出，而其他应用内容的空间较少。

LeftCompact

窗格在打开之前仅显示图标，位于内容左侧。打开时，窗格会覆盖内容。
PaneDisplayMode="LeftCompact"

精简左侧导航窗格示例

LeftMinimal

窗格打开之前仅显示菜单按钮。打开时，窗格会覆盖内容的左侧。
PaneDisplayMode="LeftMinimal"

最小左侧导航窗格示例

Auto

默认情况下，PaneDisplayMode 设置为 Auto。在 Auto 模式下，NavigationView 会在窗口变窄时从 LeftMinimal 调整为 LeftCompact，然后在窗口变宽时调整为 Left。有关更多信息，请参阅自适应行为部分。

左侧导航默认自适应行为
NavigationView 默认自适应行为

结构

这些图像显示为顶部或左侧导航进行配置时，控件窗格、标题和内容区域的布局。

顶部 NavigationView 布局
顶部导航布局

左侧 NavigationView 布局
左侧导航布局

窗格

可以使用 PaneDisplayMode 属性将窗格置于内容上方或内容左侧。

NavigationView 窗格可以包含：

NavigationViewItem 对象。用于导航到特定页面的导航项。
NavigationViewItemSeparator 对象。用于对导航项进行分组的分隔器。将 Opacity 属性设置为 0 可将分隔器呈现为空间。
NavigationViewItemHeader 对象。用于标记项组的标题。
允许应用级别搜索的可选 AutoSuggestBox 控件。可将该控件分配给 NavigationView.AutoSuggestBox 属性。
应用设置的可选入口点。要隐藏设置项，请将 IsSettingsVisible 属性设置为 false。

左窗格还包含：

用于切换窗格打开和关闭状态的菜单按钮。打开窗格后在较大的应用窗口中，你可以选择使用 IsPaneToggleButtonVisible 属性隐藏此按钮。

NavigationView 有一个后退按钮，它位于窗格的左上角。但是，它不会自动处理向后导航以及将内容添加到 Backstack。要启用向后导航，请参阅向后导航部分。

下面是顶部和左侧窗格位置的详细窗格结构。

NavigationView 顶部窗格剖析

标头
导航项
分隔器
AutoSuggestBox（可选）
设置按钮（可选）

NavigationView 左侧窗格剖析

“菜单”按钮
导航项
分隔器
标头
AutoSuggestBox（可选）
设置按钮（可选）

你可以使用 FooterMenuItems 将导航项放置在导航窗格的末尾，与将项目放置在窗格的开头处的 MenuItems 属性形成对比。

默认情况下，FooterMenuItems 会显示在“Settings”项之前。 “Settings”项仍然可以使用 IsSettingsVisible 属性进行切换。

只有“导航”项应该放在 FooterMenuItems 中 - 任何其他需要与窗格页脚对齐的内容都应该放在 PaneFooter 中。

有关如何向 NavigationView 添加 FooterMenuItems 的示例，请参阅 FooterMenuItems 类。

下图显示了页脚菜单中包含“帐户”、“购物车”和“帮助”导航项的 NavigationView。

带有 FooterMenuItems 的 NavigationView

可以通过将自由格式内容添加到 PaneFooter 属性，将该内容置于窗格页脚中。

窗格页脚顶部导航
顶部窗格页脚

窗格页脚左侧导航
左侧窗格页脚

窗格标题和页眉

可以通过设置 PaneTitle 属性，在窗格标题区域中放置文本内容。它采用一个字符串，在菜单按钮旁显示文本。

要添加非文本内容（如图像或徽标），可以通过将任何元素添加到 PaneHeader 属性来置于窗格标题中。

如果同时设置了 PaneTitle 和 PaneHeader，则内容会在菜单按钮旁水平堆叠（PaneTitle 最接近菜单按钮）。

窗格页眉顶部导航
顶部窗格标题

窗格页眉左侧导航
左侧窗格标题

窗格内容

可以通过将自由格式内容添加到 PaneCustomContent 属性，将该内容置于窗格中。

窗格自定义内容顶部导航
顶部窗格自定义内容

窗格自定义内容左侧导航
左侧窗格自定义内容

可以通过设置 Header 属性来添加页面标题。

NavigationView 标题

标题区域在左侧窗格位置中与导航按钮垂直对齐，在顶部窗格位置中位于窗格下方。它具有固定高度 52 px。它的用途是保存所选导航类别的页面标题。标题停靠在页面顶部，并作为内容区域的滚动剪辑点。

只要 NavigationView 处于“Minimal”显示模式下，页眉便可见。你可以选择在其他模式下隐藏标题，这样可以增大窗口宽度。要隐藏页眉，请将 AlwaysShowHeader 属性设置为 false。

Content

NavigationView 内容

内容区域是显示所选导航类别的大部分信息的位置。

建议在 NavigationView 处于“Minimal”模式时对内容区域使用 12px 边距，其他情况使用 24px 边距。

自适应行为

默认情况下，NavigationView 会根据可用的屏幕空间大小自动更改其显示模式。 CompactModeThresholdWidth 和 ExpandedModeThresholdWidth 属性指定显示模式更改的断点。可以修改这些值以自定义自适应显示模式行为。

默认值

当 PaneDisplayMode 设置为其默认值 Auto 时，自适应行为是：

在较大窗口宽度（1008px 或更大）上显示展开的左窗格。
在中等窗口宽度（641px 到 1007px）上显示仅限图标的左侧导航窗格 (LeftCompact)。
在较小窗口宽度（640px 或更小）上仅显示菜单按钮 (LeftMinimal)。

有关自适应行为的窗口大小的更多信息，请参阅屏幕大小和断点。

左侧导航默认自适应行为
NavigationView 默认自适应行为

最小

第二种常见自适应模式是在较大窗口宽度上使用展开的左侧窗格，在中等和较小窗口宽度上仅使用菜单按钮。

在以下情况下建议使用此模式：

在较小窗口宽度上需要将更多空间用于应用内容。
无法使用图标清楚地表示导航类别。

左侧导航最小自适应行为
NavigationView“最小”自适应行为

要配置此行为，请将 CompactModeThresholdWidth 设为要折叠窗格时的宽度。在这里，它从默认值 640 更改为 1007。还应设置 ExpandedModeThresholdWidth 以确保值不会发生冲突。

<NavigationView CompactModeThresholdWidth="1007" ExpandedModeThresholdWidth="1007"/>

精简

第三种常见自适应模式是在较大窗口宽度上使用展开的左侧窗格，在中等和较小窗口宽度上使用仅限图标的 LeftCompact 导航窗格。

在以下情况下建议使用此模式：

始终在屏幕上显示所有导航选项非常重要。
可以使用图标清楚地表示导航类别。

左侧导航精简自适应行为
NavigationView“精简”自适应行为

要配置此行为，请将 CompactModeThresholdWidth 设置为 0。

<NavigationView CompactModeThresholdWidth="0"/>

无自适应行为

要禁用自动自适应行为，请将 PaneDisplayMode 设置为 Auto 以外的值。在这里，它设置为 LeftMinimal，因此仅显示菜单按钮，无论窗口宽度如何。

左侧导航无自适应行为
PaneDisplayMode 设置为 LeftMinimal 的 NavigationView

<NavigationView PaneDisplayMode="LeftMinimal" />

如前面在“显示模式”部分中所述，可以将窗格设置为始终位于顶部、始终展开、始终精简或始终最小。还可以在应用代码中自己管理显示模式。下一部分中演示了这一示例。

在应用中使用顶部导航时，导航项会随着窗口宽度减少而折叠到溢出菜单中。当应用窗口窄时，将 PaneDisplayMode 从 Top 导航切换为 LeftMinimal 导航（而不是让所有项都折叠到溢出菜单中）可以提供更好的用户体验。

在以下情况下，建议在较大窗口大小上使用顶部导航，在较小窗口大小上使用左侧导航：

要一起显示一组同等重要的顶级导航类别，以便在此组中的一个类别不适合屏幕时，会折叠为左侧导航栏以便使它们具有同等重要性。
希望在较小窗口大小中保留尽可能多的内容空间。

此示例演示如何使用 VisualStateManager 和 AdaptiveTrigger.MinWindowWidth 属性在 Top 导航与 LeftMinimal 导航之间切换。

顶部或左侧自适应行为 1 的示例

<Grid>
    <NavigationView x:Name="NavigationViewControl" >
        <NavigationView.MenuItems>
            <NavigationViewItem Content="A" x:Name="A" />
            <NavigationViewItem Content="B" x:Name="B" />
            <NavigationViewItem Content="C" x:Name="C" />
        </NavigationView.MenuItems>
    </NavigationView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger
                        MinWindowWidth="{x:Bind NavigationViewControl.CompactModeThresholdWidth}" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="NavigationViewControl.PaneDisplayMode" Value="Top"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

提示

如果使用 AdaptiveTrigger.MinWindowWidth，则当窗口宽于指定最小宽度时，会触发可视状态。这意味着默认 XAML 定义狭窄窗口，而 VisualState 定义在窗口变得更宽时应用的修改。 NavigationView 的默认 PaneDisplayMode 为 Auto，因此当窗口宽度小于或等于 CompactModeThresholdWidth 时，就会使用 LeftMinimal 导航。当窗口变得更宽时，VisualState 会替代默认值，因此会使用 Top 导航。

NavigationView 不会自动执行任何导航任务。当用户点击某个导航项时，NavigationView 会将此项显示为已选中，并触发 ItemInvoked 事件。如果点击导致新项被选中，则还会引发 SelectionChanged 事件。

可以处理任一事件来执行与请求的导航相关的任务。应处理哪个事件取决于希望应用具有的行为。通常情况下，你会导航到请求的页面，并更新 NavigationView 标题来响应这些事件。

每当用户点击导航项时都会引发 ItemInvoked，即使该项已被选中。（还可以使用鼠标、键盘或其他输入通过等效操作调用该项。有关详细信息，请参阅输入和交互。）如果在 ItemInvoked 处理程序中导航，则默认情况下会重新加载页面，并将重复条目添加到导航堆栈。如果在调用某个项时进行导航，则应禁止重新加载页面，或确保在重新加载页面时不会在导航 Backstack 中创建重复条目。（请参阅代码示例。）
用户可以通过调用当前未选中的项，或是以编程方式更改所选项来引发 SelectionChanged。如果因为用户调用某个项而发生选择更改，则首先发生 ItemInvoked 事件。如果以编程方式进行选择更改，则不会引发 ItemInvoked。

所有导航项都是同一选择模型的一部分，无论它们是 MenuItems 还是 FooterMenuItems 的一部分。一次只能选择一个导航项。

NavigationView 具有内置后退按钮；但是与向前导航一样，它不会自动执行向后导航。用户点击后退按钮时，会引发 BackRequested 事件。可处理此事件以执行向后导航。有关更多信息和代码示例，请参阅导航历史记录和向后导航。

在“Minimal”或“Compact”模式下，NavigationView Pane 会作为弹出项目打开。在这种情况下，单击后退按钮会关闭 Pane，改为引发 PaneClosing 事件。

可以通过设置以下这些属性来隐藏或禁用后退按钮：

IsBackButtonVisible：用于显示和隐藏后退按钮。此属性采用 NavigationViewBackButtonVisible 枚举的值，默认设置为 Auto。当按钮处于折叠状态时，不会在布局中为它保留空间。
IsBackEnabled：用于启用或禁用后退按钮。可以将此属性数据绑定到导航框架的 CanGoBack 属性。如果 IsBackEnabled 为 false，则不会引发 BackRequested。

左侧导航窗格中的 NavigationView 后退按钮
左侧导航窗格中的后退按钮

顶部导航窗格中的 NavigationView 后退按钮
顶部导航窗格中的后退按钮

代码示例

此示例演示如何将 NavigationView 用于较大窗口大小上的顶部导航窗格和较小窗口大小上的左侧导航窗格。它可以通过在 VisualStateManager 中删除顶部导航设置，来适应仅限左侧导航。

该示例演示一种设置导航数据的常用方法，它适用于许多方案。在此示例中，你首先在 NavigationViewItem 的标记中存储要导航到的页面的完整类型名称。在事件处理程序中，将该值取消装箱，将它转换为 Type (C#) 或 Windows::UI::Xaml::Interop::TypeName (C++/WinRT) 对象，并使用该对象导航到目标页。这使你可以创建单元测试来确认标记中的值是否为有效类型。（另请参阅通过 C++/WinRT 将值装箱到 IInspectable 和将其取消装箱）。此外还演示了如何使用 NavigationView 的后退按钮实现向后导航。

此代码假设应用包含的要导航到的页面具有以下名称：HomePage、AppsPage、GamesPage、MusicPage、MyContentPage 和 SettingsPage。未显示这些页面的代码。

<Page ... >
 <Grid>
     <NavigationView x:Name="NavView"
                     Loaded="NavView_Loaded"
                     ItemInvoked="NavView_ItemInvoked"
                     BackRequested="NavView_BackRequested">
         <NavigationView.MenuItems>
             <NavigationViewItem Tag="NavigationViewDemo.HomePage" Icon="Home" Content="Home"/>
             <NavigationViewItemSeparator/>
             <NavigationViewItemHeader x:Name="MainPagesHeader"
                                       Content="Main pages"/>
             <NavigationViewItem Tag="NavigationViewDemo.AppsPage" Content="Apps">
                 <NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xEB3C;"/>
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
             <NavigationViewItem Tag="NavigationViewDemo.GamesPage" Content="Games">
                 <NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xE7FC;"/>
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
             <NavigationViewItem Tag="NavigationViewDemo.MusicPage" Icon="Audio" Content="Music"/>
         </NavigationView.MenuItems>

         <NavigationView.AutoSuggestBox>
             <!-- See AutoSuggestBox documentation for
              more info about how to implement search. -->
             <AutoSuggestBox x:Name="NavViewSearchBox" QueryIcon="Find"/>
         </NavigationView.AutoSuggestBox>

         <ScrollViewer>
             <Frame x:Name="ContentFrame" IsTabStop="True"
                NavigationFailed="ContentFrame_NavigationFailed"/>
         </ScrollViewer>
     </NavigationView>

     <VisualStateManager.VisualStateGroups>
         <VisualStateGroup>
             <VisualState>
                 <VisualState.StateTriggers>
                     <AdaptiveTrigger
                     MinWindowWidth="{x:Bind NavViewCompactModeThresholdWidth}"/>
                 </VisualState.StateTriggers>
                 <VisualState.Setters>
                     <!-- Remove the next 3 lines for left-only navigation. -->
                     <Setter Target="NavView.PaneDisplayMode" Value="Top"/>
                     <Setter Target="NavViewSearchBox.Width" Value="200"/>
                     <Setter Target="MainPagesHeader.Visibility" Value="Collapsed"/>
                     <!-- Leave the next line for left-only navigation. -->
                     <Setter Target="ContentFrame.Padding" Value="24,0,24,24"/>
                 </VisualState.Setters>
             </VisualState>
         </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
 </Grid>
</Page>

private double NavViewCompactModeThresholdWidth { get { return NavView.CompactModeThresholdWidth; } }

private void ContentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
{
    throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}

private void NavView_Loaded(object sender, RoutedEventArgs e)
{
    // You can also add items in code.
    NavView.MenuItems.Add(new NavigationViewItemSeparator());
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "My content",
        Icon = new SymbolIcon((Symbol)0xF1AD),
        Tag = "NavigationViewDemo.MyContentPage"
    });

    // Add handler for ContentFrame navigation.
    ContentFrame.Navigated += On_Navigated;

    // NavView doesn't load any page by default, so load home page.
    NavView.SelectedItem = NavView.MenuItems[0];
    // If navigation occurs on SelectionChanged, this isn't needed.
    // Because we use ItemInvoked to navigate, we need to call Navigate
    // here to load the home page.
    NavView_Navigate(typeof(HomePage), new EntranceNavigationTransitionInfo());
}

private void NavView_ItemInvoked(NavigationView sender,
                                 NavigationViewItemInvokedEventArgs args)
{
    if (args.IsSettingsInvoked == true)
    {
        NavView_Navigate(typeof(SettingsPage), args.RecommendedNavigationTransitionInfo);
    }
    else if (args.InvokedItemContainer != null)
    {
        Type navPageType = Type.GetType(args.InvokedItemContainer.Tag.ToString());
        NavView_Navigate(navPageType, args.RecommendedNavigationTransitionInfo);
    }
}

// NavView_SelectionChanged is not used in this example, but is shown for completeness.
// You will typically handle either ItemInvoked or SelectionChanged to perform navigation,
// but not both.
private void NavView_SelectionChanged(NavigationView sender,
                                      NavigationViewSelectionChangedEventArgs args)
{
    if (args.IsSettingsSelected == true)
    {
        NavView_Navigate(typeof(SettingsPage), args.RecommendedNavigationTransitionInfo);
    }
    else if (args.SelectedItemContainer != null)
    {
        Type navPageType = Type.GetType(args.SelectedItemContainer.Tag.ToString());
        NavView_Navigate(navPageType, args.RecommendedNavigationTransitionInfo);
    }
}

private void NavView_Navigate(
    Type navPageType,
    NavigationTransitionInfo transitionInfo)
{
    // Get the page type before navigation so you can prevent duplicate
    // entries in the backstack.
    Type preNavPageType = ContentFrame.CurrentSourcePageType;

    // Only navigate if the selected page isn't currently loaded.
    if (navPageType is not null && !Type.Equals(preNavPageType, navPageType))
    {
        ContentFrame.Navigate(navPageType, null, transitionInfo);
    }
}

private void NavView_BackRequested(NavigationView sender,
                                   NavigationViewBackRequestedEventArgs args)
{
    TryGoBack();
}

private bool TryGoBack()
{
    if (!ContentFrame.CanGoBack)
        return false;

    // Don't go back if the nav pane is overlayed.
    if (NavView.IsPaneOpen &&
        (NavView.DisplayMode == NavigationViewDisplayMode.Compact ||
         NavView.DisplayMode == NavigationViewDisplayMode.Minimal))
        return false;

    ContentFrame.GoBack();
    return true;
}

private void On_Navigated(object sender, NavigationEventArgs e)
{
    NavView.IsBackEnabled = ContentFrame.CanGoBack;

    if (ContentFrame.SourcePageType == typeof(SettingsPage))
    {
        // SettingsItem is not part of NavView.MenuItems, and doesn't have a Tag.
        NavView.SelectedItem = (NavigationViewItem)NavView.SettingsItem;
        NavView.Header = "Settings";
    }
    else if (ContentFrame.SourcePageType != null)
    {
        // Select the nav view item that corresponds to the page being navigated to.
        NavView.SelectedItem = NavView.MenuItems
                    .OfType<NavigationViewItem>()
                    .First(i => i.Tag.Equals(ContentFrame.SourcePageType.FullName.ToString()));

        NavView.Header =
            ((NavigationViewItem)NavView.SelectedItem)?.Content?.ToString();

    }
}

// MainPage.idl
runtimeclass MainPage : Microsoft.UI.Xaml.Controls.Page
{
    ...
    Double NavViewCompactModeThresholdWidth{ get; };
}

// pch.h
...
#include <winrt/Windows.UI.Xaml.Interop.h>
#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>


// MainPage.h
#pragma once

#include "MainPage.g.h"

namespace muxc
{
    using namespace winrt::Microsoft::UI::Xaml::Controls;
};

namespace winrt::NavigationViewDemo::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        double NavViewCompactModeThresholdWidth();
        void ContentFrame_NavigationFailed(
            Windows::Foundation::IInspectable const& /* sender */,
            Microsoft::UI::Xaml::Navigation::NavigationFailedEventArgs const& args);
        void NavView_Loaded(
            Windows::Foundation::IInspectable const& /* sender */,
            Microsoft::UI::Xaml::RoutedEventArgs const& /* args */);
        void NavView_ItemInvoked(
            Windows::Foundation::IInspectable const& /* sender */,
            muxc::NavigationViewItemInvokedEventArgs const& args);

        // NavView_SelectionChanged is not used in this example, but is shown for completeness.
        // You'll typically handle either ItemInvoked or SelectionChanged to perform navigation,
        // but not both.
        void NavView_SelectionChanged(
            muxc::NavigationView const& /* sender */,
            muxc::NavigationViewSelectionChangedEventArgs const& args);
        void NavView_Navigate(
            Windows::UI::Xaml::Interop::TypeName navPageType,
            Microsoft::UI::Xaml::Media::Animation::NavigationTransitionInfo const& transitionInfo);
        void NavView_BackRequested(
            muxc::NavigationView const& /* sender */,
            muxc::NavigationViewBackRequestedEventArgs const& /* args */);
        void On_Navigated(
            Windows::Foundation::IInspectable const& /* sender */,
            Microsoft::UI::Xaml::Navigation::NavigationEventArgs const& args);
        bool TryGoBack();

    private:

    };
}

namespace winrt::NavigationViewDemo::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

// MainPage.cpp
#include "pch.h"
#include "MainPage.xaml.h"
#if __has_include("MainPage.g.cpp")
#include "MainPage.g.cpp"
#endif

using namespace winrt;
using namespace Microsoft::UI::Xaml;

namespace winrt::NavigationViewDemo::implementation
{
    MainPage::MainPage()
    {
        InitializeComponent();
    }

    double MainPage::NavViewCompactModeThresholdWidth()
    {
        return NavView().CompactModeThresholdWidth();
    }

    void MainPage::ContentFrame_NavigationFailed(
        Windows::Foundation::IInspectable const& /* sender */,
        Microsoft::UI::Xaml::Navigation::NavigationFailedEventArgs const& args)
    {
        throw winrt::hresult_error(
            E_FAIL, winrt::hstring(L"Failed to load Page ") + args.SourcePageType().Name);
    }

    void MainPage::NavView_Loaded(
        Windows::Foundation::IInspectable const& /* sender */,
        Microsoft::UI::Xaml::RoutedEventArgs const& /* args */)
    {
        // You can also add items in code.
        NavView().MenuItems().Append(muxc::NavigationViewItemSeparator());
        muxc::NavigationViewItem navigationViewItem;
        navigationViewItem.Content(winrt::box_value(L"My content"));
        navigationViewItem.Icon(muxc::SymbolIcon(static_cast<muxc::Symbol>(0xF1AD)));
        navigationViewItem.Tag(winrt::box_value(L"NavigationViewDemo.MyContentPage"));
        NavView().MenuItems().Append(navigationViewItem);

        // Add handler for ContentFrame navigation.
        ContentFrame().Navigated({ this, &MainPage::On_Navigated });

        // NavView doesn't load any page by default, so load home page.
        NavView().SelectedItem(NavView().MenuItems().GetAt(0));
        // If navigation occurs on SelectionChanged, then this isn't needed.
        // Because we use ItemInvoked to navigate, we need to call Navigate
        // here to load the home page.
        NavView_Navigate(winrt::xaml_typename<NavigationViewDemo::HomePage>(),
            Microsoft::UI::Xaml::Media::Animation::EntranceNavigationTransitionInfo());
    }

    void MainPage::NavView_ItemInvoked(
        Windows::Foundation::IInspectable const& /* sender */,
        muxc::NavigationViewItemInvokedEventArgs const& args)
    {
        if (args.IsSettingsInvoked())
        {
            NavView_Navigate(winrt::xaml_typename<NavigationViewDemo::SettingsPage>(),
                args.RecommendedNavigationTransitionInfo());
        }
        else if (args.InvokedItemContainer())
        {
            Windows::UI::Xaml::Interop::TypeName pageTypeName;
            pageTypeName.Name = unbox_value<hstring>(args.InvokedItemContainer().Tag());
            pageTypeName.Kind = Windows::UI::Xaml::Interop::TypeKind::Primitive;
            NavView_Navigate(pageTypeName, args.RecommendedNavigationTransitionInfo());
        }
    }

    // NavView_SelectionChanged is not used in this example, but is shown for completeness.
    // You will typically handle either ItemInvoked or SelectionChanged to perform navigation,
    // but not both.
    void MainPage::NavView_SelectionChanged(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewSelectionChangedEventArgs const& args)
    {
        if (args.IsSettingsSelected())
        {
            NavView_Navigate(winrt::xaml_typename<NavigationViewDemo::SettingsPage>(),
                args.RecommendedNavigationTransitionInfo());
        }
        else if (args.SelectedItemContainer())
        {
            Windows::UI::Xaml::Interop::TypeName pageTypeName;
            pageTypeName.Name = unbox_value<hstring>(args.SelectedItemContainer().Tag());
            pageTypeName.Kind = Windows::UI::Xaml::Interop::TypeKind::Primitive;
            NavView_Navigate(pageTypeName, args.RecommendedNavigationTransitionInfo());
        }
    }

    void MainPage::NavView_Navigate(
        Windows::UI::Xaml::Interop::TypeName navPageType,
        Microsoft::UI::Xaml::Media::Animation::NavigationTransitionInfo const& transitionInfo)
    {
        // Get the page type before navigation so you can prevent duplicate
        // entries in the backstack.
        Windows::UI::Xaml::Interop::TypeName preNavPageType =
            ContentFrame().CurrentSourcePageType();

        // Navigate only if the selected page isn't currently loaded.
        if (navPageType.Name != L"" && preNavPageType.Name != navPageType.Name)
        {
            ContentFrame().Navigate(navPageType, nullptr, transitionInfo);
        }
    }

    void MainPage::NavView_BackRequested(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewBackRequestedEventArgs const& /* args */)
    {
        TryGoBack();
    }

    bool MainPage::TryGoBack()
    {
        if (!ContentFrame().CanGoBack())
            return false;
        // Don't go back if the nav pane is overlayed.
        if (NavView().IsPaneOpen() &&
            (NavView().DisplayMode() == muxc::NavigationViewDisplayMode::Compact ||
                NavView().DisplayMode() == muxc::NavigationViewDisplayMode::Minimal))
            return false;
        ContentFrame().GoBack();
        return true;
    }

    void MainPage::On_Navigated(
        Windows::Foundation::IInspectable const& /* sender */,
        Microsoft::UI::Xaml::Navigation::NavigationEventArgs const& args)
    {
        NavView().IsBackEnabled(ContentFrame().CanGoBack());

        if (ContentFrame().SourcePageType().Name ==
            winrt::xaml_typename<NavigationViewDemo::SettingsPage>().Name)
        {
            // SettingsItem is not part of NavView.MenuItems, and doesn't have a Tag.
            NavView().SelectedItem(NavView().SettingsItem().as<muxc::NavigationViewItem>());
            NavView().Header(winrt::box_value(L"Settings"));
        }
        else if (ContentFrame().SourcePageType().Name != L"")
        {
            for (auto&& eachMenuItem : NavView().MenuItems())
            {
                auto navigationViewItem =
                    eachMenuItem.try_as<muxc::NavigationViewItem>();
                {
                    if (navigationViewItem)
                    {
                        winrt::hstring hstringValue =
                            winrt::unbox_value_or<winrt::hstring>(
                                navigationViewItem.Tag(), L"");
                        if (hstringValue == ContentFrame().SourcePageType().Name)
                        {
                            NavView().SelectedItem(navigationViewItem);
                            NavView().Header(navigationViewItem.Content());
                        }
                    }
                }
            }
        }
    }
}

某些应用可能具有更复杂的层次结构，该结构不仅仅需要导航项的简单列表。你可能想要使用顶级导航项来显示页面类别，其中子项显示特定页。如果你具有仅链接到其他页面的中心样式页面，则此方法也非常有用。在这些情况下，应创建分层 NavigationView。

要在窗格中显示嵌套导航项的层次结构列表，请使用 MenuItems 属性或 NavigationViewItem 的 MenuItemsSource 属性。每个 NavigationViewItem 可以包含其他 NavigationViewItem 和组织元素，如项标题和分隔符。要在使用 MenuItemsSource 时显示层次结构列表，请将 ItemTemplate 设置为 NavigationViewItem，并将其 MenuItemsSource 属性绑定到层次结构的下一级。

尽管 NavigationViewItem 可以包含任意数量的嵌套级别，但建议为应用使用较浅的导航层次结构。我们认为两个级别是兼顾使用和理解的理想选择。

NavigationView 在“Top”、“Left”和“LeftCompact”窗格显示模式下显示层次结构。下面是展开的子树在每个窗格显示模式下的外观：

具有层次结构的 NavigationView

在标记中添加项的层次结构

此示例演示了如何在 XAML 标记中声明分层应用导航。

<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home" ToolTipService.ToolTip="Home"/>
        <NavigationViewItem Content="Collections" Icon="Keyboard" ToolTipService.ToolTip="Collections">
            <NavigationViewItem.MenuItems>
                <NavigationViewItem Content="Notes" Icon="Page" ToolTipService.ToolTip="Notes"/>
                <NavigationViewItem Content="Mail" Icon="Mail" ToolTipService.ToolTip="Mail"/>
            </NavigationViewItem.MenuItems>
        </NavigationViewItem>
    </NavigationView.MenuItems>
</NavigationView>

使用数据绑定添加项的层次结构

向 NavigationView 添加菜单项的层次结构

将 MenuItemsSource 属性绑定到分层数据
将项模板定义为 NavigationViewMenuItem，将其内容设置为菜单项的标签，并将其 MenuItemsSource 属性绑定到层次结构的下一级

此示例还演示了展开和折叠事件。带有子项的菜单项会引发这些事件。

<Page ... >
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="local:Category">
            <NavigationViewItem Content="{x:Bind Name}" MenuItemsSource="{x:Bind Children}"/>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <NavigationView x:Name="navview"
    MenuItemsSource="{x:Bind Categories, Mode=OneWay}"
    MenuItemTemplate="{StaticResource NavigationViewMenuItem}"
    ItemInvoked="{x:Bind OnItemInvoked}"
    Expanding="OnItemExpanding"
    Collapsed="OnItemCollapsed"
    PaneDisplayMode="Left">
            <StackPanel Margin="10,10,0,0">
                <TextBlock Margin="0,10,0,0" x:Name="ExpandingItemLabel" Text="Last Expanding: N/A"/>
                <TextBlock x:Name="CollapsedItemLabel" Text="Last Collapsed: N/A"/>
            </StackPanel>
        </NavigationView>
    </Grid>
</Page>

public class Category
{
    public String Name { get; set; }
    public String CategoryIcon { get; set; }
    public ObservableCollection<Category> Children { get; set; }
}

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

    public ObservableCollection<Category> Categories = new ObservableCollection<Category>()
    {
        new Category(){
            Name = "Menu item 1",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 2",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() {
                            Name  = "Menu item 3",
                            CategoryIcon = "Icon",
                            Children = new ObservableCollection<Category>() {
                                new Category() { Name  = "Menu item 4", CategoryIcon = "Icon" },
                                new Category() { Name  = "Menu item 5", CategoryIcon = "Icon" }
                            }
                        }
                    }
                }
            }
        },
        new Category(){
            Name = "Menu item 6",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 7",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() { Name  = "Menu item 8", CategoryIcon = "Icon" },
                        new Category() { Name  = "Menu item 9", CategoryIcon = "Icon" }
                    }
                }
            }
        },
        new Category(){ Name = "Menu item 10", CategoryIcon = "Icon" }
    };

    private void OnItemInvoked(object sender, NavigationViewItemInvokedEventArgs e)
    {
        var clickedItem = e.InvokedItem;
        var clickedItemContainer = e.InvokedItemContainer;
    }
    private void OnItemExpanding(object sender, NavigationViewItemExpandingEventArgs e)
    {
        var nvib = e.ExpandingItemContainer;
        var name = "Last expanding: " + nvib.Content.ToString();
        ExpandingItemLabel.Text = name;
    }
    private void OnItemCollapsed(object sender, NavigationViewItemCollapsedEventArgs e)
    {
        var nvib = e.CollapsedItemContainer;
        var name = "Last collapsed: " + nvib.Content;
        CollapsedItemLabel.Text = name;
    }
}

// Category.idl
namespace HierarchicalNavigationViewDataBinding
{
    runtimeclass Category
    {
        String Name;
        String CategoryIcon;
        Windows.Foundation.Collections.IObservableVector<Category> Children;
    }
}

// Category.h
#pragma once
#include "Category.g.h"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    struct Category : CategoryT<Category>
    {
        Category();
        Category(winrt::hstring name,
            winrt::hstring categoryIcon,
            Windows::Foundation::Collections::
                IObservableVector<HierarchicalNavigationViewDataBinding::Category> children);

        winrt::hstring Name();
        void Name(winrt::hstring const& value);
        winrt::hstring CategoryIcon();
        void CategoryIcon(winrt::hstring const& value);
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> Children();
        void Children(Windows::Foundation::Collections:
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> const& value);

    private:
        winrt::hstring m_name;
        winrt::hstring m_categoryIcon;
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> m_children;
    };
}

// Category.cpp
#include "pch.h"
#include "Category.h"
#include "Category.g.cpp"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    Category::Category()
    {
        m_children = winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    }

    Category::Category(
        winrt::hstring name,
        winrt::hstring categoryIcon,
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> children)
    {
        m_name = name;
        m_categoryIcon = categoryIcon;
        m_children = children;
    }

    hstring Category::Name()
    {
        return m_name;
    }

    void Category::Name(hstring const& value)
    {
        m_name = value;
    }

    hstring Category::CategoryIcon()
    {
        return m_categoryIcon;
    }

    void Category::CategoryIcon(hstring const& value)
    {
        m_categoryIcon = value;
    }

    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
        Category::Children()
    {
        return m_children;
    }

    void Category::Children(
        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
            const& value)
    {
        m_children = value;
    }
}

// MainPage.idl
import "Category.idl";

namespace HierarchicalNavigationViewDataBinding
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Windows.Foundation.Collections.IObservableVector<Category> Categories{ get; };
    }
}

// MainPage.h
#pragma once

#include "MainPage.g.h"

namespace muxc
{
    using namespace winrt::Microsoft::UI::Xaml::Controls;
};

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
            Categories();

        void OnItemInvoked(muxc::NavigationView const& sender, muxc::NavigationViewItemInvokedEventArgs const& args);
        void OnItemExpanding(
            muxc::NavigationView const& sender,
            muxc::NavigationViewItemExpandingEventArgs const& args);
        void OnItemCollapsed(
            muxc::NavigationView const& sender,
            muxc::NavigationViewItemCollapsedEventArgs const& args);

    private:
        Windows::Foundation::Collections::
            IObservableVector<HierarchicalNavigationViewDataBinding::Category> m_categories;
    };
}

namespace winrt::HierarchicalNavigationViewDataBinding::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

// MainPage.cpp
#include "pch.h"
#include "MainPage.h"
#include "MainPage.g.cpp"

#include "Category.h"

namespace winrt::HierarchicalNavigationViewDataBinding::implementation
{
    MainPage::MainPage()
    {
        InitializeComponent();

        m_categories =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();

        auto menuItem10 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 10", L"Icon", nullptr);

        auto menuItem9 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 9", L"Icon", nullptr);
        auto menuItem8 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 8", L"Icon", nullptr);
        auto menuItem7Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem7Children.Append(*menuItem9);
        menuItem7Children.Append(*menuItem8);

        auto menuItem7 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 7", L"Icon", menuItem7Children);
        auto menuItem6Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem6Children.Append(*menuItem7);

        auto menuItem6 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 6", L"Icon", menuItem6Children);

        auto menuItem5 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 5", L"Icon", nullptr);
        auto menuItem4 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 4", L"Icon", nullptr);
        auto menuItem3Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem3Children.Append(*menuItem5);
        menuItem3Children.Append(*menuItem4);

        auto menuItem3 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 3", L"Icon", menuItem3Children);
        auto menuItem2Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem2Children.Append(*menuItem3);

        auto menuItem2 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 2", L"Icon", menuItem2Children);
        auto menuItem1Children =
            winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
        menuItem1Children.Append(*menuItem2);

        auto menuItem1 = winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
            (L"Menu item 1", L"Icon", menuItem1Children);

        m_categories.Append(*menuItem1);
        m_categories.Append(*menuItem6);
        m_categories.Append(*menuItem10);
    }

    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category>
        MainPage::Categories()
    {
        return m_categories;
    }

    void MainPage::OnItemInvoked(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemInvokedEventArgs const& args)
    {
        auto clickedItem = args.InvokedItem();
        auto clickedItemContainer = args.InvokedItemContainer();
    }

    void MainPage::OnItemExpanding(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemExpandingEventArgs const& args)
    {
        auto nvib = args.ExpandingItemContainer();
        auto name = L"Last expanding: " + winrt::unbox_value<winrt::hstring>(nvib.Content());
        ExpandingItemLabel().Text(name);
    }

    void MainPage::OnItemCollapsed(
        muxc::NavigationView const& /* sender */,
        muxc::NavigationViewItemCollapsedEventArgs const& args)
    {
        auto nvib = args.CollapsedItemContainer();
        auto name = L"Last collapsed: " + winrt::unbox_value<winrt::hstring>(nvib.Content());
        CollapsedItemLabel().Text(name);
    }
}

选择

默认情况下，任何项都可以包含子项（已调用或已选择）。

当向用户提供导航选项的分层树时，可以使父项不可选择，例如，当你的应用没有与该父项关联的目标页时。如果父项可以选择，则建议使用左展开或顶部窗格显示模式。 LeftCompact 模式将使用户导航到父项，以便在每次调用子树时将其打开。

当处于左侧模式时，选定项将沿其左边缘绘制选择指示器，当处于顶部模式时，会沿其下边缘进行绘制。下面显示的是在左侧模式和顶部模式下选中了父项的 NavigationView。

在左侧模式下选中了父项的 NavigationView

在顶部模式下选中了父项的 NavigationView

选定项不一定总是可见。如果选中了折叠/不可展开的子树中的子项，则其第一个可见上级将显示为选中状态。如果子树展开，则选择指示器将移回至选定项。

例如，在上图中，用户可以选择日历项，然后折叠其子树。在这种情况下，选择指示器将显示在帐户项下，因为帐户是日历的第一个可见上级。当用户再次展开子树时，选择指示器将移回到日历项。

整个 NavigationView 不会显示 1 个以上选择指示器。

在顶部和左侧模式下，单击 NavigationViewItem 上的箭头将展开或折叠子树。单击或点击 NavigationViewItem 上的其他位置将触发 ItemInvoked 事件，同时还会折叠或展开子树。

要防止项在被调用时显示选择指示器，请将其 SelectsOnInvoked 属性设置为 False，如下所示：

<Page ...>
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="local:Category">
            <NavigationViewItem Content="{x:Bind Name}"
            MenuItemsSource="{x:Bind Children}"
            SelectsOnInvoked="{x:Bind IsLeaf}"/>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <NavigationView x:Name="navview"
    MenuItemsSource="{x:Bind Categories, Mode=OneWay}"
    MenuItemTemplate="{StaticResource NavigationViewMenuItem}">
        </NavigationView>
    </Grid>
</Page>

public class Category
{
    public String Name { get; set; }
    public String CategoryIcon { get; set; }
    public ObservableCollection<Category> Children { get; set; }
    public bool IsLeaf { get; set; }
}

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

    public ObservableCollection<Category> Categories = new ObservableCollection<Category>()
    {
        new Category(){
            Name = "Menu item 1",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 2",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() {
                            Name  = "Menu item 3",
                            CategoryIcon = "Icon",
                            Children = new ObservableCollection<Category>() {
                                new Category() { Name  = "Menu item 4", CategoryIcon = "Icon", IsLeaf = true },
                                new Category() { Name  = "Menu item 5", CategoryIcon = "Icon", IsLeaf = true }
                            }
                        }
                    }
                }
            }
        },
        new Category(){
            Name = "Menu item 6",
            CategoryIcon = "Icon",
            Children = new ObservableCollection<Category>() {
                new Category(){
                    Name = "Menu item 7",
                    CategoryIcon = "Icon",
                    Children = new ObservableCollection<Category>() {
                        new Category() { Name  = "Menu item 8", CategoryIcon = "Icon", IsLeaf = true },
                        new Category() { Name  = "Menu item 9", CategoryIcon = "Icon", IsLeaf = true }
                    }
                }
            }
        },
        new Category(){ Name = "Menu item 10", CategoryIcon = "Icon", IsLeaf = true }
    };
}

// Category.idl
namespace HierarchicalNavigationViewDataBinding
{
    runtimeclass Category
    {
        ...
        Boolean IsLeaf;
    }
}

// Category.h
...
struct Category : CategoryT<Category>
{
    ...
    Category(winrt::hstring name,
        winrt::hstring categoryIcon,
        Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category> children,
        bool isleaf = false);
    ...
    bool IsLeaf();
    void IsLeaf(bool value);

private:
    ...
    bool m_isleaf;
};

// Category.cpp
...
Category::Category(winrt::hstring name,
    winrt::hstring categoryIcon,
    Windows::Foundation::Collections::IObservableVector<HierarchicalNavigationViewDataBinding::Category> children,
    bool isleaf) : m_name(name), m_categoryIcon(categoryIcon), m_children(children), m_isleaf(isleaf) {}
...
bool Category::IsLeaf()
{
    return m_isleaf;
}

void Category::IsLeaf(bool value)
{
    m_isleaf = value;
}

// MainPage.h and MainPage.cpp
// Delete OnItemInvoked, OnItemExpanding, and OnItemCollapsed.

// MainPage.cpp
...
MainPage::MainPage()
{
    InitializeComponent();

    m_categories = winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();

    auto menuItem10 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 10", L"Icon", nullptr, true);

    auto menuItem9 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 9", L"Icon", nullptr, true);
    auto menuItem8 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 8", L"Icon", nullptr, true);
    auto menuItem7Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem7Children.Append(*menuItem9);
    menuItem7Children.Append(*menuItem8);

    auto menuItem7 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 7", L"Icon", menuItem7Children);
    auto menuItem6Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem6Children.Append(*menuItem7);

    auto menuItem6 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 6", L"Icon", menuItem6Children);

    auto menuItem5 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 5", L"Icon", nullptr, true);
    auto menuItem4 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 4", L"Icon", nullptr, true);
    auto menuItem3Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem3Children.Append(*menuItem5);
    menuItem3Children.Append(*menuItem4);

    auto menuItem3 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 3", L"Icon", menuItem3Children);
    auto menuItem2Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem2Children.Append(*menuItem3);

    auto menuItem2 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 2", L"Icon", menuItem2Children);
    auto menuItem1Children =
        winrt::single_threaded_observable_vector<HierarchicalNavigationViewDataBinding::Category>();
    menuItem1Children.Append(*menuItem2);

    auto menuItem1 =
        winrt::make_self<HierarchicalNavigationViewDataBinding::implementation::Category>
        (L"Menu item 1", L"Icon", menuItem1Children);

    m_categories.Append(*menuItem1);
    m_categories.Append(*menuItem6);
    m_categories.Append(*menuItem10);
}
...

分层 NavigationView 内的键盘操作

用户可以使用键盘在 NavigationView 周围移动焦点。箭头键在窗格内公开“内部导航”，并按照树视图中提供的交互进行操作。当在 NavigationView 或其弹出项目菜单（在 HierarchicalNavigationView 的顶部和左侧模式下显示）中导航时，键操作将发生变化。下面是每个键可在分层 NavigationView 中执行的特定操作：

键	在左侧模式下	在顶部模式下	在弹出项目中
向上	将焦点移动到当前焦点项的正上方。	不执行任何操作。	将焦点移动到当前焦点项的正上方。
向下	将焦点移动到当前焦点项的正下方。*	不执行任何操作。	将焦点移动到当前焦点项的正下方。*
权限	不执行任何操作。	将焦点移动到当前焦点项的右侧。	不执行任何操作。
左	不执行任何操作。	将焦点移动到当前焦点项的左侧。	不执行任何操作。
空格键/Enter	如果某项具有子项，则展开/折叠项且不更改焦点。	如果某项具有子项，则将子项展开为弹出项目，并将焦点置于弹出项目中的第一项。	调用/选择项并关闭弹出项目。
Esc	不执行任何操作。	不执行任何操作。	关闭弹出项目。

空格键或 Enter 键始终会调用/选择一个项。

*请注意，项不需要在视觉上相邻，焦点将从窗格列表的最后一项移动到设置项。

NavigationView 自定义

窗格背景

默认情况下，NavigationView 窗格根据显示模式使用不同的背景：

在左侧展开，与内容并排时（左侧模式），窗格是纯灰色。
在内容顶部以覆盖形式打开时（顶部、最小或精简模式），窗格使用应用内 Acrylic。

要修改窗格背景，可以在每种模式中替代用于呈现背景的 XAML 主题资源。（使用此方法而不是单个 PaneBackground 属性是为了针对不同显示模式支持不同背景。）

此表显示每种显示模式下使用的主题资源。

显示模式	主题资源
左	NavigationViewExpandedPaneBackground
LeftCompact LeftMinimal	NavigationViewDefaultPaneBackground
顶部	NavigationViewTopPaneBackground

此示例演示如何在 App.xaml 中替代主题资源。替代主题资源时，应始终至少提供“Default”和“HighContrast”资源字典，并根据需要提供用于“Light”或“Dark”资源的字典。有关更多信息，请参阅 ResourceDictionary.ThemeDictionaries。

重要

此代码演示如何使用 WinUI 2 版本的 AcrylicBrush。如果改为使用平台版本的 AcrylicBrush，则应用项目的最低版本必须是 SDK 16299 或更高版本。要使用平台版本，请删除对 muxm: 的所有引用。

<Application ... xmlns:muxm="using:Microsoft.UI.Xaml.Media" ...>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
                <ResourceDictionary>
                    <ResourceDictionary.ThemeDictionaries>
                        <ResourceDictionary x:Key="Default">
                            <!-- The "Default" theme dictionary is used unless a specific
                                 light, dark, or high contrast dictionary is provided. These
                                 resources should be tested with both the light and dark themes,
                                 and specific light or dark resources provided as needed. -->
                            <muxm:AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                                   BackgroundSource="Backdrop"
                                   TintColor="LightSlateGray"
                                   TintOpacity=".6"/>
                            <muxm:AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                                   BackgroundSource="Backdrop"
                                   TintColor="{ThemeResource SystemAccentColor}"
                                   TintOpacity=".6"/>
                            <LinearGradientBrush x:Key="NavigationViewExpandedPaneBackground"
                                     StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="LightSlateGray" Offset="0.0" />
                                <GradientStop Color="White" Offset="1.0" />
                            </LinearGradientBrush>
                        </ResourceDictionary>
                        <ResourceDictionary x:Key="HighContrast">
                            <!-- Always include a "HighContrast" dictionary when you override
                                 theme resources. This empty dictionary ensures that the
                                 default high contrast resources are used when the user
                                 turns on high contrast mode. -->
                        </ResourceDictionary>
                    </ResourceDictionary.ThemeDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

顶部空白

IsTitleBarAutoPaddingEnabled 属性需要 WinUI 2.2 或更高版本。

某些应用选择自定义其窗口的标题栏，可能会将其应用内容扩展到标题栏区域中。当 NavigationView 是使用 ExtendViewIntoTitleBar API 扩展到标题栏的应用中的根元素时，该控件会自动调整其交互式元素的位置，以防止与可拖动区域重叠。

扩展到标题栏中的应用

如果应用通过调用 Window.SetTitleBar 方法来指定可拖动区域，并且你希望后退按钮和菜单按钮可拖至更靠近应用窗口顶部的位置，请将 IsTitleBarAutoPaddingEnabled 设置为 false。

应用扩展到标题栏而无需额外填充

<muxc:NavigationView x:Name="NavView" IsTitleBarAutoPaddingEnabled="False">

备注

要进一步调整 NavigationView 的标题区域位置，请重写 NavigationViewHeaderMargin XAML 主题资源，例如，在“页”资源中。

<Page.Resources>
    <Thickness x:Key="NavigationViewHeaderMargin">12,0</Thickness>
</Page.Resources>

此主题资源修改 NavigationView.Header 周围的边距。

通过

NavigationView

这是正确的控件吗？

UWP 和 WinUI 2

创建导航视图

显示模式

顶部

左

LeftCompact

LeftMinimal

Auto

结构

窗格

顶部导航窗格

左侧导航窗格

页脚菜单项

窗格页脚

窗格标题和页眉

窗格内容

Header

Content

自适应行为

默认值

最小

精简

无自适应行为

顶部到左侧导航

导航

向后导航

代码示例

分层导航

在标记中添加项的层次结构

使用数据绑定添加项的层次结构

选择

分层 NavigationView 内的键盘操作

NavigationView 自定义

窗格背景

顶部空白

备注

其他资源

通过

NavigationView

这是正确的控件吗？

UWP 和 WinUI 2

创建导航视图

显示模式

顶部

左

LeftCompact

LeftMinimal

Auto

结构

窗格

顶部导航窗格

左侧导航窗格

页脚菜单项

窗格页脚

窗格标题和页眉

窗格内容

Header

Content

自适应行为

默认值

最小

精简

无自适应行为

顶部到左侧导航

导航

向后导航

代码示例

分层导航

在标记中添加项的层次结构

使用数据绑定添加项的层次结构

选择

分层 NavigationView 内的键盘操作

NavigationView 自定义

窗格背景

顶部空白

备注

相关主题

其他资源