尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

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

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/wpfuiWPF UI 的 NavigationView 是一个顶层导航控件也是大多数 Fluent 风格 WPF 应用处理页面导航的核心侧边导航面板、内容区、返回导航甚至搜索框都内置在这一个控件里。如果你的 WPF 应用需要多页面导航了解这一个控件就足够了。从一个界面说起为什么不用现成组合传统 WPF 应用通常用 TabControl、Menu 加自定义左栏拼出导航页面切换逻辑、控件样式统一、返回按钮全都要自己写。问题不在于这些控件不能用而在于胶水代码量大功能一多就很难维护。NavigationView 给出的是一套现成结构Pane 是左侧或顶部的导航面板Header 是内容区顶部的标题区常放面包屑MenuItems 是主菜单项FooterMenuItems 是固定在底部的设置关于等辅助项。导航历史、返回按钮、页面缓存都由控件内部处理你只负责声明导航项并绑定页面。最小配置几行 XAML 跑通 WPF 侧边导航菜单ui:NavigationView xmlns:pagesclr-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 的实际效果侧边菜单、面包屑头部与内容区都由同一个控件提供。把导航项绑定到 ViewModelWPF MVVM 页面导航流程MVVM 应用里不建议在 XAML 中写死导航项而是在 ViewModel 中定义集合绑定到MenuItemsSource/FooterMenuItemsSource。页面和 ViewModel 注册进依赖注入容器services.AddSingletonINavigationService, NavigationService(); services.AddSingletonIPageService, PageService(); services.AddScopedDashboardPage(); services.AddScopedDashboardViewModel();MenuItems new ObservableCollectionobject { 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配合页面缓存反复切换时保留页面状态几个实践经验导航项按功能模块分组层级别压得太深页面创建成本高的用CacheHistory缓存会增加内存占用不适合展示频繁变化数据的页面权限拦截可以用Navigating事件取消导航例如限制设置页只对管理员开放。文档与示例都在哪里完整 API 与用法参考导航视图文档MVVM 示例依赖注入 NavigationView 搜索 面包屑的完整演示基础示例最小配置适合第一次上手资源定制示例通过资源字典调整主题与外观紧凑模板 与 Fluent 模板两个可直接作为新起点的工程模板如果是第一次接触 WPF 导航建议先把 MVVM 示例跑通理解依赖注入注册与MenuItemsSource绑定的写法再根据自己的应用形态调整面板模式这基本就是最常规的使用路径。【免费下载链接】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),仅供参考
返回列表