syncfusion-wpf-navigation-pane

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF GroupBar (Navigation Pane)

实现WPF GroupBar（导航窗格）

The

GroupBar

control implements a navigation pane similar to the Microsoft Outlook Bar. It hosts categorized collections of items and custom controls in expandable/collapsible sections. Supports multiple visual modes, data binding, drag-and-drop reordering, context menus, toolbars, and full theme support.

Assemblies:

Syncfusion.Tools.WPF

Syncfusion.Shared.WPF

Namespace:

Syncfusion.Windows.Tools.Controls

XAML Schema:

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

GroupBar

控件实现了类似Microsoft Outlook栏的导航窗格。它在可展开/折叠的区域中托管分类的项集合和自定义控件。支持多种视觉模式、数据绑定、拖放重排序、上下文菜单、工具栏以及完整的主题支持。

程序集：

Syncfusion.Tools.WPF

Syncfusion.Shared.WPF

命名空间：

Syncfusion.Windows.Tools.Controls

XAML架构：

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

Control Hierarchy

控件层级结构

GroupBar                    ← Root navigation container
└── GroupBarItem            ← Category tab/header (e.g., "Mailbox", "Contacts")
    ├── GroupView           ← List container for link-style items
    │   └── GroupViewItem   ← Clickable item with text and icon
    └── Panel / any UIElement ← Or use any WPF panel as content

GroupBar                    ← 根导航容器
└── GroupBarItem            ← 分类选项卡/标题（例如“邮箱”、“联系人”）
    ├── GroupView           ← 链接样式项的列表容器
    │   └── GroupViewItem   ← 带文本和图标的可点击项
    └── Panel / any UIElement ← 或使用任意WPF面板作为内容

When to Use This Skill

何时使用此控件

User wants an Outlook-style navigation sidebar or accordion panel
User needs expandable/collapsible sections with content inside

User asks about

GroupBar

GroupBarItem

GroupView

GroupViewItem

User needs StackMode (Outlook bar), MultipleExpansion (tree-view), or Default mode
User needs data-bound navigation items using MVVM
User asks about drag-and-drop reordering of navigation items
User asks about Navigation Pane popup, gripper, or resize behavior

用户需要Outlook风格的导航侧边栏或手风琴面板
用户需要带内部内容的可展开/折叠区域

用户询问

GroupBar

、

GroupBarItem

、

GroupView

、

GroupViewItem

Quick Start

快速入门

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:GroupBar Height="300" Width="230" VisualMode="StackMode" Name="groupBar">
    <syncfusion:GroupBarItem Header="Mailbox" HeaderImageSource="Images/mail.png">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="Inbox"     ImageSource="Images/inbox.png"/>
            <syncfusion:GroupViewItem Text="Sent Items" ImageSource="Images/sent.png"/>
            <syncfusion:GroupViewItem Text="Deleted"   ImageSource="Images/trash.png"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
    <syncfusion:GroupBarItem Header="Contacts">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="All Contacts"/>
            <syncfusion:GroupViewItem Text="Favorites"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
</syncfusion:GroupBar>

csharp

using Syncfusion.Windows.Tools.Controls;

GroupBar groupBar = new GroupBar();
groupBar.VisualMode = VisualMode.StackMode;

GroupBarItem item = new GroupBarItem { Header = "Mailbox" };
GroupView view = new GroupView();
view.Items.Add(new GroupViewItem { Text = "Inbox" });
item.Content = view;
groupBar.Items.Add(item);
this.Content = groupBar;

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:GroupBar Height="300" Width="230" VisualMode="StackMode" Name="groupBar">
    <syncfusion:GroupBarItem Header="Mailbox" HeaderImageSource="Images/mail.png">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="Inbox"     ImageSource="Images/inbox.png"/>
            <syncfusion:GroupViewItem Text="Sent Items" ImageSource="Images/sent.png"/>
            <syncfusion:GroupViewItem Text="Deleted"   ImageSource="Images/trash.png"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
    <syncfusion:GroupBarItem Header="Contacts">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="All Contacts"/>
            <syncfusion:GroupViewItem Text="Favorites"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
</syncfusion:GroupBar>

csharp

using Syncfusion.Windows.Tools.Controls;

GroupBar groupBar = new GroupBar();
groupBar.VisualMode = VisualMode.StackMode;

GroupBarItem item = new GroupBarItem { Header = "Mailbox" };
GroupView view = new GroupView();
view.Items.Add(new GroupViewItem { Text = "Inbox" });
item.Content = view;
groupBar.Items.Add(item);
this.Content = groupBar;

Common Patterns

常见模式

