Implementing 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:

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

C# namespace:

using Syncfusion.Windows.Tools.Controls;

When to Use This Skill

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

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)

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

Appearance and Visual Styles

📄 Read: references/appearance.md

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

Quick Start Example

Minimal TaskBar with two groups (XAML):

<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:

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

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

Horizontal layout (groups side by side)

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

Custom header with icon

<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

SkinStorage.SetVisualStyle(taskBar, "Office2007Blue");

Key Properties