Back to Details

syncfusion-wpf-navigation-drawer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Navigation Drawer

实现Syncfusion WPF Navigation Drawer控件

The WPF Navigation Drawer control is a sidebar navigation component used to create intuitive and efficient navigation menus within applications. It supports compact and expanded display modes, allowing users to switch between them dynamically based on the available screen size. Additionally, the control offers a default mode that enables developers to define a fully custom pane view, providing greater flexibility in designing navigation experiences
WPF Navigation Drawer控件是一个侧边栏导航组件，用于在应用内创建直观高效的导航菜单。它支持紧凑和展开两种显示模式，允许用户根据可用屏幕尺寸动态切换。此外，该控件还提供默认模式，开发者可以在该模式下定义完全自定义的面板视图，为设计导航体验提供了更大的灵活性

When to Use This Skill

何时使用此技能

Use this skill when user need to:
  • Create sidebar navigation menus in WPF applications
  • Implement collapsible drawer navigation with hamburger menu
  • Build responsive navigation with compact and expanded modes
  • Add hierarchical navigation menu items with icons
  • Implement swipeable side panels
  • Create custom navigation views with headers and footers
  • Handle navigation events and selection
  • Support keyboard navigation in drawer menus
  • Build modern UI navigation patterns in WPF
在以下场景中使用此技能：
  • 在WPF应用中创建侧边栏导航菜单
  • 实现带汉堡菜单的可折叠抽屉导航
  • 构建带有紧凑和展开模式的响应式导航
  • 添加带图标的层级导航菜单项
  • 实现可滑动的侧边面板
  • 创建带页眉和页脚的自定义导航视图
  • 处理导航事件和选择操作
  • 在抽屉菜单中支持键盘导航
  • 在WPF中构建现代UI导航模式

Component Overview

组件概述

The Syncfusion WPF Navigation Drawer (SfNavigationDrawer) is a sidebar navigation control that provides:
  • Three Display Modes: Default (collapsible), Compact (icon-only), Expanded (full width)
  • Flexible Positioning: Left, Right, Top, or Bottom placement
  • Built-in Navigation Items: Tab, Button, Header, Separator types with hierarchical support
  • Custom Views: Fully customizable header, content, and footer sections
  • Data Binding: Support for ItemsSource with hierarchical data binding
  • Rich Events: Opening, Opened, Closing, Closed, ItemClicked, ItemExpanded, ItemCollapsed
  • Keyboard Support: Full keyboard navigation (Tab, Arrow keys, Enter, Space)
  • Smooth Animations: SlideOnTop, Push, and Reveal transition effects
  • Responsive Design: Auto-switching between display modes based on available width
Use Cases:
  • Email client navigation (Inbox, Sent, Drafts with nested categories)
  • E-commerce app menus (Products, Cart, Orders with subcategories)
  • Banking app navigation (Accounts, Transfers, Payments)
  • Admin dashboards with multi-level navigation
  • Mobile-style navigation in desktop WPF apps
Syncfusion WPF Navigation Drawer (SfNavigationDrawer) 是一个侧边栏导航控件，提供以下功能：
  • 三种显示模式： 默认（可折叠）、紧凑（仅图标）、展开（全宽）
  • 灵活定位： 左、右、上、下四种放置位置
  • 内置导航项： 选项卡、按钮、页眉、分隔符类型，支持层级结构
  • 自定义视图： 完全可自定义的页眉、内容和页脚区域
  • 数据绑定： 支持ItemsSource及层级数据绑定
  • 丰富的事件： Opening、Opened、Closing、Closed、ItemClicked、ItemExpanded、ItemCollapsed
  • 键盘支持： 完整的键盘导航（Tab、方向键、Enter、Space）
  • 流畅动画： SlideOnTop、Push和Reveal过渡效果
  • 响应式设计： 根据可用宽度自动切换显示模式
使用场景：
  • 邮件客户端导航（收件箱、已发送、草稿及嵌套分类）
  • 电商应用菜单（商品、购物车、订单及子分类）
  • 银行应用导航（账户、转账、支付）
  • 带多级导航的管理仪表盘
  • 桌面WPF应用中的移动端风格导航

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md Use when: First-time implementation, setting up the control, understanding basic structure
  • Installation and assembly deployment
  • Creating basic NavigationDrawer in XAML and C#
  • Adding content view and sidebar menu items
  • Setting up navigation items with icons
  • Minimal working example