Goal	Approach
Outlook-style navigation	`VisualMode="StackMode"`
Tree-style multi-expand	`VisualMode="MultipleExpansion"`
One-at-a-time expand	`VisualMode="Default"`
Collapsible bar	`AllowCollapse="True"` + `VisualMode="StackMode"`
Data-bound items	`ItemsSource` + `ItemContainerStyle` with `HeaderText` / `Content` setters
Custom item content	Place any `Panel` or `UIElement` as `GroupBarItem.Content`
List-view style items	`GroupView` with `IsListViewMode="True"`
Drag-reorder items	`DragItemVisibility="True"`
Resize navigation popup	`PopupResizeDirection="Both"`
Gripper for StackMode	`ShowGripper="True"` + `VisualMode="StackMode"`
Save/restore bar state	`SaveBarState()` / `LoadBarState()` / `ResetBarState()`

目标	实现方式
Outlook风格导航	`VisualMode="StackMode"`
树状多展开模式	`VisualMode="MultipleExpansion"`
单次展开模式	`VisualMode="Default"`
可折叠栏	`AllowCollapse="True"` + `VisualMode="StackMode"`
数据绑定项	`ItemsSource` + `ItemContainerStyle` ，设置 `HeaderText` / `Content` 属性
自定义项内容	将任意 `Panel` 或 `UIElement` 设为 `GroupBarItem.Content`
列表视图风格项	`GroupView` 设置 `IsListViewMode="True"`
拖放重排序项	`DragItemVisibility="True"`
调整导航弹出窗口大小	`PopupResizeDirection="Both"`
堆栈模式抓手	`ShowGripper="True"` + `VisualMode="StackMode"`
保存/恢复栏状态	`SaveBarState()` / `LoadBarState()` / `ResetBarState()`

Key Properties

关键属性

Property	Type	Description
`VisualMode`	`VisualMode`	Default / MultipleExpansion / StackMode
`AllowCollapse`	`bool`	Allow collapsing (StackMode)
`ShowGripper`	`bool`	Show resize gripper (StackMode)
`ItemsSource`	`IEnumerable`	Data-bound items
`ItemContainerStyle`	`Style`	Style applied to each `GroupBarItem`
`DragItemVisibility`	`bool`	Enable drag-and-drop reordering
`DragMarkerBrush`	`Brush`	Color of drag insertion marker
`PopupResizeDirection`	`PopupResizeDirection`	Navigation pane popup resize (Both/H/V/None)
`ItemContentLength`	`double`	Height/width of selected item content area
`GroupBarHeaderStyle`	`Style`	Style for GroupBar header border
`GroupBarItem.Header`	`string`	Display text for item header
`GroupBarItem.HeaderImageSource`	`ImageSource`	Icon in item header
`GroupBarItem.IsSelected`	`bool`	Expand this item initially
`GroupBarItem.GroupBarItemCornerRadius`	`CornerRadius`	Rounded corners on item header
`GroupView.IsListViewMode`	`bool`	List-view style (vs icon style)
`GroupViewItem.Text`	`string`	Text label for view item
`GroupViewItem.ImageSource`	`ImageSource`	Icon for view item
`SaveOriginalState`	`bool`	Auto-save state on load

属性	类型	描述
`VisualMode`	`VisualMode`	默认/多展开/堆栈模式
`AllowCollapse`	`bool`	允许折叠（堆栈模式）
`ShowGripper`	`bool`	显示调整大小抓手（堆栈模式）
`ItemsSource`	`IEnumerable`	数据绑定项
`ItemContainerStyle`	`Style`	应用于每个 `GroupBarItem` 的样式
`DragItemVisibility`	`bool`	启用拖放重排序
`DragMarkerBrush`	`Brush`	拖放插入标记的颜色
`PopupResizeDirection`	`PopupResizeDirection`	导航窗格弹出窗口调整方向（双向/水平/垂直/无）
`ItemContentLength`	`double`	选中项内容区域的高度/宽度
`GroupBarHeaderStyle`	`Style`	GroupBar标题边框的样式
`GroupBarItem.Header`	`string`	项标题的显示文本
`GroupBarItem.HeaderImageSource`	`ImageSource`	项标题中的图标
`GroupBarItem.IsSelected`	`bool`	初始展开此项
`GroupBarItem.GroupBarItemCornerRadius`	`CornerRadius`	项标题的圆角半径
`GroupView.IsListViewMode`	`bool`	列表视图风格（对比图标风格）
`GroupViewItem.Text`	`string`	视图项的文本标签
`GroupViewItem.ImageSource`	`ImageSource`	视图项的图标
`SaveOriginalState`	`bool`	加载时自动保存状态

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Assembly references (Tools.WPF + Shared.WPF)
Add via designer, XAML, or C#
Declarative GroupBarItems with GroupView content
Adding panel content to GroupBarItem
Basic VisualMode overview
Themes with SfSkinManager

📄 阅读： references/getting-started.md

程序集引用（Tools.WPF + Shared.WPF）
通过设计器、XAML或C#添加控件
使用GroupView内容声明式创建GroupBarItem
为GroupBarItem添加面板内容
视觉模式基础概述
使用SfSkinManager设置主题

