WPF UI NavigationView 完整指南：快速搭建 WPF 侧边导航菜单-开发者社区

WPF UI NavigationView 完整指南：快速搭建 WPF 侧边导航菜单

【免费下载链接】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 风格 WPF 应用处理页面导航的核心：侧边导航面板、内容区、返回导航甚至搜索框都内置在这一个控件里。如果你的 WPF 应用需要多页面导航，了解这一个控件就足够了。

从一个界面说起：为什么不用现成组合

传统 WPF 应用通常用 TabControl、Menu 加自定义左栏拼出导航：页面切换逻辑、控件样式统一、返回按钮，全都要自己写。问题不在于这些控件不能用，而在于胶水代码量大，功能一多就很难维护。

NavigationView 给出的是一套现成结构：Pane 是左侧或顶部的导航面板，Header 是内容区顶部的标题区（常放面包屑），MenuItems 是主菜单项，FooterMenuItems 是固定在底部的"设置""关于"等辅助项。导航历史、返回按钮、页面缓存都由控件内部处理，你只负责声明导航项并绑定页面。

最小配置：几行 XAML 跑通 WPF 侧边导航菜单

<ui:NavigationView xmlns:pages="clr-namespace:YourApp.Views.Pages"> <ui:NavigationView.MenuItems> <ui:NavigationViewItem Content="首页" Icon="{ui:SymbolIcon Home24}" TargetPageType="{x:Type pages:DashboardPage}" /> <ui:NavigationViewItem Content="数据" Icon="{ui:SymbolIcon DataHistogram24}" TargetPageType="{x:Type pages:DataPage}" /> </ui:NavigationView.MenuItems> <ui:NavigationView.FooterMenuItems> <ui:NavigationViewItem Content="设置" Icon="{ui:SymbolIcon Settings24}" TargetPageType="{x:Type pages:SettingsPage}" /> </ui:NavigationView.FooterMenuItems> </ui:NavigationView>

每个导航项的TargetPageType是必需的，它告诉控件选中后跳转到哪个页面。想在代码里导航，直接调用Navigate，传页面类型或PageTag字符串都可以：

MyNavigationView.Navigate(typeof(SettingsPage)); // 按类型导航 MyNavigationView.Navigate("settings"); // 按 PageTag 导航

Gallery 示例中 NavigationView 的实际效果：侧边菜单、面包屑头部与内容区都由同一个控件提供。

把导航项绑定到 ViewModel：WPF MVVM 页面导航流程

MVVM 应用里，不建议在 XAML 中写死导航项，而是在 ViewModel 中定义集合，绑定到MenuItemsSource/FooterMenuItemsSource。页面和 ViewModel 注册进依赖注入容器：

services.AddSingleton<INavigationService, NavigationService>(); services.AddSingleton<IPageService, PageService>(); services.AddScoped<DashboardPage>(); services.AddScoped<DashboardViewModel>();

MenuItems = new ObservableCollection<object> { new NavigationViewItem("首页", SymbolRegular.Home24, typeof(DashboardPage)), new NavigationViewItem("数据", SymbolRegular.DataHistogram24, typeof(DataPage)) };

在窗口构造函数中把服务挂到控件上（navigationService.SetNavigationControl(RootNavigationView)），之后任何 ViewModel 都可以注入INavigationService发起导航。页面若实现INavigationAware，还能收到OnNavigatedTo/OnNavigatedFrom回调，方便在导航时加载数据、离开时清理状态。

基于 MVVM 加依赖注入的项目模板界面，展示了 NavigationView 与页面绑定的完整用法。

布局模式、搜索与主题：三个值得知道的扩展能力

PaneDisplayMode 决定面板形态：Left常驻左侧；Top变顶部横条；LeftCompact折叠成只显示图标；LeftMinimal默认隐藏、以浮层方式展开。需要响应式布局时，把该属性绑定到 ViewModel 属性，再根据窗口SizeChanged切换即可。

搜索框与面包屑：控件预留了AutoSuggestBox和 Header 两个插槽。Header 里放BreadcrumbBar会自动与导航历史同步，用户随时知道自己位于哪一级；面板中放AutoSuggestBox，功能较多的应用可以靠搜索快速定位页面。

主题集成：NavigationView 跟随 WPF UI 的主题系统，ApplicationThemeManager切换 WPF 明暗主题时整个控件自动生效，也可以配合SystemThemeWatcher跟随系统主题，细节见主题系统文档。

按应用形态选导航方式

应用形态	建议配置	原因
管理后台、多模块工具	Left + 面包屑	功能多、层级深，面包屑帮助用户定位当前位置
数据监控、工作台	LeftCompact + AutoSuggestBox	面板紧凑留出内容空间，搜索补齐深层功能入口
单功能小工具	Top 或 LeftMinimal	以内容为主，导航仅作兜底入口
大窗口桌面应用	Left +`CacheHistory`	配合页面缓存，反复切换时保留页面状态