企业官网建设流程全解析

WPF UI NavigationView 怎么用：5 种布局模式与页面导航方法一次讲清

【免费下载链接】wpfuiWPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly.项目地址: https://gitcode.com/GitHub_Trending/wp/wpfui

WPF UI 的 NavigationView 是这套 Fluent 控件库里的顶层导航控件，它把"可折叠侧边栏 + 内容区 + 面包屑 + 搜索框"整合在一个控件内。读完本文，你会知道 NavigationView 的每个区域负责什么、如何用 XAML 和 MVVM 两种方式接入导航、5 种 PaneDisplayMode 布局各适合什么窗口形态，以及页面缓存和导航事件这些进阶配置在哪里设置。

控件结构：NavigationView 由哪些区域组成

NavigationView 的工作方式可以用官方文档里的"Anatomy"（解剖图）来理解，共六个区域，配置时先弄清对应关系：

• Pane（导航面板）：左侧或顶部的菜单区，包含所有导航项，可折叠。
• MenuItems（主菜单集合）：核心功能入口，如"首页""数据"。
• FooterMenuItems（底部菜单集合）：次要入口，通常放"设置""关于"。
• Header（头部）：内容区上方的横条，常用来挂面包屑导航。
• Content Area（内容区）：当前页面实际渲染的位置，内部由 Frame 承载。
• AutoSuggestBox（可选搜索框）：嵌入面板顶部的实时搜索建议框。

完整定义见 docs/documentation/navigation-view.md，其中对每个区域和属性都有逐条说明。

导航项的必备属性

每个 NavigationViewItem 必须设置TargetPageType，它决定点击后跳到哪个页面：

<ui:NavigationViewItem Content="Data" Icon="{ui:SymbolIcon DataHistogram24}" TargetPageType="{x:Type pages:DataPage}" />

图标使用 SymbolIcon 引用符号字体，符号名取自库内置的 SymbolRegular / SymbolFilled 枚举（如Home24、Settings24）。

XAML 配置：最小导航骨架怎么写

最小可用结构只需要两件事：给 MenuItems 加主菜单项、给 FooterMenuItems 加底部项。仓库示例 samples/Wpf.Ui.Demo.Simple/MainWindow.xaml 就是一个完整的最小写法，它还额外挂了搜索框和面包屑：

<ui:NavigationView x:Name="RootNavigation"> <ui:NavigationView.AutoSuggestBox> <ui:AutoSuggestBox PlaceholderText="Search" /> </ui:NavigationView.AutoSuggestBox> </ui:NavigationView>

两个常用技巧：

• 主菜单项设置NavigationCacheMode="Enabled"可让页面状态在切走时保留；底部设置项则通常设为Disabled。
• Header 里放一个空的BreadcrumbBar，它会自动跟随 NavigationView 的导航历史同步，不需要手动维护条目。

代码里跳转与返回

不点击菜单时，用Navigate方法按页面类型或标签跳转：

MyNavigationView.Navigate(typeof(SettingsPage)); MyNavigationView.Navigate("settings");

标签模式下需要在项上显式声明PageTag="settings"，未声明时标签会由Content自动生成（如 "Settings" 变成 "settings"）。返回则由控件自己管理：CanGoBack为 true 时返回按钮自动出现，也可调用GoBack()。

布局选择：5 种 PaneDisplayMode 的差异

面板的位置和形态由PaneDisplayMode一个属性控制，枚举定义在 src/Wpf.Ui/Controls/NavigationView/NavigationViewPaneDisplayMode.cs，共 5 个值：

设置方式就是一行属性：

<ui:NavigationView PaneDisplayMode="Top" />

面板的展开/收起状态由IsPaneOpen控制。官方文档给出的响应式做法是：把PaneDisplayMode绑定到 ViewModel 属性，在Window.SizeChanged里按窗口宽度切换模式，从而让同一套页面在不同分辨率下自动调整布局。

搜索框与主题联动

