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/wpfuiWPF UI 提供 Fluent 风格的 NavigationView 控件一个标签就能搭出带侧边菜单、面包屑和搜索框的桌面导航本文从最小配置讲到 MVVM 接入带你完整跑通。核心能力速览可折叠导航面板NavigationView 提供汉堡菜单式导航面板支持左开、置顶、紧凑、最小四种显示模式。窗口变窄时收成图标栏不挤占内容区。面包屑与搜索框Header 区域可放 BreadcrumbBar自动同步导航历史AutoSuggestBox 嵌在面板顶部输入即出搜索建议。用户随时知道自己在哪也能直接搜到目标页。导航历史与页面缓存控件自动维护历史栈CanGoBack 为 true 时显示返回按钮。需要保留页面状态时开启缓存回到上一页时输入内容不丢。最小可运行配置下面这段 XAML 就是最精简的可用形态两个导航项就能跑起来ui:NavigationView x:NameRootNavigation ui:NavigationView.MenuItems ui:NavigationViewItem ContentHome Icon{ui:SymbolIcon Home24} TargetPageType{x:Type pages:DashboardPage} / ui:NavigationViewItem ContentData Icon{ui:SymbolIcon DataHistogram24} TargetPageType{x:Type pages:DataPage} / /ui:NavigationView.MenuItems /ui:NavigationView这段代码做了什么声明一个 NavigationView放两个导航项点哪一项就加载 TargetPageType 指定的页面图标和文字由 SymbolIcon 直接给出。两种接入方式对比方式 AXAML 声明式适合小工具菜单项直接写在 XAML跳转在代码后置里调 Navigate 一行搞定不用搭依赖注入。// 按类型跳转 RootNavigation.Navigate(typeof(SettingsPage)); // 有历史才能回退 if (RootNavigation.CanGoBack) { RootNavigation.GoBack(); }方式 BMVVM 绑定式适合中大型项目菜单项在 ViewModel 里构建XAML 只负责绑定增删页面不碰 UI 代码。NavigationItems [ new NavigationViewItem { Content Home, Icon new SymbolIcon { Symbol SymbolRegular.Home24 }, TargetPageType typeof(DashboardPage) } ];XAML 侧只需一行绑定ui:NavigationView MenuItemsSource{Binding NavigationItems} /维度方式 AXAML 声明式方式 BMVVM 绑定式菜单项位置写在 XAML在 ViewModel 构建跳转方式代码后置调 Navigate注入 INavigationService 跳转适合场景小工具、快速验证中型以上应用、动态增删菜单按需选场景功能多的管理后台后端开发做几十个功能的管理系统时用 Left 模式常驻左菜单Header 里放 BreadcrumbBar 让用户看清当前位置。常用入口放 MenuItems设置、帮助放 FooterMenuItems。功能少的小工具工具开发者做只有三五个页面的小软件选 LeftCompact 模式收成图标栏桌面空间占得少。需要完整菜单时点汉堡按钮展开操作仍然一次点击。频繁调整大小的监控面板数据开发做监控面板且窗口大小常变时把 PaneDisplayMode 绑定到属性在 Window.SizeChanged 里切换。窗口收窄时切到 Top 横条模式图表区域能拿到更多空间。容易踩的坑⚠️ 注意点菜单项不切页。NavigationViewItem 漏写 TargetPageType控件找不到要加载的页面。给每个导航项补上页面类型导航立刻生效。⚠️ 注意切页后表单输入丢失。CacheHistory 默认是 0页面不缓存、每次进都重建。给需要保留状态的导航项设 NavigationCacheModeEnabled不必全局打开。⚠️ 注意开了缓存内存越占越多。缓存的页面常驻内存不会释放全开等于把历史页面全留住。只给创建开销大的页面开缓存数据频繁变化的页面保持关闭。延伸学习与收尾docs/documentation/navigation-view.mdNavigationView 官方文档含完整属性与事件列表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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考