syncfusion-wpf-taskbar

WPF TaskBar の実装

TaskBar コントロールは、Windows エクスプローラー風のタスクパネル UI を提供します。任意の WPF コンテンツを配置できる、折りたたみ可能なグループ化セクション（TaskBarItem）です。アクションパネル、プロパティグループ、ナビゲーションサイドバー、ツールパネルに最適です。

必要なアセンブリ：

• Syncfusion.Tools.WPF
• Syncfusion.Shared.WPF

XAML 名前空間：

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

C# 名前空間：

using Syncfusion.Windows.Tools.Controls;

---

このスキルを使用する場面

シナリオ	TaskBar の使用
Windows エクスプローラー風のグループ化されたアクションパネル	✅ はい
グループ化された項目を含む折りたたみ可能なサイドバー	✅ はい
カテゴリ別セクションを含む WPF ツールパネル	✅ はい
シンプルなタブコントロール	❌ TabControl を使用
階層をたどるナビゲーションサイドバー	❌ GroupBar または SfTreeNavigator を使用

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリと NuGet のセットアップ
• XAML と C# での TaskBar の追加
• Header を持つ TaskBarItem の追加
• TaskBarItem へのコンテンツ（テキスト、パネル）の追加

項目とコンテンツ

📄 参照： references/items-and-content.md

• TaskBarItem の Items コレクション（任意の UIElement）
• 画像付きのカスタムヘッダー（DockPanel + Image + TextBlock）
• IsOpened 添付プロパティによる折りたたみ／展開
• アニメーション速度（Speed 添付プロパティ）
• 展開ボタンのサイズ（ButtonSize 添付プロパティ）

レイアウトと方向

📄 参照： references/layout-and-orientation.md

• GroupOrientation：水平と垂直
• GroupOrientationChanged イベント
• GroupMargin：項目間の間隔
• GroupPadding：コンテンツの内部パディング
• GroupWidth：項目の幅を統一
• FlowDirection：LeftToRight／RightToLeft

外観とビジュアルスタイル

📄 参照： references/appearance.md

• SkinStorage.SetVisualStyle() — 組み込みビジュアルスタイルの適用
• 使用可能なすべてのスタイル名（Office2007、Blend、Metro、VS2010 など）

---

クイックスタートの例

2 つのグループを持つ最小限の TaskBar（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# での同等の例：

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;

---

よく使われるパターン

読み込み時にすべてのグループを折りたたむ

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

水平レイアウト（グループを横並びにする）

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

アイコン付きのカスタムヘッダー

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

ビジュアルスタイルを適用する

SkinStorage.SetVisualStyle(taskBar, "Office2007Blue");

---

主なプロパティ

プロパティ	対象	型	説明
Header	TaskBarItem	object	グループのヘッダーラベル（テンプレートに対応）
Items	TaskBarItem	collection	グループ内のコンテンツ項目
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 内のパディング