SimpleComboBox および SimpleComboBoxItem

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

アートボードの表示 : 2 つのアイテムが追加された SimpleComboBox コントロール

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

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

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

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

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

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

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

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

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

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

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

  オブジェクト表示 : SimpleComboBox コントロール (左) および SimpleComboBoxItem コントロール (右) の基本パーツ (テンプレート)

  

先頭に戻る

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

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

先頭に戻る

使用されるブラシ

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

• DropDownBorder 要素の Background プロパティは、WindowBackgroundBrush を使用して設定されます。

• DropDownBorder 要素の BorderBrush プロパティは、SolidBorderBrush を使用して設定されます。

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

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

先頭に戻る

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

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

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

• ToggleButton 要素は、ToggleButtonControlTemplate という別のテンプレートを使用します。これを変更するには、ToggleButton 要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] または [コピーの編集] をクリックします。

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

先頭に戻る

関連項目

概念

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