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/wpfuiWPF 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 ContentData 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:NameRootNavigation ui:NavigationView.AutoSuggestBox ui:AutoSuggestBox PlaceholderTextSearch / /ui:NavigationView.AutoSuggestBox /ui:NavigationView两个常用技巧主菜单项设置NavigationCacheModeEnabled可让页面状态在切走时保留底部设置项则通常设为Disabled。Header 里放一个空的BreadcrumbBar它会自动跟随 NavigationView 的导航历史同步不需要手动维护条目。代码里跳转与返回不点击菜单时用Navigate方法按页面类型或标签跳转MyNavigationView.Navigate(typeof(SettingsPage)); MyNavigationView.Navigate(settings);标签模式下需要在项上显式声明PageTagsettings未声明时标签会由Content自动生成如 Settings 变成 settings。返回则由控件自己管理CanGoBack为 true 时返回按钮自动出现也可调用GoBack()。布局选择5 种 PaneDisplayMode 的差异面板的位置和形态由PaneDisplayMode一个属性控制枚举定义在 src/Wpf.Ui/Controls/NavigationView/NavigationViewPaneDisplayMode.cs共 5 个值取值面板形态适合的应用窗口Left常驻左侧始终展开管理后台、功能入口较多的桌面工具LeftCompact折叠为纯图标条悬停或点汉堡按钮展开宽度有限的常规窗口想要紧凑但可展开LeftMinimal默认隐藏展开时以浮层覆盖内容以内容为主的窗口导航是低频操作LeftFluent大图标加标题竖排类似新版应用商店启动页、展示型应用注意它不支持子菜单Top/Bottom面板变水平条放顶部或底部宽而矮的窗口或希望菜单不占侧边空间设置方式就是一行属性ui:NavigationView PaneDisplayModeTop /面板的展开/收起状态由IsPaneOpen控制。官方文档给出的响应式做法是把PaneDisplayMode绑定到 ViewModel 属性在Window.SizeChanged里按窗口宽度切换模式从而让同一套页面在不同分辨率下自动调整布局。搜索框与主题联动AutoSuggestBox 直接挂在导航控件上即可出现在面板内示例中还给CtrlF绑定了FocusCommand用户按快捷键直接聚焦搜索。主题方面NavigationView 跟随 WPF UI 的主题系统明暗切换时无需为导航单独写样式。MVVM 接入动态菜单与导航服务怎么接线当导航项需要由代码生成例如从配置或接口读取把菜单集合绑定到MenuItemsSource/FooterMenuItemsSource两个依赖属性即可控件会监听集合变化并自动增删项。示例 samples/Wpf.Ui.Demo.Mvvm/Views/MainWindow.xaml 中的写法ui:NavigationView x:NameRootNavigation MenuItemsSource{Binding ViewModel.NavigationItems} FooterMenuItemsSource{Binding ViewModel.NavigationFooter} /注册导航服务MVVM 场景下推荐用INavigationService解耦从哪跳转。在 samples/Wpf.Ui.Demo.Mvvm/App.xaml.cs 中通过 .NET Generic Host 注册services.AddSingletonINavigationService, NavigationService(); services.AddSingletonINavigationWindow, Views.MainWindow();窗口构造函数里再把控件挂给服务navigationService.SetNavigationControl(RootNavigation);之后任意 ViewModel 注入INavigationService就能发起跳转不再引用具体控件实例。此外还有Wpf.Ui.DependencyInjection扩展包src/Wpf.Ui.DependencyInjection/ServiceCollectionExtensions.cs提供AddNavigationViewPageProvider()一键注册页面解析。页面生命周期钩子页面代码后置实现INavigationAware即可获得OnNavigatedTo/OnNavigatedFrom两个回调适合做进页加载数据、离页保存状态。MVVM 页面则让页继承INavigableViewTViewModel、ViewModel 实现INavigationAware前提条件是页面要有公开的ViewModel属性。接口定义在 src/Wpf.Ui.Abstractions/Controls/INavigationAware.cs。导航生命周期历史、缓存与事件拦截三个进阶点都直接影响体验位置都比较好找导航历史History属性返回已访问的 Page 集合面包屑就是基于它工作的。页面缓存CacheHistory5让最近 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考