syncfusion-wpf-tab-splitter

WPF TabSplitter の実装

TabSplitter コントロールは、Visual Studio 2008 スタイルのタブグループ分割ビューを提供します。各タブ項目内のコンテンツを上部パネルと下部パネルに分割するため、分割エディターのレイアウト（例：XAML ビューとデザインビュー）、2 ペインのコンテンツビューアー、左右に並べたタブパネルに最適です。

必要なアセンブリ：

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

XAML 名前空間：

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

C# 名前空間：

using Syncfusion.Windows.Tools.Controls;

---

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

シナリオ	TabSplitter を使用
XAML ビューとデザインビューを使う分割エディター	✅ はい
タブ内の2ペインコンテンツ	✅ はい
分割パネルを持つ複数のタブグループ	✅ はい
シンプルなタブコントロール（分割なし）	❌ 標準の TabControl を使用
水平方向のナビゲーションサイドバー	❌ GroupBar または TreeNavigator を使用

---

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

はじめに

📄 参照先： references/getting-started.md

• アセンブリと NuGet の設定
• XAML と C# による TabSplitter の追加
• コンテンツを含む TabSplitterItem の追加
• TopPanelItems と BottomPanelItems への SplitterPages の追加
• SfSkinManager によるテーマの適用

項目とパネル構成

📄 参照先： references/items-and-panels.md

• TabSplitterItem：Header、TopPanelItems、BottomPanelItems
• SplitterPage：Header、コンテンツ、IsSelectedPage
• 下部パネルの折りたたみ／展開（IsCollapsedBottomPanel）
• BottomPanelHeight の設定
• 子項目が1つだけの場合にヘッダータブを非表示にする（HideHeaderOnSingleChild）
• 1つの TabSplitter 内に複数の TabSplitterItems を配置

方向とレイアウト

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

• 項目ごとの水平／垂直方向
• 入れ替え、折りたたみ、展開の動作の概要

外観とテーマ

📄 参照先： references/appearance.md

• MouseOverBackground、MouseOverForeground
• SelectedBackground、SelectedForeground
• SfSkinManager の組み込みテーマ
• ThemeStudio によるカスタムテーマの作成

---

クイックスタートの例

分割タブを1つ持つ最小構成の TabSplitter（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="800">
    <Grid>
        <syncfusion:TabSplitter Name="tabSplitter" Height="300" Width="500">
            <syncfusion:TabSplitterItem Header="Window1.xaml">
                <syncfusion:TabSplitterItem.TopPanelItems>
                    <syncfusion:SplitterPage Header="XAML">
                        <TextBlock Text="XAML View" HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                    </syncfusion:SplitterPage>
                </syncfusion:TabSplitterItem.TopPanelItems>
                <syncfusion:TabSplitterItem.BottomPanelItems>
                    <syncfusion:SplitterPage Header="Design">
                        <TextBlock Text="Design View" HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                    </syncfusion:SplitterPage>
                </syncfusion:TabSplitterItem.BottomPanelItems>
            </syncfusion:TabSplitterItem>
        </syncfusion:TabSplitter>
    </Grid>
</Window>

C# での同等の例：

TabSplitter tabSplitter = new TabSplitter();

SplitterPage topPage = new SplitterPage() { Header = "XAML" };
SplitterPage bottomPage = new SplitterPage() { Header = "Design" };

TabSplitterItem item = new TabSplitterItem() { Header = "Window1.xaml" };
item.TopPanelItems.Add(topPage);
item.BottomPanelItems.Add(bottomPage);

tabSplitter.Items.Add(item);
grid.Children.Add(tabSplitter);

---

よくあるパターン

複数のタブグループ

<syncfusion:TabSplitter>
    <syncfusion:TabSplitterItem Header="Window1.xaml">
        <syncfusion:TabSplitterItem.TopPanelItems>
            <syncfusion:SplitterPage Header="XAML" />
        </syncfusion:TabSplitterItem.TopPanelItems>
        <syncfusion:TabSplitterItem.BottomPanelItems>
            <syncfusion:SplitterPage Header="Design" />
        </syncfusion:TabSplitterItem.BottomPanelItems>
    </syncfusion:TabSplitterItem>
    <syncfusion:TabSplitterItem Header="Window2.xaml">
        <syncfusion:TabSplitterItem.TopPanelItems>
            <syncfusion:SplitterPage Header="XAML" />
        </syncfusion:TabSplitterItem.TopPanelItems>
        <syncfusion:TabSplitterItem.BottomPanelItems>
            <syncfusion:SplitterPage Header="Design" />
        </syncfusion:TabSplitterItem.BottomPanelItems>
    </syncfusion:TabSplitterItem>
</syncfusion:TabSplitter>

下部パネルを折りたたんだ状態で開始

<syncfusion:TabSplitterItem Header="Window1.xaml" IsCollapsedBottomPanel="True">
    ...
</syncfusion:TabSplitterItem>

垂直分割レイアウト

<syncfusion:TabSplitterItem Header="Window1.xaml" Orientation="Vertical">
    ...
</syncfusion:TabSplitterItem>

---

主なプロパティ

プロパティ	対象	型	説明
Header	TabSplitterItem	object	タブヘッダーのラベル
TopPanelItems	TabSplitterItem	コレクション	上部パネル内のページ
BottomPanelItems	TabSplitterItem	コレクション	下部パネル内のページ
Orientation	TabSplitterItem	Orientation	Horizontal（既定）または Vertical
IsCollapsedBottomPanel	TabSplitterItem	bool	下部パネルを折りたたみます（既定値：false）
Header	SplitterPage	object	ページのタブラベル
IsSelectedPage	SplitterPage	bool	このページを選択済みに設定します
BottomPanelHeight	TabSplitter	double	下部パネルの高さ
HideHeaderOnSingleChild	TabSplitter	bool	項目が1つだけの場合にタブヘッダーを非表示にします
SelectedBackground	TabSplitter	Brush	選択中のタブの背景
SelectedForeground	TabSplitter	Brush	選択中のタブの前景色
MouseOverBackground	TabSplitter	Brush	ホバー時の背景
MouseOverForeground	TabSplitter	Brush	ホバー時の前景色