syncfusion-wpf-taskbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF TaskBar

实现WPF TaskBar

The TaskBar control provides a Windows Explorer-style task panel UI — grouped collapsible sections (

TaskBarItem

) that can hold any WPF content. Ideal for action panels, property groups, navigation sidebars, and tool panels.

Assembly required:

```
Syncfusion.Tools.WPF
```
```
Syncfusion.Shared.WPF
```

XAML namespace:

xml

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

C# namespace:

csharp

using Syncfusion.Windows.Tools.Controls;

TaskBar控件提供Windows资源管理器风格的任务面板UI——包含可折叠的分组区域（

TaskBarItem

），可容纳任意WPF内容。非常适用于操作面板、属性组、导航侧边栏和工具面板。

所需程序集：

```
Syncfusion.Tools.WPF
```
```
Syncfusion.Shared.WPF
```

XAML命名空间：

xml

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

C#命名空间：

csharp

using Syncfusion.Windows.Tools.Controls;

When to Use This Skill

何时使用此技能

Scenario	Use TaskBar
Windows Explorer-style grouped action panel	✅ Yes
Collapsible sidebar with grouped items	✅ Yes
WPF tool panel with categorized sections	✅ Yes
Simple tab control	❌ Use TabControl
Navigation sidebar with drill-down	❌ Use GroupBar or SfTreeNavigator

场景	是否使用TaskBar
Windows资源管理器风格的分组操作面板	✅ 是
包含分组项的可折叠侧边栏	✅ 是
带分类区域的WPF工具面板	✅ 是
简单选项卡控件	❌ 使用TabControl
带钻取功能的导航侧边栏	❌ 使用GroupBar或SfTreeNavigator

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly and NuGet setup
Adding TaskBar via XAML and C#
Adding a TaskBarItem with a Header
Adding content (text, panels) to TaskBarItem

📄 阅读： references/getting-started.md

程序集与NuGet配置
通过XAML和C#添加TaskBar
添加带标题的TaskBarItem
为TaskBarItem添加内容（文本、面板）

Items and Content

项与内容

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

TaskBarItem Items collection (any UIElement)
Custom header with image (DockPanel + Image + TextBlock)
Collapse/expand with
```
IsOpened
```
attached property
Animation speed (
```
Speed
```
attached property)
Expander button size (
```
ButtonSize
```
attached property)

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

TaskBarItem的Items集合（支持任意UIElement）
带图标的自定义标题（DockPanel + Image + TextBlock）
使用
```
IsOpened
```
附加属性实现折叠/展开
动画速度（
```
Speed
```
附加属性）
展开按钮大小（
```
ButtonSize
```
附加属性）

Layout and Orientation

布局与方向

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

```
GroupOrientation
```
: Horizontal vs Vertical
```
GroupOrientationChanged
```
event
```
GroupMargin
```
: spacing between items
```
GroupPadding
```
: internal content padding
```
GroupWidth
```
: uniform item width
```
FlowDirection
```
: LeftToRight / RightToLeft

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

```
GroupOrientation
```
：水平或垂直
```
GroupOrientationChanged
```
事件
```
GroupMargin
```
：项之间的间距
```
GroupPadding
```
：内容内部边距
```
GroupWidth
```
：统一项宽度
```
FlowDirection
```
：从左到右/从右到左

Appearance and Visual Styles

外观与视觉样式

📄 Read: references/appearance.md

```
SkinStorage.SetVisualStyle()
```
— applying built-in visual styles
All available style names (Office2007, Blend, Metro, VS2010, etc.)

📄 阅读： references/appearance.md

```
SkinStorage.SetVisualStyle()
```
——应用内置视觉样式
所有可用样式名称（Office2007、Blend、Metro、VS2010等）

Quick Start Example

快速入门示例

Minimal TaskBar with two groups (XAML):

xml

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="450" Width="300">
    <Grid>
        <syncfusion:TaskBar Name="taskBar" GroupMargin="5">

            <syncfusion:TaskBarItem Header="File Tasks">
                <StackPanel Margin="10">
                    <TextBlock Text="Open a file" />
                    <TextBlock Text="Save the file" />
                </StackPanel>
            </syncfusion:TaskBarItem>

            <syncfusion:TaskBarItem Header="Edit Tasks">
                <StackPanel Margin="10">
                    <TextBlock Text="Copy" />
                    <TextBlock Text="Paste" />
                </StackPanel>
            </syncfusion:TaskBarItem>

        </syncfusion:TaskBar>
    </Grid>
</Window>

C# equivalent:

csharp

TaskBar taskBar = new TaskBar();
taskBar.GroupMargin = new Thickness(5);

TaskBarItem item1 = new TaskBarItem() { Header = "File Tasks" };
item1.Items.Add(new TextBlock() { Text = "Open a file" });
taskBar.Items.Add(item1);

TaskBarItem item2 = new TaskBarItem() { Header = "Edit Tasks" };
item2.Items.Add(new TextBlock() { Text = "Copy" });
taskBar.Items.Add(item2);

this.Content = taskBar;

包含两个分组的极简TaskBar（XAML）：

