syncfusion-wpf-tabcontrol

WPF TabControl（TabControlExt）の実装

TabControl（TabControlExt）は、アプリケーションのコンテンツを複数のタブに整理するための強力なコンポーネントです。タブの向き、編集可能なヘッダー、ピン留め／ピン留め解除機能、コンテキストメニュー、カスタマイズ可能な閉じるボタンなどの機能を備えており、開発者は柔軟で整理されたタブ形式のインターフェイスを作成できます。

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

• タブ形式のインターフェイスの作成： 複数のコンテンツ領域をタブベースのレイアウトに整理する必要がある場合
• タブの管理： タブ項目の作成、削除、選択、操作を行う場合
• ユーザー操作： タブの選択変更、タブを閉じる操作、タブのナビゲーションに応答する必要がある場合
• カスタマイズ： タブのスタイル設定（向き、配置、テーマ）、閉じるボタンの設定、アイコンの追加を行う場合
• データバインディング： タブ項目をデータソースまたは監視可能なコレクションにバインドする場合
• 高度な機能： コンテキストメニュー、ドラッグ＆ドロップによる並べ替え、ピン留め／ピン留め解除、キーボードナビゲーションを実装する場合

コンポーネントの概要

主な機能：

• タブの向き - タブを横方向（上／下）または縦方向（左／右）に配置できます
• 柔軟な閉じる操作 - 閉じるボタンの表示（Common、Individual、Both、Extended、Hidden）を設定できます
• タブの選択 - マウス、キーボード（Ctrl+Tab、矢印キー）、プログラムによる選択に対応します
• 編集可能なヘッダー - ユーザーがタブのヘッダーを対話的に編集できます
• ピン留め／ピン留め解除 - よく使うタブにすばやくアクセスできます
• コンテキストメニュー - 組み込みのコンテキストメニューとカスタムコンテキストメニューに対応します
• データバインディング - タブ項目をデータソースにバインドできます
• ドラッグ＆ドロップ - タブをドラッグして並べ替えられます
• ナビゲーション - タブリストメニューとスクロールボタンで移動できます
• テーマ設定 - 豊富な組み込みテーマとカスタマイズオプションを利用できます

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリ参照
• TabControl の基本的な作成方法（XAML および C#）
• ヘッダーとコンテンツを持つ TabItem の追加
• タブの配置と向きのオプション
• アセンブリの依存関係

タブの操作と選択

📄 参照： references/tab-interactions.md

• タブの選択（マウス、キーボード、プログラムによる選択）
• 変更を監視する SelectedItemChangedEvent
• キーボードナビゲーション（Ctrl+Tab、矢印キー）
• すばやく移動するためのタブリストのコンテキストメニュー
• 選択した項目のプロパティの取得

タブを閉じる操作とボタンの設定

📄 参照： references/closing-tabs.md

• CloseButtonType のオプションと表示モード
• 個別の閉じるボタンと共通の閉じるボタン
• 特定のタブを閉じられないようにする設定（CanClose）
• 特定のタブの閉じるボタンを非表示にする方法
• 閉じるボタンの表示状態

カスタマイズとスタイル設定

📄 参照： references/customization.md

• 編集可能なタブヘッダー
• タブの向きと配置のバリエーション
• レイアウトモード（SingleLine、MultiLine、MultiLineWithFillWidth）
• ピン留め／ピン留め解除機能
• タブのスクロール設定
• 組み込みテーマとテーマ設定への対応

データバインディング

📄 参照： references/data-binding.md

• TabControl の項目をデータソースにバインドする方法
• データコレクションから TabItem を作成する方法
• ヘッダーとコンテンツのテンプレート
• 監視可能なコレクションの使用パターン
• TabItem のデータバインディング

高度な機能

📄 参照： references/advanced-features.md

• コンテキストメニューのカスタマイズ（タブレベルと項目レベル）
• カスタムメニュー項目とハンドラー
• ドラッグ＆ドロップによるタブの並べ替え
• 新規ボタン機能（IsNewButtonEnabled）
• ナビゲーションボタンによるタブのスクロール
• ローカライズへの対応
• 新しいタブボタンのイベント