📄 阅读： references/getting-started.md 适用场景： 首次实现、控件设置、理解基本结构
  • 安装与程序集部署
  • 在XAML和C#中创建基础NavigationDrawer
  • 添加内容视图和侧边栏菜单项
  • 设置带图标的导航项
  • 最简运行示例

Display Modes

显示模式

📄 Read: references/display-modes.md Use when: Choosing between Default, Compact, or Expanded modes, implementing responsive navigation
  • Default mode (collapsible drawer with custom views)
  • Compact mode (narrow icon bar that expands on toggle)
  • Expanded mode (full-width sidebar)
  • Auto display mode switching based on window width
  • CompactModeWidth and ExpandedModeWidth configuration
  • ExpandedModeThresholdWidth for responsive behavior
📄 阅读： references/display-modes.md 适用场景： 选择默认、紧凑或展开模式，实现响应式导航
  • 默认模式（带自定义视图的可折叠抽屉）
  • 紧凑模式（仅图标窄侧边栏，切换时展开）
  • 展开模式（全宽侧边栏）
  • 根据窗口宽度自动切换显示模式
  • 配置CompactModeWidth和ExpandedModeWidth
  • 用于响应式行为的ExpandedModeThresholdWidth

Populating Data

数据填充

📄 Read: references/populating-data.md Use when: Adding menu items, binding data sources, creating hierarchical navigation
  • Built-in NavigationItem properties (Header, Icon, Items)
  • ItemsSource data binding
  • Hierarchical data binding with nested items
  • IconTemplate and ItemTemplate customization
  • Different item types: Tab, Button, Header, Separator
  • DisplayMemberPath and IconMemberPath
  • IndentationWidth for sub-items
  • Popup support for sub-items
📄 阅读： references/populating-data.md 适用场景： 添加菜单项、绑定数据源、创建层级导航
  • 内置NavigationItem属性（Header、Icon、Items）
  • ItemsSource数据绑定
  • 层级数据绑定与嵌套项
  • IconTemplate和ItemTemplate自定义
  • 不同项类型：选项卡、按钮、页眉、分隔符
  • DisplayMemberPath和IconMemberPath
  • 子项的IndentationWidth
  • 子项的弹出窗口支持

Custom Views and Customization

自定义视图与定制

📄 Read: references/custom-views.md Use when: Creating custom drawer layouts, positioning drawer, adding animations
  • DrawerHeaderView, DrawerContentView, DrawerFooterView
  • DrawerWidth and DrawerHeight customization
  • Position property (Left, Right, Top, Bottom)
  • Swipe gestures and TouchThreshold
  • Transition animations (SlideOnTop, Push, Reveal)
  • AnimationDuration configuration
  • DrawerBackground customization
  • IsOpen property for programmatic control
  • ToggleDrawer() method
📄 阅读： references/custom-views.md 适用场景： 创建自定义抽屉布局、设置抽屉位置、添加动画
  • DrawerHeaderView、DrawerContentView、DrawerFooterView
  • DrawerWidth和DrawerHeight定制
  • Position属性（左、右、上、下）
  • 滑动手势与TouchThreshold
  • 过渡动画（SlideOnTop、Push、Reveal）
  • AnimationDuration配置
  • DrawerBackground定制
  • 用于程序化控制的IsOpen属性
  • ToggleDrawer()方法

Header and Footer Customization

页眉与页脚定制

📄 Read: references/header-and-footer.md Use when: Customizing toggle button, header, or footer sections
  • ToggleButtonContentTemplate and ToggleButtonIconTemplate
  • IsToggleButtonVisible property
  • FooterItems collection
  • HeaderHeight and FooterHeight properties
  • Custom header and footer views in Default mode
📄 阅读： references/header-and-footer.md 适用场景： 定制切换按钮、页眉或页脚区域
  • ToggleButtonContentTemplate和ToggleButtonIconTemplate
  • IsToggleButtonVisible属性
  • FooterItems集合
  • HeaderHeight和FooterHeight属性
  • 默认模式下的自定义页眉和页脚视图

Commands and Events

命令与事件

