WPF 標準コントロールデモアプリ › TabControl

TabControl Layout

TabControl は複数のページをタブで切り替えるコンテナコントロールです。TabItem を子要素として持ち、選択されたタブのコンテンツのみが表示されます。タブの位置（上・下・左・右）、動的なタブコレクションのバインドをサポートします。

概要

WPF の TabControl は Selector を継承したコントロールで、複数の TabItem をタブとして管理し、選択されたタブのコンテンツを表示します。ウィザードの各ステップ、設定ダイアログのカテゴリページ、メインコンテンツエリアなどに使用されます。

TabStripPlacement プロパティでタブストリップ（タブヘッダーの一覧）の配置を上・下・左・右に変更できます。デフォルトは Top（上部）です。

静的なタブには XAML で TabItem を直接追加します。動的なタブコレクションには ItemsSource を使用し、HeaderTemplate で各タブのヘッダー表示、ContentTemplate でコンテンツ表示を定義します。

選択されたタブの追跡は SelectedIndex または SelectedItem で行います。ViewModel とバインドすることで、プログラムからタブを切り替えたり、選択変化に応じた処理を実行できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`TabStripPlacement`	`Top / Bottom / Left / Right`	タブストリップの配置位置を設定します。Outlook 風のサイドナビゲーションや縦に多くのカテゴリを並べるメニューには Left を使い、標準的な設定ダイアログには Top（デフォルト）を使います。Left/Right を設定するとタブストリップが垂直方向になりヘッダーテキストが横書きのまま縦に並びます。Left/Right では多くのタブがある場合に幅が足りずヘッダーが切り詰められることがあるため、ItemContainerStyle で MinWidth を設定して対処します。
`SelectedIndex / SelectedItem`	`int / object`	選択されているタブのインデックスとアイテムを取得・設定します。ViewModel からタブを切り替えたい場合（ウィザードのステップ制御、ナビゲーションなど）に TwoWay バインドを使います。SelectedIndex=-1 は何も選択されていない状態を意味し、コンテンツ領域が空になります。範囲外のインデックスを設定してもサイレントに無視され、ItemsSource にないオブジェクトを SelectedItem に設定しても同様に無視されます。
`ItemsSource`	`IEnumerable`	動的なタブコレクションをバインドします。ViewModel のコレクションに基づいてタブを動的に生成する場合に使い、各タブの見た目は HeaderTemplate でヘッダー部分を、ContentTemplate でコンテンツ部分を定義します。ItemsSource を使うと各コレクション要素が TabItem として描画されます。落とし穴として、ItemsSource で動的バインドを使う場合は XAML で TabItem を静的に直接追加する方法と混在させることができず、どちらか一方の方法に統一する必要があります。
`Header / IsEnabled (TabItem)`	`object / bool`	TabItem のヘッダーテキスト（またはコンテンツ）と有効/無効状態を設定します。権限制御やウィザードフローで特定のタブへのアクセスを制限したい場合に IsEnabled=False を使います。IsEnabled=False にするとタブヘッダーがグレーアウトしてユーザーはクリックできなくなります。落とし穴として、IsEnabled=False でもプログラムから SelectedIndex を変更すれば無効タブのコンテンツが表示されてしまうため、表示制御はコンテンツ側でも行う必要があります。

XAML 使用例

<TabControl TabStripPlacement="Top"
            SelectedIndex="{Binding SelectedTabIndex, Mode=TwoWay}">
  <TabItem Header="基本情報">
    <Grid Margin="8">
      <TextBox Text="{Binding Name}" />
    </Grid>
  </TabItem>
  <TabItem Header="連絡先">
    <Grid Margin="8">
      <TextBox Text="{Binding Email}" />
    </Grid>
  </TabItem>
  <TabItem Header="設定" IsEnabled="{Binding IsAdmin}">
    <StackPanel Margin="8">
      <CheckBox Content="詳細ログ" IsChecked="{Binding EnableLog}" />
    </StackPanel>
  </TabItem>
</TabControl>

主な使用例

設定ダイアログ — 「一般」「ネットワーク」「セキュリティ」などのカテゴリをタブで分けた設定画面を作成します。
データ入力ウィザード — 複数ステップのデータ入力フォームをタブで管理し、SelectedIndex でステップを制御します。
マルチドキュメントインターフェイス（MDI） — 複数の開いたファイルをタブで管理する IDE 風インターフェイスを実装します。
ダッシュボードのビュー切り替え — 「サマリー」「詳細」「グラフ」のビューをタブで切り替えるダッシュボードに使用します。
コンテキスト依存タブ — 選択されたアイテムの種類に応じて異なるタブセットを表示するコンテキスト依存 UI を実装します。

ヒントとベストプラクティス

重いタブコンテンツは生成タイミングを意識する — XAML に TabItem を直書きした場合は、各タブ内の要素インスタンスがロード時に作成されることが多く、未選択タブの分も初期コストになります。一方、ItemsSource と ContentTemplate / DataTemplate を使う構成では、選択時にコンテンツを生成する設計にしやすくなります。重いコンテンツでは、SelectedIndex 変化に合わせた遅延ロードやテンプレートベースの構成を検討してください。
ContentStringFormat で表示フォーマットを指定 — TabControl の ContentStringFormat プロパティでコンテンツの表示フォーマットを指定できます。
タブのリサイズ — TabItem の幅は自動で均等にはなりません。固定幅が必要な場合は ItemContainerStyle で Width を設定します。
動的タブは ItemsSource を使う — タブ数が動的に変化する場合は XAML の TabItem 直書きではなく ItemsSource バインドで管理します。
Ctrl+Tab によるキーボードナビゲーション — デフォルトで Ctrl+Tab を押すとタブが切り替わります。特定の画面でこの挙動を抑制したい場合は KeyDown ハンドラーで e.Handled=true を設定します。
カスタムタブヘッダー — 閉じるボタンや通知バッジを付けたタブヘッダーを実装するには HeaderTemplate に任意の DataTemplate を定義します。HeaderTemplate 内の Button には TabControl のコマンドをバインドするか、RelativeSource で親コントロールのコマンドを参照します。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で TabControl のソースコードを見る →