SuperAPI AI 工具集

syncfusion-wpf-navigation-drawer

前端与建站

查看项目

更新于 10-16 10:18

技能介绍

用途

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 有足够的颜色对比度。

限制

关于该控件的价格、授权方式、具体支持平台与版本要求,以及性能上限等信息,资料中暂未提供。