次の方法で共有

SimpleExpander

  • [アーティクル]

このページは WPF プロジェクトにのみ適用されます。

展開コントロールとは、ヘッダーと、内容表示のための折りたたみ可能なウィンドウを表示するヘッダー付きコンテンツ コントロールです。Microsoft Expression Blend では、Header プロパティを変更することによって、展開コントロールにタイトルを付けることができます。展開コントロールに内容を配置するには、展開コントロールをダブルクリックし、そこに要素を描画します。展開コントロールに複数の要素を配置する場合は、Grid または Canvas などのレイアウト パネルに追加する必要があります。展開コントロールは、既定でテキストも表示できます。テキストを編集するには、展開コントロールを右クリックし、[テキストの編集] をクリックします。展開コントロールを展開してアートボードに表示するには、[オブジェクトとタイムライン] で展開コントロールを右クリックし、[Expander の拡張] をクリックします。

SimpleExpander コントロールのアートボード ビュー

Cc294637.c43eef70-9797-41b2-af94-b3470f88c6c6(ja-jp,Expression.10).png

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

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

  • Grid : 展開コントロール内に複数の子要素を保持するために必要なレイアウト パネルです。また、Grid を使用すると、アプリケーション ユーザー インターフェイス (UI) デザイナは複数の要素を簡単にテンプレートに追加できます。Grid は、ヘッダーを表示する Border 領域と、内容を表示する ExpandSite 領域の 2 つの領域に分割されます。

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

  • ToggleButton 要素 : Border 要素内に含まれ、展開コントロールの展開および折りたたみを実行します。

  • ContentPresenter 要素 : Border 要素内に含まれ、このテンプレートが適用される展開コントロールの Header プロパティに自動的にバインドされます。

  • ExpandSite 領域下の ContentPresenter : このテンプレートが適用される展開コントロールの Content プロパティの表示に使用されます。指定どおりに展開コントロールを動作させるためには、両方の ContentPresenter 要素が必要です。

    オブジェクト ビュー : SimpleExpander コントロールの基本パーツ (テンプレート)

    Cc294637.ef0a93de-baf6-4563-9b58-ba0f5a703450(ja-jp,Expression.10).png

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

コントロール テンプレートのプロパティ トリガは、プロパティの変更にコントロールを対応させるために使用されます。[組み合わせ] パネルの [トリガ] のアイテムをクリックすると、トリガがアクティブなときに変更されるプロパティを表示できます。たとえば、SimpleExpander テンプレートでは、IsExpanded プロパティが True のときに、ExpandSite 領域が表示されます。

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

使用されるブラシ

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

  • Background プロパティは、アクティブなトリガが存在しないときは LightBrush を使用して設定され、IsEnabled が False のときは DisabledBackgroundBrush を使用して設定されます。

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

  • Border 要素の Background プロパティは、アクティブなトリガが存在しない場合は NormalBrush を使用して設定されます。

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

  • ExpandSite 要素の BorderBrush プロパティは、アクティブなトリガが存在しない場合は SolidBorderBrush を使用して設定されます。

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

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

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

  • 展開コントロールには、ContentPresenter 要素が 2 つ (ヘッダー用とコンテンツ用) 含まれるため、ヘッダーの ContentPresenter をコントロールのクラスに対して明示的に設定する必要があります。これを行うには、(テンプレートの Border ノードで) ContentPresenter 要素の ContentSource プロパティを Header に設定します。

  • ToggleButton 要素では、ExpanderToggleButton という個別のテンプレートを使用します。これを変更するには、ToggleButton 要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] または [コピーの編集] をクリックします。ToggleButton は、ToggleButton の IsChecked と展開コントロールの IsExpanded とのバインドによって、展開コントロールの残りの部分に結合されます。このプロパティを適切に更新するにはこのバインドを保持する必要があります。双方向のバインドによって、プログラムで展開コントロールを展開することができます。

  • ExpandSite 領域は、既定では折りたたまれ、トリガによって表示されます。トリガでは名前を使用して ExpandSite 要素を参照するため、ExpandSite 要素の変更または置き換えを行う場合は、IsExpanded トリガも変更する必要があります。

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る