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

TabItem Layout

TabItem は TabControl 内の個々のタブページです。Header プロパティでタブのタイトルを設定し、Content にページの内容を配置します。Header には文字列だけでなく、アイコンや閉じるボタンなどのカスタムコンテンツも配置できます。

概要

WPF の TabItem は HeaderedContentControl を継承したコントロールで、TabControl の直接の子として配置します。Header にはタブのタイトル（通常は文字列）、Content にはタブが選択されたときに表示するページコンテンツを設定します。

Header プロパティには任意の WPF 要素を配置できます。これを利用して、アイコン付きのタブヘッダーや、タブを閉じる「✕」ボタンを持つクローザブルタブなど、リッチなタブヘッダーを実装できます。

IsSelected プロパティで TabItem が現在選択されているかどうかを確認できます。このプロパティをトリガーにして、選択時のスタイル変更やアニメーションを ControlTemplate で実装できます。

IsEnabled="False" にするとタブをグレーアウトして選択不可にできます。特定の条件（権限チェックなど）に基づいてタブを動的に有効/無効にする場合に使用します。

画面キャプチャ

デモしているプロパティ

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

プロパティ	設定値	説明
`Header (HeaderedContentControl)`	`object`	タブのヘッダー部分（タブをクリックするラベル）を設定します。アイコン付きタブや閉じるボタン付きのクローザブルタブ、通知バッジ付きタブなど、視覚的にリッチなヘッダーを実装したい場合に文字列ではなく任意の WPF 要素を配置します。文字列を設定すると内部的に TextBlock として表示され、UIElement を設定するとそのまま描画されます。Header に長いテキストや動的なコンテンツを設定するとタブ幅が変動し全体のレイアウトが崩れることがあるため、ItemContainerStyle で Width または MinWidth を固定することを検討してください。
`IsSelected`	`bool`	このタブが現在選択されているかどうかを示します。ViewModel から特定のタブを選択状態にしたい場合（ナビゲーション、ウィザードのステップ制御など）に TwoWay バインドで使います。IsSelected を True に設定するとそのタブがアクティブになりコンテンツ領域にそのタブの内容が表示されます。ただし TabControl は内部で選択を排他管理しているため、複数の TabItem を同時に IsSelected=True にしようとすると最後に設定された 1 つだけが有効になります。
`IsEnabled (Control)`	`bool`	False にするとこのタブをグレーアウトして選択不可にします。ウィザードフローで前のステップが完了するまで次のタブを無効にする場合や、ユーザーの権限に応じてタブを動的に有効/無効にする場合に使います。IsEnabled=False にするとタブヘッダーがグレーアウトし、ユーザーはそのタブをクリックして選択できなくなります。落とし穴として、IsEnabled=False でもプログラムから SelectedIndex や SelectedItem を直接変更すれば無効タブのコンテンツが表示されるため、アクセス制御はコンテンツ側でも実施する必要があります。
`Content (ContentControl)`	`object`	タブが選択されたときに表示するコンテンツを設定します。通常は Grid や StackPanel などのパネルを配置してその中に入力フォームや表示コンテンツを構築します。TabControl はデフォルトで全タブのコンテンツを作成時に初期化するため、重い処理（DB 取得、ファイルロードなど）を Content の初期化時に行うと起動が遅くなります。TabItem の Content は一度作成されると TabControl の存続期間中メモリに保持されるため、大量のタブを動的に生成する場合はメモリ消費に注意が必要です。

XAML 使用例

<TabControl>
  <!-- シンプルなタブ -->
  <TabItem Header="概要">
    <TextBlock Text="概要コンテンツ" Margin="16" />
  </TabItem>

  <!-- アイコン付きタブヘッダー -->
  <TabItem>
    <TabItem.Header>
      <StackPanel Orientation="Horizontal">
        <Image Source="/Icons/settings.png" Width="16" Margin="0,0,4,0" />
        <TextBlock Text="設定" />
      </StackPanel>
    </TabItem.Header>
    <StackPanel Margin="16">
      <CheckBox Content="通知を有効にする" />
    </StackPanel>
  </TabItem>

  <!-- 無効タブ -->
  <TabItem Header="管理" IsEnabled="{Binding IsAdmin}">
    <TextBlock Text="管理者専用コンテンツ" Margin="16" />
  </TabItem>
</TabControl>

主な使用例

ページコンテンツのコンテナ — TabControl の各ページを TabItem として定義し、それぞれのページコンテンツを配置します。
クローザブルタブ — Header に「✕」ボタンを配置してタブを閉じる機能を実装します。
アイコン付きタブ — Header に画像とテキストを並べたパネルを設定して視認性を高めます。
権限ベースのタブ有効化 — IsEnabled を ViewModel の権限フラグにバインドして、ユーザーの役割に応じてタブを動的に有効/無効にします。
バッジ付きタブ — Header に通知数バッジ（未読件数など）を表示するカスタムタブヘッダーを実装します。

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

Header にはカスタムコンテンツを活用する — 文字列だけのヘッダーより、アイコン＋テキストのほうがタブの内容を直感的に伝えられます。
IsSelected と IsEnabled を使い分ける — 現在どのタブが選択されているかは IsSelected（TwoWay バインド）で管理し、選択不可はIsEnabled=False で実装します。
ControlTemplate で外観をカスタマイズ — タブの見た目（形・色・フォントなど）を変更するには Style と ControlTemplate を使ってカスタマイズします。
TabItem の幅を固定する場合 — ItemContainerStyle で Width を設定するか、Header の MinWidth/Width で幅を制御します。
コンテンツの遅延初期化 — TabItem のコンテンツは TabControl 作成時にすべて初期化されます。重いコンテンツを持つタブは、IsSelected プロパティを監視して初めて選択されたタイミングで初期化するパターン（遅延ロード）を採用するとアプリの起動時間を短縮できます。
HeaderTemplate でタブヘッダーを統一する — ItemsSource を使って TabControl を動的に構成する場合、TabControl の HeaderTemplate に DataTemplate を定義するとすべてのタブヘッダーに統一されたスタイルを適用できます。

ソースコード

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

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