📄 Read: references/commands-and-events.md Use when: Handling drawer state changes, item clicks, navigation events
  • Opening and Opened events (with Cancel support)
  • Closing and Closed events (with Cancel support)
  • ItemClicked event (Compact/Expanded modes only)
  • ItemExpanded and ItemCollapsed events
  • Command binding with Command and CommandParameter
  • DelegateCommand implementation example
📄 阅读： references/commands-and-events.md 适用场景： 处理抽屉状态变化、项点击、导航事件
  • Opening和Opened事件（支持取消）
  • Closing和Closed事件（支持取消）
  • ItemClicked事件（仅紧凑/展开模式）
  • ItemExpanded和ItemCollapsed事件
  • 命令绑定（Command和CommandParameter）
  • DelegateCommand实现示例

Selection Handling

选择处理

📄 Read: references/handling-selection.md Use when: Managing selected items, tracking navigation state
  • SelectedItem property usage
  • Selection with NavigationItem
  • Selection with custom data objects
  • SelectionBackground customization
📄 阅读： references/handling-selection.md 适用场景： 管理选中项、跟踪导航状态
  • SelectedItem属性用法
  • 与NavigationItem配合的选择功能
  • 与自定义数据对象配合的选择功能
  • SelectionBackground定制

Keyboard Support

键盘支持

📄 Read: references/keyboard-support.md Use when: Implementing keyboard navigation, ensuring accessibility
  • Tab key navigation between elements
  • Up/Down arrow keys for item navigation
  • Enter and Space for item selection
  • Focus management
📄 阅读： references/keyboard-support.md 适用场景： 实现键盘导航、确保可访问性
  • 元素间的Tab键导航
  • 方向键上下导航项
  • Enter和Space键选择项
  • 焦点管理

Quick Start Example

快速入门示例

Basic Navigation Drawer with Items

带项的基础导航抽屉

xaml
<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:SfNavigationDrawer x:Name="navigationDrawer" 
                                   DisplayMode="Expanded">
        <!-- Navigation Items -->
        <syncfusion:NavigationItem Header="Inbox" IsSelected="True">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M32.032381,16.445429 L25.410999..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <syncfusion:NavigationItem Header="Sent mail">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M42.128046,6.7269681..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <syncfusion:NavigationItem Header="Drafts">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M6.9999996,48.353..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <!-- Main Content -->
        <syncfusion:SfNavigationDrawer.ContentView>
            <Grid>
                <Label Content="Content View" 
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
            </Grid>
        </syncfusion:SfNavigationDrawer.ContentView>
    </syncfusion:SfNavigationDrawer>
</Window>
xaml
<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:SfNavigationDrawer x:Name="navigationDrawer" 
                                   DisplayMode="Expanded">
        <!-- Navigation Items -->
        <syncfusion:NavigationItem Header="Inbox" IsSelected="True">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M32.032381,16.445429 L25.410999..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <syncfusion:NavigationItem Header="Sent mail">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M42.128046,6.7269681..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <syncfusion:NavigationItem Header="Drafts">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M6.9999996,48.353..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <!-- Main Content -->
        <syncfusion:SfNavigationDrawer.ContentView>
            <Grid>
                <Label Content="Content View" 
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
            </Grid>
        </syncfusion:SfNavigationDrawer.ContentView>
    </syncfusion:SfNavigationDrawer>
</Window>