GroupBar Items

GroupBar项

📄 Read: references/groupbar-items.md

GroupBarItem properties (Header, HeaderText, HeaderImageSource)
IsSelected, ShowInGroupBar, GroupBarItemCornerRadius
GroupBarItemCursorType (Default/Hand)
ItemContentLength (content area height/width)
DraggingItemInProgress, HiddenItemsCount
GroupBarItemAdded / GroupBarItemRemoved events

📄 阅读： references/groupbar-items.md

GroupBarItem属性（Header、HeaderText、HeaderImageSource）
IsSelected、ShowInGroupBar、GroupBarItemCornerRadius
GroupBarItemCursorType（默认/手型）
ItemContentLength（内容区域高度/宽度）
DraggingItemInProgress、HiddenItemsCount
GroupBarItemAdded / GroupBarItemRemoved事件

GroupView and Content

GroupView与内容

📄 Read: references/groupview-and-content.md

GroupView as item container with GroupViewItem elements
GroupViewItem (Text, ImageSource, tooltip)
IsListViewMode (list vs icon display)
Default image for GroupViewItem
Adding panels and custom UIElements as content
Rotating item content

📄 阅读： references/groupview-and-content.md

GroupView作为GroupViewItem元素的项容器
GroupViewItem（文本、ImageSource、工具提示）
IsListViewMode（列表对比图标显示）
GroupViewItem的默认图标
添加面板和自定义UIElement作为内容
旋转项内容

Visual Modes

视觉模式

📄 Read: references/visual-modes.md

Default mode (one item expanded at a time)
MultipleExpansion mode (tree-view style)
StackMode (Outlook bar style, popup menu at bottom)
AllowCollapse, ShowGripper
ThemeStudio vs classic theme layout difference in StackMode

📄 阅读： references/visual-modes.md

默认模式（一次展开一个项）
多展开模式（树视图风格）
堆栈模式（Outlook栏风格，底部弹出菜单）
AllowCollapse、ShowGripper
堆栈模式下ThemeStudio与经典主题布局的差异

Data Binding

数据绑定

📄 Read: references/data-binding.md

ItemsSource + ItemContainerStyle with HeaderText/Content setters
Model + ViewModel with ObservableCollection
DataContext binding pattern
Data binding with XML (XmlDataProvider)
HeaderTemplate and ContentTemplate customization
ItemContainerStyleSelector for conditional styles

📄 阅读： references/data-binding.md

ItemsSource + ItemContainerStyle，设置HeaderText/Content属性
模型+视图模型搭配ObservableCollection
DataContext绑定模式
使用XML进行数据绑定（XmlDataProvider）
HeaderTemplate和ContentTemplate自定义
ItemContainerStyleSelector实现条件样式

Orientation and Layout

方向与布局

📄 Read: references/orientation-and-layout.md

GroupBar orientation (Horizontal/Vertical)
GroupView and GroupViewItem orientation
Adjusting GroupBar width, changing header height
Rotating the GroupBar
FlowDirection for RTL support
Navigation Pane: PopupResizeDirection, ShowGripper

📄 阅读： references/orientation-and-layout.md

GroupBar方向（水平/垂直）
GroupView和GroupViewItem方向
调整GroupBar宽度、修改标题高度
旋转GroupBar
FlowDirection支持RTL布局
导航窗格：PopupResizeDirection、ShowGripper

Behavior and Features

行为与功能

📄 Read: references/behavior-and-features.md

Drag-and-drop reordering (DragItemVisibility, DragMarkerBrush)
Built-in context menu (sort, add, rename, move)
Toolbars inside GroupBar
Tooltip for GroupViewItems
Animation for expand/collapse
Collapsing and closing in StackMode
State persistence (SaveBarState/LoadBarState/ResetBarState)
Localization

📄 阅读： references/behavior-and-features.md

拖放重排序（DragItemVisibility、DragMarkerBrush）
内置上下文菜单（排序、添加、重命名、移动）
GroupBar内的工具栏
GroupViewItem的工具提示
展开/折叠动画
堆栈模式下的折叠与关闭
状态持久化（SaveBarState/LoadBarState/ResetBarState）
本地化

Appearance

外观

📄 Read: references/appearance.md

GroupBarHeaderStyle (background, corner radius, height)
CollapseButtonTemplate and CollapseButtonBackground
ItemContainerStyle (HeaderTemplate + ContentTemplate)
ItemContainerStyleSelector
DragMarkerBrush
SfSkinManager themes table
ThemeStudio custom themes

📄 阅读： references/appearance.md

GroupBarHeaderStyle（背景、圆角半径、高度）
CollapseButtonTemplate和CollapseButtonBackground
ItemContainerStyle（HeaderTemplate + ContentTemplate）
ItemContainerStyleSelector
DragMarkerBrush
SfSkinManager主题表格
ThemeStudio自定义主题