企业官网建设流程全解析

WPF UI NavigationView 实战：15 行代码搭好侧边导航

【免费下载链接】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 提供 Fluent 风格的 NavigationView 控件，一个标签就能搭出带侧边菜单、面包屑和搜索框的桌面导航，本文从最小配置讲到 MVVM 接入，带你完整跑通。

核心能力速览

可折叠导航面板

NavigationView 提供汉堡菜单式导航面板，支持左开、置顶、紧凑、最小四种显示模式。窗口变窄时收成图标栏，不挤占内容区。

面包屑与搜索框

Header 区域可放 BreadcrumbBar，自动同步导航历史；AutoSuggestBox 嵌在面板顶部，输入即出搜索建议。用户随时知道自己在哪，也能直接搜到目标页。

导航历史与页面缓存

控件自动维护历史栈，CanGoBack 为 true 时显示返回按钮。需要保留页面状态时开启缓存，回到上一页时输入内容不丢。

最小可运行配置

下面这段 XAML 就是最精简的可用形态，两个导航项就能跑起来：

<ui:NavigationView x:Name="RootNavigation"> <ui:NavigationView.MenuItems> <ui:NavigationViewItem Content="Home" Icon="{ui:SymbolIcon Home24}" TargetPageType="{x:Type pages:DashboardPage}" /> <ui:NavigationViewItem Content="Data" Icon="{ui:SymbolIcon DataHistogram24}" TargetPageType="{x:Type pages:DataPage}" /> </ui:NavigationView.MenuItems> </ui:NavigationView>

这段代码做了什么：声明一个 NavigationView，放两个导航项，点哪一项就加载 TargetPageType 指定的页面，图标和文字由 SymbolIcon 直接给出。

两种接入方式对比

方式 A：XAML 声明式

适合小工具：菜单项直接写在 XAML，跳转在代码后置里调 Navigate 一行搞定，不用搭依赖注入。

// 按类型跳转 RootNavigation.Navigate(typeof(SettingsPage)); // 有历史才能回退 if (RootNavigation.CanGoBack) { RootNavigation.GoBack(); }

方式 B：MVVM 绑定式

适合中大型项目：菜单项在 ViewModel 里构建，XAML 只负责绑定，增删页面不碰 UI 代码。

NavigationItems = [ new NavigationViewItem { Content = "Home", Icon = new SymbolIcon { Symbol = SymbolRegular.Home24 }, TargetPageType = typeof(DashboardPage) } ];

XAML 侧只需一行绑定：

<ui:NavigationView MenuItemsSource="{Binding NavigationItems}" />

按需选场景

功能多的管理后台

后端开发做几十个功能的管理系统时，用 Left 模式常驻左菜单，Header 里放 BreadcrumbBar 让用户看清当前位置。常用入口放 MenuItems，设置、帮助放 FooterMenuItems。

功能少的小工具

工具开发者做只有三五个页面的小软件，选 LeftCompact 模式收成图标栏，桌面空间占得少。需要完整菜单时点汉堡按钮展开，操作仍然一次点击。

频繁调整大小的监控面板

数据开发做监控面板且窗口大小常变时，把 PaneDisplayMode 绑定到属性，在 Window.SizeChanged 里切换。窗口收窄时切到 Top 横条模式，图表区域能拿到更多空间。

容易踩的坑

⚠️ 注意：点菜单项不切页。NavigationViewItem 漏写 TargetPageType，控件找不到要加载的页面。给每个导航项补上页面类型，导航立刻生效。

⚠️ 注意：切页后表单输入丢失。CacheHistory 默认是 0，页面不缓存、每次进都重建。给需要保留状态的导航项设 NavigationCacheMode="Enabled"，不必全局打开。

⚠️ 注意：开了缓存内存越占越多。缓存的页面常驻内存不会释放，全开等于把历史页面全留住。只给创建开销大的页面开缓存，数据频繁变化的页面保持关闭。

延伸学习与收尾

• docs/documentation/navigation-view.md：NavigationView 官方文档，含完整属性与事件列表
• samples/Wpf.Ui.Demo.Simple/：XAML 声明式最小示例
• samples/Wpf.Ui.Demo.Mvvm/：MVVM 绑定式完整示例

✅ 把 Wpf.Ui.Demo.Simple 跑起来再对照 MVVM 示例，是熟悉 NavigationView 最快的路径。

【免费下载链接】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