用途
Syncfusion WPF Navigation Drawer(SfNavigationDrawer)是一个侧边栏导航控件,用于在 WPF 应用中创建导航菜单。它以技能(skill)的形式提供,帮助开发者在项目中实现可折叠的侧边面板、汉堡菜单式抽屉导航以及层级化导航菜单。当需要在 WPF 中构建侧边导航、响应式抽屉导航、带图标的层级菜单、可滑动的侧面板或自定义导航视图时,可使用该技能。
主要能力
三种显示模式
- 默认(Default)模式:可折叠抽屉,允许开发者通过自定义视图定义完整的窗格内容。
- 紧凑(Compact)模式:仅显示图标的窄栏,切换时展开为全宽。
- 展开(Expanded)模式:常驻的全宽侧边栏。
支持基于窗口宽度自动切换显示模式,相关配置包括 AutoChangeDisplayMode、ExpandedModeThresholdWidth(默认 1007)、CompactModeWidth(默认 48)、ExpandedModeWidth(默认 320)。
定位与布局
- Position 属性支持 Left、Right、Top、Bottom 四种放置位置(默认模式)。
- DrawerWidth、DrawerHeight、DrawerBackground 可自定义抽屉尺寸与背景。
- 支持 DrawerHeaderView、DrawerContentView、DrawerFooterView 自定义页眉、内容与页脚区域。
- HeaderHeight、FooterHeight 控制页眉页脚高度。
导航项与数据绑定
- 内置 NavigationItem 类型,包含 Tab、Button、Header、Separator,并支持层级子项。
- 支持 ItemsSource 数据绑定、层级数据绑定,以及 DisplayMemberPath 和 IconMemberPath。
- 支持 IconTemplate、ItemTemplate、ItemTemplateSelector 自定义模板。
- IndentationWidth 控制子项缩进,子项支持弹出窗口(Popup)。
事件与命令
- Opening、Opened、Closing、Closed 事件(Opening/Closing 支持 Cancel)。
- ItemClicked(仅紧凑/展开模式)、ItemExpanded、ItemCollapsed 事件。
- 支持 Command 与 CommandParameter 绑定,文档包含 DelegateCommand 实现示例。
选择与键盘支持
- SelectedItem 属性可跟踪当前选中项,支持 NavigationItem 或自定义数据对象。
- SelectionBackground 可自定义选中背景。
- 内置键盘导航:Tab 键切换元素、上下方向键导航项、Enter 和 Space 选择项,并包含焦点管理。
动画与手势
- Transition 支持 SlideOnTop、Push、Reveal 过渡效果。
- AnimationDuration 控制打开/关闭动画时长。
- EnableSwipeGesture 启用滑动手势,TouchThreshold 控制滑动灵敏度(像素)。
使用方式
该技能以分主题参考文档的形式组织,按需查阅:
- 入门(getting-started.md):首次实现、控件设置、基本结构、安装与程序集部署、XAML 和 C# 基础用法、最小工作示例。
- 显示模式(display-modes.md):选择默认/紧凑/展开模式、实现响应式导航。
- 数据填充(populating-data.md):添加菜单项、绑定数据源、创建层级导航。
- 自定义视图(custom-views.md):自定义抽屉布局、定位、动画。
- 页眉页脚(header-and-footer.md):自定义切换按钮、页眉或页脚。
- 命令与事件(commands-and-events.md):处理抽屉状态变化、项点击、导航事件。
- 选择处理(handling-selection.md):管理选中项、跟踪导航状态。
- 键盘支持(keyboard-support.md):实现键盘导航与无障碍。
基本用法示例(XAML)通过 syncfusion:SfNavigationDrawer 容器添加 NavigationItem 项,并通过 SfNavigationDrawer.ContentView 设置主内容区域。
适用场景
- 邮件客户端导航(收件箱、已发送、草稿及嵌套分类)。
- 电商应用菜单(商品、购物车、订单及子分类)。
- 银行应用导航(账户、转账、支付)。
- 管理后台的多级导航。
- 桌面 WPF 应用中的移动风格导航。
- 响应式桌面应用在窄窗口下自动折叠为紧凑模式。
实现建议
- 默认模式适合移动风格浮层与自定义视图;紧凑模式适合可展开的图标侧边栏;展开模式适合常驻全宽侧边栏。
- 标准导航菜单可使用 NavigationItem(紧凑/展开模式),独特布局可使用自定义视图(默认模式)。
- 大数据集使用 ItemsSource 数据绑定,异构项使用 ItemTemplateSelector,层级建议保持在 2 至 3 层以内。
- 使用 Opening/Closing 事件取消状态变更,存储 SelectedItem 以恢复导航状态,处理 ItemClicked 进行页面导航。
- 为屏幕阅读器提供有意义的 Header 文本,并确保 SelectionBackground 有足够的颜色对比度。
限制
关于该控件的价格、授权方式、具体支持平台与版本要求,以及性能上限等信息,资料中暂未提供。