Code-behind (C#)

代码后置（C#）

csharp
using Syncfusion.UI.Xaml.NavigationDrawer;

// Create navigation drawer
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
navigationDrawer.DisplayMode = DisplayMode.Expanded;

// Add items
navigationDrawer.Items.Add(new NavigationItem()
{
    Header = "Inbox",
    Icon = new Path() { Data = Geometry.Parse("M32.032381...") },
    IsSelected = true
});

navigationDrawer.Items.Add(new NavigationItem()
{
    Header = "Sent mail",
    Icon = new Path() { Data = Geometry.Parse("M42.128046...") }
});

// Set content
Label label = new Label { Content = "Content View" };
navigationDrawer.ContentView = label;
csharp
using Syncfusion.UI.Xaml.NavigationDrawer;

// Create navigation drawer
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
navigationDrawer.DisplayMode = DisplayMode.Expanded;

// Add items
navigationDrawer.Items.Add(new NavigationItem()
{
    Header = "Inbox",
    Icon = new Path() { Data = Geometry.Parse("M32.032381...") },
    IsSelected = true
});

navigationDrawer.Items.Add(new NavigationItem()
{
    Header = "Sent mail",
    Icon = new Path() { Data = Geometry.Parse("M42.128046...") }
});

// Set content
Label label = new Label { Content = "Content View" };
navigationDrawer.ContentView = label;

Common Patterns

常见模式

Pattern 1: Responsive Navigation (Auto Mode Switching)

模式1：响应式导航（自动模式切换）

xaml
<syncfusion:SfNavigationDrawer DisplayMode="Expanded"
                               AutoChangeDisplayMode="True"
                               ExpandedModeThresholdWidth="700">
    <!-- Items -->
</syncfusion:SfNavigationDrawer>
When to use: Desktop apps that need to adapt to window resizing
xaml
<syncfusion:SfNavigationDrawer DisplayMode="Expanded"
                               AutoChangeDisplayMode="True"
                               ExpandedModeThresholdWidth="700">
    <!-- Items -->
</syncfusion:SfNavigationDrawer>
适用场景： 需要适应窗口大小调整的桌面应用

Pattern 2: Hierarchical Navigation with Sub-items

模式2：带子项的层级导航

xaml
<syncfusion:NavigationItem Header="Inbox" IsExpanded="True">
    <syncfusion:NavigationItem.Icon>
        <Path Data="..." Fill="White"/>
    </syncfusion:NavigationItem.Icon>
    <!-- Sub-items -->
    <syncfusion:NavigationItem Header="Primary">
        <syncfusion:NavigationItem.Icon>
            <Path Data="..." Fill="White"/>
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Social">
        <syncfusion:NavigationItem.Icon>
            <Path Data="..." Fill="White"/>
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
</syncfusion:NavigationItem>
When to use: Multi-level navigation menus (e.g., email categories, product categories)
xaml
<syncfusion:NavigationItem Header="Inbox" IsExpanded="True">
    <syncfusion:NavigationItem.Icon>
        <Path Data="..." Fill="White"/>
    </syncfusion:NavigationItem.Icon>
    <!-- Sub-items -->
    <syncfusion:NavigationItem Header="Primary">
        <syncfusion:NavigationItem.Icon>
            <Path Data="..." Fill="White"/>
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Social">
        <syncfusion:NavigationItem.Icon>
            <Path Data="..." Fill="White"/>
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
</syncfusion:NavigationItem>
适用场景： 多级导航菜单（如邮件分类、商品分类）

Pattern 3: Custom Drawer with Header and Footer

模式3：带页眉和页脚的自定义抽屉

xaml
<syncfusion:SfNavigationDrawer DisplayMode="Default" DrawerWidth="300">
    <syncfusion:SfNavigationDrawer.DrawerHeaderView>
        <Grid Background="#31ade9">
            <Label Content="User Profile" />
        </Grid>
    </syncfusion:SfNavigationDrawer.DrawerHeaderView>
    
    <syncfusion:SfNavigationDrawer.DrawerContentView>
        <ListBox ItemsSource="{Binding MenuItems}"/>
    </syncfusion:SfNavigationDrawer.DrawerContentView>
    
    <syncfusion:SfNavigationDrawer.DrawerFooterView>
        <Button Content="Logout" />
    </syncfusion:SfNavigationDrawer.DrawerFooterView>
    
    <syncfusion:SfNavigationDrawer.ContentView>
        <Grid><!-- Main content --></Grid>
    </syncfusion:SfNavigationDrawer.ContentView>
</syncfusion:SfNavigationDrawer>
When to use: Apps needing custom drawer layouts beyond built-in items
xaml
<syncfusion:SfNavigationDrawer DisplayMode="Default" DrawerWidth="300">
    <syncfusion:SfNavigationDrawer.DrawerHeaderView>
        <Grid Background="#31ade9">
            <Label Content="User Profile" />
        </Grid>
    </syncfusion:SfNavigationDrawer.DrawerHeaderView>
    
    <syncfusion:SfNavigationDrawer.DrawerContentView>
        <ListBox ItemsSource="{Binding MenuItems}"/>
    </syncfusion:SfNavigationDrawer.DrawerContentView>
    
    <syncfusion:SfNavigationDrawer.DrawerFooterView>
        <Button Content="Logout" />
    </syncfusion:SfNavigationDrawer.DrawerFooterView>
    
    <syncfusion:SfNavigationDrawer.ContentView>
        <Grid><!-- Main content --></Grid>
    </syncfusion:SfNavigationDrawer.ContentView>
</syncfusion:SfNavigationDrawer>
适用场景： 需要内置项之外自定义抽屉布局的应用

Pattern 4: Data Binding with ItemsSource

模式4：ItemsSource数据绑定

xaml
<syncfusion:SfNavigationDrawer DisplayMode="Compact"
                               ItemsSource="{Binding NavigationItems}"
                               DisplayMemberPath="Title"
                               IconMemberPath="Icon">
</syncfusion:SfNavigationDrawer>
When to use: Dynamic navigation menus from database or API
xaml
<syncfusion:SfNavigationDrawer DisplayMode="Compact"
                               ItemsSource="{Binding NavigationItems}"
                               DisplayMemberPath="Title"
                               IconMemberPath="Icon">
</syncfusion:SfNavigationDrawer>
适用场景： 来自数据库或API的动态导航菜单

Key Properties

关键属性

Essential Properties

核心属性

PropertyTypeDescription
DisplayMode
DisplayModeDefault, Compact, or Expanded
Items
NavigationItemsCollectionCollection of NavigationItem objects
ContentView
objectMain content area
IsOpen
boolGets/sets drawer open state
SelectedItem
objectCurrently selected navigation item
Position
PositionLeft, Right, Top, Bottom (Default mode)
属性类型描述
DisplayMode
DisplayMode默认、紧凑、展开
Items
NavigationItemsCollectionNavigationItem对象集合
ContentView
object主内容区域
IsOpen
bool获取/设置抽屉打开状态
SelectedItem
object当前选中的导航项
Position
Position左、右、上、下（默认模式）

Display Mode Properties

显示模式属性

PropertyTypeDefaultDescription
AutoChangeDisplayMode
boolfalseAuto-switch modes based on width
ExpandedModeThresholdWidth
double1007Width threshold for auto mode switching
CompactModeWidth
double48Width in compact mode
ExpandedModeWidth
double320Width in expanded mode
属性类型默认值描述
AutoChangeDisplayMode
boolfalse根据宽度自动切换模式
ExpandedModeThresholdWidth
double1007自动模式切换的宽度阈值
CompactModeWidth
double48紧凑模式下的宽度
ExpandedModeWidth
double320展开模式下的宽度

Customization Properties

自定义属性

PropertyTypeDescription
DrawerWidth
doubleDrawer width (Default mode, Left/Right)
DrawerHeight
doubleDrawer height (Default mode, Top/Bottom)
DrawerBackground
BrushBackground color of drawer
HeaderHeight
doubleHeight of header section
FooterHeight
doubleHeight of footer section
IndentationWidth
doubleHorizontal spacing for sub-items
属性类型描述
DrawerWidth
double抽屉宽度（默认模式，左/右位置）
DrawerHeight
double抽屉高度（默认模式，上/下位置）
DrawerBackground
Brush抽屉背景色
HeaderHeight
double页眉区域高度
FooterHeight
double页脚区域高度
IndentationWidth
double子项的水平间距

Animation Properties

动画属性

PropertyTypeOptions
Transition
TransitionSlideOnTop, Push, Reveal
AnimationDuration
TimeSpanDuration of open/close animation
EnableSwipeGesture
boolEnable swipe to open/close
TouchThreshold
doubleSwipe sensitivity (pixels)
属性类型选项
Transition
TransitionSlideOnTop、Push、Reveal
AnimationDuration
TimeSpan打开/关闭动画时长
EnableSwipeGesture
bool启用滑动打开/关闭
TouchThreshold
double滑动灵敏度（像素）

Template Properties

模板属性

PropertyTypeDescription
ToggleButtonContentTemplate
DataTemplateCustomize toggle button content
ToggleButtonIconTemplate
DataTemplateCustomize toggle button icon
ItemTemplate
DataTemplateTemplate for navigation items
ItemTemplateSelector
DataTemplateSelectorDynamic template selection
属性类型描述
ToggleButtonContentTemplate
DataTemplate自定义切换按钮内容
ToggleButtonIconTemplate
DataTemplate自定义切换按钮图标
ItemTemplate
DataTemplate导航项模板
ItemTemplateSelector
DataTemplateSelector动态模板选择

Common Use Cases

常见使用场景

Use Case 1: Email Client Navigation

场景1：邮件客户端导航

Scenario: Multi-level inbox with Primary, Social, Promotions Solution: Use hierarchical NavigationItem with IsExpanded, Compact/Expanded modes Reference: references/populating-data.md
场景描述： 带主要、社交、推广的多级收件箱 解决方案： 使用带IsExpanded的层级NavigationItem，紧凑/展开模式 参考： references/populating-data.md

Use Case 2: Admin Dashboard

场景2：管理仪表盘

Scenario: Top-level menu (Dashboard, Users, Settings) with sub-sections Solution: Data binding with ItemsSource, hierarchical data structure Reference: references/populating-data.md
场景描述： 顶级菜单（仪表盘、用户、设置）及子区域 解决方案： 用ItemsSource数据绑定，层级数据结构 参考： references/populating-data.md

Use Case 3: Mobile-Style App

场景3：移动端风格应用

Scenario: Hamburger menu that slides over content Solution: Default mode with DrawerHeaderView, swipe gestures enabled Reference: references/custom-views.md
场景描述： 滑过内容的汉堡菜单 解决方案： 启用滑动手势的默认模式，搭配DrawerHeaderView 参考： references/custom-views.md

Use Case 4: Responsive Desktop App

场景4：响应式桌面应用

Scenario: Auto-collapse to compact mode on narrow windows Solution: Expanded mode with AutoChangeDisplayMode=true Reference: references/display-modes.md
场景描述： 窄窗口时自动折叠为紧凑模式 解决方案： 展开模式搭配AutoChangeDisplayMode=true 参考： references/display-modes.md

Use Case 5: Banking App

场景5：银行应用

Scenario: Accounts, Transfers, Payments with event handling Solution: ItemClicked event, Command binding for navigation Reference: references/commands-and-events.md
场景描述： 账户、转账、支付及事件处理 解决方案： ItemClicked事件，导航命令绑定 参考： references/commands-and-events.md

Implementation Tips

实现技巧

  1. Choose the Right Display Mode:
    • Use Default for mobile-style overlays with custom views
    • Use Compact for icon-only sidebar that expands to full width
    • Use Expanded for always-visible full sidebar
  2. Use Built-in Items vs Custom Views:
    • Use NavigationItem (Compact/Expanded) for standard navigation menus
    • Use Custom Views (Default mode) for unique layouts
  3. Optimize Performance:
    • Use data binding with ItemsSource for large datasets
    • Implement ItemTemplateSelector for heterogeneous items
    • Keep hierarchies shallow (2-3 levels max)
  4. Handle State Properly:
    • Use Opening/Closing events to cancel state changes
    • Store SelectedItem for navigation state restoration
    • Handle ItemClicked for page navigation
  5. Ensure Accessibility:
    • Implement keyboard navigation (already built-in)
    • Provide meaningful Header text for screen readers
    • Use sufficient color contrast for SelectionBackground
  1. 选择合适的显示模式：
    • 如需带自定义视图的移动端风格覆盖层，使用默认模式
    • 如需仅图标侧边栏（切换时展开为全宽），使用紧凑模式
    • 如需始终可见的全宽侧边栏，使用展开模式
  2. 内置项与自定义视图的选择：
    • 标准导航菜单使用NavigationItem（紧凑/展开模式）
    • 独特布局使用自定义视图（默认模式）
  3. 性能优化：
    • 大数据集使用ItemsSource数据绑定
    • 异构项实现ItemTemplateSelector
    • 层级结构保持浅层次（最多2-3级）
  4. 状态正确处理：
    • 使用Opening/Closing事件取消状态变更
    • 存储SelectedItem以恢复导航状态
    • 处理ItemClicked实现页面导航
  5. 确保可访问性：
    • 实现键盘导航（已内置）
    • 为屏幕阅读器提供有意义的Header文本
    • SelectionBackground使用足够的颜色对比度