AutoSuggestBox 直接挂在导航控件上即可出现在面板内，示例中还给Ctrl+F绑定了FocusCommand，用户按快捷键直接聚焦搜索。主题方面，NavigationView 跟随 WPF UI 的主题系统，明暗切换时无需为导航单独写样式。

MVVM 接入：动态菜单与导航服务怎么接线

当导航项需要由代码生成（例如从配置或接口读取），把菜单集合绑定到MenuItemsSource/FooterMenuItemsSource两个依赖属性即可，控件会监听集合变化并自动增删项。示例 samples/Wpf.Ui.Demo.Mvvm/Views/MainWindow.xaml 中的写法：

<ui:NavigationView x:Name="RootNavigation" MenuItemsSource="{Binding ViewModel.NavigationItems}" FooterMenuItemsSource="{Binding ViewModel.NavigationFooter}" />

注册导航服务

MVVM 场景下推荐用INavigationService解耦"从哪跳转"。在 samples/Wpf.Ui.Demo.Mvvm/App.xaml.cs 中通过 .NET Generic Host 注册：

services.AddSingleton<INavigationService, NavigationService>(); services.AddSingleton<INavigationWindow, Views.MainWindow>();

窗口构造函数里再把控件挂给服务：

navigationService.SetNavigationControl(RootNavigation);

之后任意 ViewModel 注入INavigationService就能发起跳转，不再引用具体控件实例。此外还有Wpf.Ui.DependencyInjection扩展包（src/Wpf.Ui.DependencyInjection/ServiceCollectionExtensions.cs），提供AddNavigationViewPageProvider()一键注册页面解析。

页面生命周期钩子

页面代码后置实现INavigationAware即可获得OnNavigatedTo/OnNavigatedFrom两个回调，适合做进页加载数据、离页保存状态。MVVM 页面则让页继承INavigableView<TViewModel>、ViewModel 实现INavigationAware，前提条件是页面要有公开的ViewModel属性。接口定义在 src/Wpf.Ui.Abstractions/Controls/INavigationAware.cs。

导航生命周期：历史、缓存与事件拦截

三个进阶点都直接影响体验，位置都比较好找：

• 导航历史：History属性返回已访问的 Page 集合，面包屑就是基于它工作的。
• 页面缓存：CacheHistory="5"让最近 5 个页面保留在内存中，切回时不重新创建。注意官方文档明确提醒：缓存会提高内存占用，只给创建成本高或状态必须保留的页面用，频繁刷新数据的页面不要缓存。单项级别也可用前面提到的NavigationCacheMode单独控制。
• 导航事件：Navigating发生在跳转前且可取消（例如非管理员禁止进设置页，把args.Cancel = true即可），Navigated发生在完成后，SelectionChanged在导航项被选中时触发。

这三个机制组合起来，可以覆盖"拦截未授权跳转 + 保留表单填写状态 + 记录访问路径"这类常见需求。

从哪开始：示例与文档索引

• 完整功能演示：src/Wpf.Ui.Gallery/，Gallery 应用里每个控件都有独立演示页，NavigationView 的页面展示了面板各区域的组合效果。
• 三种入门示例：samples/Wpf.Ui.Demo.Simple/（纯 XAML 最简）、samples/Wpf.Ui.Demo.Mvvm/（完整 MVVM + DI）、samples/Wpf.Ui.Demo.SetResources.Simple/（自定义资源覆盖）。
• 从零建项目：Visual Studio 模板位于 src/Wpf.Ui.Extension.Template.Blank/ 和 src/Wpf.Ui.Extension.Template.Fluent/，后者直接生成带 NavigationView 的 MVVM 骨架。
• 属性级 API 说明：docs/documentation/navigation-view.md。

建议的路径是：先打开 Simple 示例对照 XAML 看一遍区域划分，再按自己项目的架构选 Simple 或 Mvvm 版本作为起点，遇到属性疑问时回官方文档查对应小节。

【免费下载链接】wpfuiWPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly.项目地址: https://gitcode.com/GitHub_Trending/wp/wpfui