SimpleComboBox および SimpleComboBoxItem

コンボ ボックスは、ドロップダウン リスト形式のアイテム コントロールです。 Microsoft Expression Blend でコンボ ボックスにコンテンツを配置するには、コンボ ボックスをダブルクリックして、その中にオブジェクト (SimpleComboBoxItem など) を描画します。 または、[オブジェクトとタイムライン] パネルでコンボ ボックスを右クリックし、[SimpleComboBoxItem の追加] をクリックしてコレクションに各アイテムを追加するか、[ItemsSource をデータにバインド] をクリックして、データソースから ComboBoxItem オブジェクトのコレクションを生成します。 アートボードにコンボ ボックスを展開した状態で表示するには、[オブジェクトとタイムライン] パネルでコンボ ボックスまたはコンボ ボックス アイテムを右クリックして、[ComboBox の展開] をクリックします。

アートボード上の 2 つのアイテムが追加された [SimpleComboBox] コントロール

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

SimpleComboBox コントロール テンプレートは、次の要素で構成されています。

• Grid パネル: コンボ ボックス内に複数の子要素を保持するために使用します。 また、Grid を使用すると、アプリケーション ユーザー インターフェイス (UI) デザイナーは複数のオブジェクトを簡単にテンプレートに追加できます。

• ContentSite という名前の ContentPresenter 要素: Grid に含まれる子要素で、選択したアイテムを表示するために使用されます。

• PART_EditableTextBox という名前のテキスト ボックス: Grid に含まれる子要素で、これによりユーザーがコンボ ボックス内のテキストを編集できるようになります。 PART_EditableTextBox という名前は、クラスがこのテキスト ボックスを認識する際に使用するため、変更しないでください。 このテキスト ボックスは既定では最小化された状態で維持され、このコントロール テンプレートが適用されたコンボ ボックスで IsEditable が True に設定されると表示されます。

• Popup トグル ボタン コントロール: コンボ ボックスの展開パーツの作成に使用されます。 [Popup] コントロールはその他のコントロールを基準として配置され、最前面に描画されます。 このコントロールは一部の組み込みアニメーションもサポートします。

• [Popup] コントロール内に含まれる Grid コントロール: アイテム リストをスクロールできるようにする ScrollViewer が含まれています。 StackPanel の ScrollViewer 内に、各アイテムが配置されます。 [ComboBox] コントロールの子オブジェクトが StackPanel 内に適切に配置されるように、StackPanel の IsItemsHost プロパティは True に設定されます。 アイテムの表示方法を変更する場合は、[オブジェクトとタイムライン] パネルで [DropDown] グリッドを右クリックし、[レイアウトの種類の変更] を選択して、UniformGrid などの別のパネルを選択します。

SimpleComboBoxItem コントロール テンプレートは、次の要素で構成されています。

• A Grid パネル: コンボ ボックス アイテム内に複数の子要素を保持するために使用します。 また、Grid を使用すると、デザイナーは複数のオブジェクトを簡単にテンプレートに追加できます。

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

• ContentPresenter 要素: Grid オブジェクト内に含まれ、このテンプレートが適用されるアイテム コントロールの Content プロパティに自動的にバインドされます。

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

コントロール テンプレートのプロパティ トリガーは、プロパティの変更にコントロールを対応させるために使用されます。 [トリガー] パネルのアイテムをクリックすると、トリガーがアクティブになると変更されるプロパティを表示できます。 たとえば、コンボ ボックス用のテンプレートでは、HasItems プロパティが False のときは、コンボ ボックスをクリックしたときに空のドロップダウン ウィンドウが表示されるように、DropDownBorder オブジェクトの高さの最小値が 95 に設定されます。 この最小値を0 に設定すると、極小のドロップダウン ウィンドウが表示されます。 コンボ ボックス アイテム用のテンプレートでは、IsHighlighted プロパティが True のときに、Border オブジェクトの Background プロパティが変更され、コンボ ボックス内で選択されたアイテムを示します。

使用されるブラシ

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

• DropDownBorder オブジェクトの Background プロパティは、WindowBackgroundBrush を使用して設定します。

• DropDownBorder オブジェクトの BorderBrush プロパティは、SolidBorderBrush を使用して設定します。

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

• SimpleComboBoxItem テンプレートを使用するアイテムが SimpleComboBox に設定されている場合、アイテムの Background プロパティは SelectedBackgroundBrush (アイテムが選択されている場合) を使用して設定され、Foreground プロパティは DisabledForegroundBrush (IsEnabled が False の場合) を使用して設定されます。

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

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

• コンボ ボックスの展開動作は、ToggleButton の IsChecked プロパティと Popup の IsOpen プロパティの両方を、このコントロール テンプレートが適用されるコンボ ボックスの IsDropDownOpen プロパティにバインドすることによって設定されます。 ToggleButton または [Popup] を編集する場合は、このテンプレート バインドを維持する必要があります。

• ToggleButton オブジェクトは、ToggleButtonControlTemplate という別のテンプレートを使用します。 これを変更するには、ToggleButton オブジェクトを右クリックし、[テンプレートの編集] をポイントして、[現在のテンプレートの編集] をクリックします。

• SimpleComboBoxItem テンプレートを編集するには、[リソース] パネルで SimpleComboBoxItem スタイルの横にある [リソースの編集] ボタンをクリックします。 スタイルの編集モードの [オブジェクトとタイムライン] パネルで [Style]を右クリックし、[テンプレートの編集] をポイントして、[現在のテンプレートの編集] をクリックします。 SimpleComboBoxItem テンプレートを変更する場合、IsHighlighted トリガーを維持または変更できます。

関連項目

タスク

試してみよう: SimpleComboBox の展開ボタンの外観のカスタマイズ

Copyright ©2011 by Microsoft Corporation. All rights reserved.