SimpleTabControl および SimpleTabItem

タブ コントロールは、タブに内容を表示するアイテム コントロールです。通常、タブ コントロールの子要素はヘッダー付きコンテンツ コントロールであるタブ アイテムであり、それぞれにヘッダー要素とコンテンツ要素が含まれます。Microsoft Expression Blend でタブ コントロールにアイテムを配置するには、[オブジェクトとタイムライン] でタブ コントロールを右クリックした後 [SimpleTabItem の追加] をクリックして個々のアイテムをコレクションに追加するか、[ItemsSource をデータにバインド] をクリックして、データ ソースからタブ アイテム要素のコレクションを生成します。

[オブジェクトとタイムライン] でタブ アイテムを右クリックし、[テキストの編集] をクリックすることで、タブ アイテムのテキストを編集できます。または、タブ アイテムをダブルクリックしてアクティブにし、その中にコントロールを描画できます。

2 つの SimpleTabItems が追加された後の SimpleTabControl コントロールのアートボード ビュー

コントロール テンプレートの構成要素

SimpleTabControl コントロール テンプレートには、次のアイテムが含まれます。

• グリッド レイアウト パネル : タブ コントロール内に複数の子要素を保持するために使用します。また、グリッドを使用すると、アプリケーション ユーザー インターフェイス (UI) デザイナは複数の要素を簡単にテンプレートに追加できます。グリッドの一番上の行は、自動サイズ調整を使用し、最大サイズのタブ アイテムの高さに合わせて変更されます。下の行ではアスタリスク (*) サイズが使用され、余白を埋めるようにタブ アイテムの内容を表示できます (PART_SelectedContentHost)。

• HeaderPanel という名前の TabPanel 要素 : タブ アイテムを編成できるカスタム レイアウト パネルです。

• Border 要素 : BorderThickness プロパティが含まれています。このプロパティは、このテンプレートの適用先タブ コントロールの BorderThickness プロパティにテンプレート バインドできます。

• PART_SelectedContentHost という名前の ContentPresenter : このテンプレートが適用されるタブ コントロールの Content プロパティを表示するために使用します。

SimpleTabItem コントロール テンプレートには、次のアイテムが含まれます。

• グリッド レイアウト パネル : タブ コントロール内に複数の子要素を保持するために使用します。また、グリッドを使用すると、アプリケーション ユーザー インターフェイス (UI) デザイナは複数の要素を簡単にテンプレートに追加できます。グリッド パネルではサイズ共有の概念が導入され、タブ コントロールの各タブ アイテムの幅を他のタブ アイテムと同じにすることができます。

• Border 要素 : BorderThickness プロパティが含まれています。このプロパティは、このテンプレートの適用先タブ コントロールの BorderThickness プロパティにテンプレート バインドできます。

• ContentSite という名前の ContentPresenter 要素 : このテンプレートが適用されるタブ アイテムの Header プロパティにバインドされます。このバインドは、ContentSite 要素の ContentSource プロパティに設定されます。

  オブジェクト ビュー : SimpleTabControl コントロール (左) および SimpleTabItem コントロール (右) の基本パーツ (テンプレート)

  

先頭に戻る

使用されるプロパティ トリガ

コントロール テンプレートのプロパティ トリガは、プロパティの変更にコントロールを対応させるために使用されます。[組み合わせ] パネルの [トリガ] のアイテムをクリックすると、トリガがアクティブなときに変更されるプロパティを表示できます。たとえば、タブ アイテムのテンプレートでは、IsSelected トリガにより、タブ アイテムの ZIndex プロパティが設定され、前面に配置されます。このため、タブ アイテムを適切に動作させるには、このトリガを保持する必要があります。IsSelected トリガはまた、アイテムが選択されていることを示すために BorderThickness を太く設定し、Background の色を変更します。

先頭に戻る

使用されるブラシ

SimpleTabControl および SimpleTabItem テンプレートでは、SimpleStyles.xaml リソース ディクショナリの次に示すブラシ リソースが使用されます。

• タブ コントロールの Background プロパティは、アクティブなトリガが存在しない場合、WindowBackgroundBrush を使用して設定されます。

• タブ コントロールの BorderBrush プロパティは、アクティブなトリガが存在しないときは SolidBorderBrush を使用して設定され、IsEnabled が False のときには DisabledBorderBrush を使用して設定されます。

• タブ コントロールの Foreground プロパティは、IsEnabled が False のときに DisabledForegroundBrush を使用して設定されます。

• タブ アイテムの Border 要素の Background プロパティは、アクティブなトリガが存在しない場合は LightBrush を使用して設定され、IsSelected が True のときは WindowBackgroundBrush を使用して設定され、IsEnabled が False のときは DisabledBackgroundBrush を使用して設定されます。

• タブ アイテムの Border 要素の BorderBrush プロパティは、SolidBorderBrush を使用して設定されます。IsEnabled が False の場合には、DisabledBorderBrush を使用して設定されます。

• タブ アイテムの Foreground プロパティは、IsEnabled が False のときに DisabledForegroundBrush を使用して設定されます。

さらに、テンプレートでは、システム カラーへのバインドも使用され、コントロールでシステムの既定値を使用できます。多くの場合、これらのブラシを変更して、独自のデザインを作成できます。これを行うには、システム カラーを設定するトリガを編集します。

先頭に戻る

ベスト プラクティスおよびデザイン ガイドライン

• 一般に、コントロールに視覚要素を追加する予定がある場合は、テンプレートのルートとして Grid コントロールを使用してください。Expression Blend は、既定では Grid コントロールなどのレイアウト パネルを検索してアクティブにします。これにより、アートボードに追加される新しい要素がレイアウト パネルの子要素になります。

• テンプレートの HeaderPanel という名前の TabPanel 要素は、TabControl 用の特別なレイアウト パネルです。TabPanel では、複数行にタブ アイテムを配置したり、タブ アイテムの選択時に、タブ アイテムを階層化することができます。HeaderPanel には別のレイアウト コンテナを使用できますが、IsItemsHost プロパティを True に設定する必要があります。

• SimpleTabItem テンプレートを編集するには、[リソース] パネルにある [SimpleTabItem] スタイルの横の [リソースの編集] ボタンをクリックします。次に、スタイルの編集モードで、[オブジェクトとタイムライン] の [スタイル] を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして [テンプレートの編集] または [コピーの編集] をクリックします。

• システム TabControl 用のコントロール テンプレートは、SimpleTabControl よりもはるかに複雑です。これを使用すると、TabControl の Orientation プロパティに基づいて、さまざまな方向に TabPanel をドッキングすることができます。SimpleTabControl では、簡素化のために Orientation プロパティが無視されます。TabPanel を別の場所に配置する場合は、グリッドの行および列を編集します。

• PART_SelectedContentHost という名前の ContentPresenter 要素は、名前を変更しないでください。コントロールのクラスが、タブ アイテムの表示場所としてこの名前を検索するためです。

先頭に戻る

関連項目

概念

試してみよう : ビットマップ効果を使用した SimpleTabItem のカスタマイズ