xml

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="450" Width="300">
    <Grid>
        <syncfusion:TaskBar Name="taskBar" GroupMargin="5">

            <syncfusion:TaskBarItem Header="File Tasks">
                <StackPanel Margin="10">
                    <TextBlock Text="Open a file" />
                    <TextBlock Text="Save the file" />
                </StackPanel>
            </syncfusion:TaskBarItem>

            <syncfusion:TaskBarItem Header="Edit Tasks">
                <StackPanel Margin="10">
                    <TextBlock Text="Copy" />
                    <TextBlock Text="Paste" />
                </StackPanel>
            </syncfusion:TaskBarItem>

        </syncfusion:TaskBar>
    </Grid>
</Window>

C#等效代码：

csharp

TaskBar taskBar = new TaskBar();
taskBar.GroupMargin = new Thickness(5);

TaskBarItem item1 = new TaskBarItem() { Header = "File Tasks" };
item1.Items.Add(new TextBlock() { Text = "Open a file" });
taskBar.Items.Add(item1);

TaskBarItem item2 = new TaskBarItem() { Header = "Edit Tasks" };
item2.Items.Add(new TextBlock() { Text = "Copy" });
taskBar.Items.Add(item2);

this.Content = taskBar;

Common Patterns

常见模式

Collapse all groups on load

加载时折叠所有分组

xml

<syncfusion:TaskBar Name="taskBar" syncfusion:TaskBar.IsOpened="False">
    <syncfusion:TaskBarItem Header="Tasks" />
</syncfusion:TaskBar>

xml

<syncfusion:TaskBar Name="taskBar" syncfusion:TaskBar.IsOpened="False">
    <syncfusion:TaskBarItem Header="Tasks" />
</syncfusion:TaskBar>

Horizontal layout (groups side by side)

水平布局（分组并排）

xml

<syncfusion:TaskBar GroupOrientation="Horizontal" GroupMargin="5">
    ...
</syncfusion:TaskBar>

xml

<syncfusion:TaskBar GroupOrientation="Horizontal" GroupMargin="5">
    ...
</syncfusion:TaskBar>

Custom header with icon

带图标的自定义标题

xml

<syncfusion:TaskBarItem>
    <syncfusion:TaskBarItem.Header>
        <DockPanel>
            <Image Height="16" Width="16" Source="icon.png" />
            <TextBlock Foreground="White" Margin="5,0,0,0" Text="My Group" />
        </DockPanel>
    </syncfusion:TaskBarItem.Header>
    ...
</syncfusion:TaskBarItem>

xml

<syncfusion:TaskBarItem>
    <syncfusion:TaskBarItem.Header>
        <DockPanel>
            <Image Height="16" Width="16" Source="icon.png" />
            <TextBlock Foreground="White" Margin="5,0,0,0" Text="My Group" />
        </DockPanel>
    </syncfusion:TaskBarItem.Header>
    ...
</syncfusion:TaskBarItem>

Apply visual style

应用视觉样式

csharp

SkinStorage.SetVisualStyle(taskBar, "Office2007Blue");

csharp

SkinStorage.SetVisualStyle(taskBar, "Office2007Blue");

Key Properties

关键属性

Property	On	Type	Description
`Header`	`TaskBarItem`	`object`	Group header label (supports templates)
`Items`	`TaskBarItem`	collection	Content items in the group
`GroupMargin`	`TaskBar`	`Thickness`	Margin between all TaskBarItems
`GroupWidth`	`TaskBar`	`double`	Uniform width for all TaskBarItems
`GroupOrientation`	`TaskBar`	`Orientation`	`Vertical` (default) or `Horizontal`
`FlowDirection`	`TaskBar`	`FlowDirection`	`LeftToRight` or `RightToLeft`
`IsOpened`	attached on `TaskBar`	`bool`	Expand ( `true` ) or collapse ( `false` ) all items
`TaskBar.Speed`	attached	`double`	Animation speed for expand/collapse
`TaskBar.ButtonSize`	attached	`double`	Height of the expander button
`TaskBar.GroupPadding`	attached	`Thickness`	Padding inside each TaskBarItem

属性	所属对象	类型	说明
`Header`	`TaskBarItem`	`object`	分组标题标签（支持模板）
`Items`	`TaskBarItem`	集合	分组中的内容项
`GroupMargin`	`TaskBar`	`Thickness`	所有TaskBarItem之间的边距
`GroupWidth`	`TaskBar`	`double`	所有TaskBarItem的统一宽度
`GroupOrientation`	`TaskBar`	`Orientation`	`Vertical` （默认）或 `Horizontal`
`FlowDirection`	`TaskBar`	`FlowDirection`	`LeftToRight` 或 `RightToLeft`
`IsOpened`	附加到 `TaskBar`	`bool`	展开（ `true` ）或折叠（ `false` ）所有项
`TaskBar.Speed`	附加属性	`double`	展开/折叠的动画速度
`TaskBar.ButtonSize`	附加属性	`double`	展开按钮的高度
`TaskBar.GroupPadding`	附加属性	`Thickness`	每个TaskBarItem内部的边距