クイックスタートの例

基本的な XAML TabControl

<Window x:Class="TabControlApp.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="TabControl Example" Height="450" Width="800">

    <Grid>
        <syncfusion:TabControlExt Name="tabControl" Height="100" Width="280">
            <syncfusion:TabItemExt Header="Tab 1">
                <TextBlock Text="Content of Tab 1" />
            </syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="Tab 2">
                <TextBlock Text="Content of Tab 2" />
            </syncfusion:TabItemExt>
            <syncfusion:TabItemExt Header="Tab 3">
                <TextBlock Text="Content of Tab 3" />
            </syncfusion:TabItemExt>
        </syncfusion:TabControlExt>
    </Grid>
</Window>

基本的な C# による作成

using Syncfusion.Windows.Tools.Controls;

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();

        // Create TabControl instance
        TabControlExt tabControlExt = new TabControlExt();
        tabControlExt.Height = 100;
        tabControlExt.Width = 280;

        // Create and add TabItems
        TabItemExt tabItem1 = new TabItemExt() 
        {
            Header = "Tab 1",
            Content = new TextBlock() { Text = "Content of Tab 1" }
        };

        TabItemExt tabItem2 = new TabItemExt() 
        {
            Header = "Tab 2",
            Content = new TextBlock() { Text = "Content of Tab 2" }
        };

        tabControlExt.Items.Add(tabItem1);
        tabControlExt.Items.Add(tabItem2);

        this.Content = tabControlExt;
    }
}

よく使われるパターン

パターン 1：タブの選択変更への応答

// Handle tab selection changes
tabControl.SelectedItemChangedEvent += TabControl_SelectedItemChangedEvent;

private void TabControl_SelectedItemChangedEvent(object sender, SelectedItemChangedEventArgs e)
{
    var newTabItem = e.NewSelectedItem.Header;
    var oldTabItem = e.OldSelectedItem?.Header ?? "None";
    MessageBox.Show($"Changed from {oldTabItem} to {newTabItem}");
}

パターン 2：閉じるボタンの設定

<syncfusion:TabControlExt CloseButtonType="Both" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" CanClose="False" />
</syncfusion:TabControlExt>

パターン 3：タブの向きの変更

<syncfusion:TabControlExt TabStripPlacement="Bottom" Name="tabControl">
    <syncfusion:TabItemExt Header="Tab 1" />
    <syncfusion:TabItemExt Header="Tab 2" />
</syncfusion:TabControlExt>

パターン 4：新しいタブボタンの追加

<syncfusion:TabControlExt IsNewButtonEnabled="True" 
                          NewButtonClick="TabControl_NewButtonClick"
                          Name="tabControl" />

private void TabControl_NewButtonClick(object sender, EventArgs e)
{
    TabItemExt newItem = new TabItemExt() 
    {
        Header = $"Tab {tabControl.Items.Count + 1}",
        Content = new TextBlock() { Text = "New tab content" }
    };
    tabControl.Items.Add(newItem);
}

パターン 5：スクロールボタンでのナビゲーションの有効化

<syncfusion:TabControlExt TabScrollButtonVisibility="Visible"
                          TabScrollStyle="Extended"
                          Name="tabControl" />

主なプロパティ

• Items — TabItemExt オブジェクトのコレクション
• SelectedItem — 現在選択されているタブ
• TabStripPlacement — 位置（Top、Bottom、Left、Right）
• CloseButtonType — 閉じるボタンの表示モード
• IsNewButtonEnabled — 新しいタブボタンの表示／非表示
• ShowTabListContextMenu — タブリストのナビゲーションメニュー

主なイベント

• SelectedItemChangedEvent — タブの選択が変更されたとき
• TabItemClosing — タブが閉じられる前（キャンセル可能）
• TabItemClosed — タブが閉じられた後