.png "This page applies to WPF projects only")
コンボ ボックスは、ドロップダウン リスト形式のアイテム コントロールです。Microsoft Expression Blend でコンボ ボックスにコンテンツを配置するには、コンボ ボックスをダブルクリックして、その中に要素 ([SimpleComboBoxItem] など) を描画します。または、[オブジェクトとタイムライン] パネルでコンボ ボックスを右クリックし、[SimpleComboBoxItem の追加] をクリックしてコレクションに各アイテムを追加するか、[ItemsSource をデータにバインド] をクリックして、データソースから [ComboBoxItem] 要素のコレクションを生成します。アートボードにコンボ ボックスを展開した状態で表示するには、[オブジェクトとタイムライン] パネルでコンボ ボックスまたはコンボ ボックス アイテムを右クリックして、[ComboBox の展開] をクリックします。
アートボード ビュー : 2 つのアイテムが追加された [SimpleComboBox] コントロール
.png "Cc295332.25309636-8547-4686-a578-9aa914190f01(JA-JP,Expression.30).png")
コントロール テンプレートの構成要素
SimpleComboBox コントロール テンプレートは、次の要素から構成されています。
Grid パネル : コンボ ボックス内に複数の子要素を保持するために使用します。また、[Grid] パネルを使用すると、テンプレートに複数の要素を簡単に追加できるので便利です。
ContentSite という名前の ContentPresenter 要素 : グリッドに含まれる子要素で、選択したアイテムを表示するために使用されます。
PART_EditableTextBox という名前のテキスト ボックス : グリッドに含まれる子要素で、これによりユーザーがコンボ ボックス内のテキストを編集できるようになります。PART_EditableTextBox という名前は、クラスがこのテキスト ボックスを認識する際に使用するため、変更しないでください。このテキスト ボックスは既定では最小化された状態で維持され、このコントロール テンプレートが適用されたコンボ ボックスで [IsEditable] が [True] に設定されると表示されます。
Popup トグル ボタン コントロール : コンボ ボックスの展開パーツの作成に使用されます。[Popup] コントロールはその他のコントロールを基準として配置され、最前面に描画されます。このコントロールは一部の組み込みアニメーションもサポートします。
[Popup] コントロール内に含まれる [Grid] コントロール : アイテム リストをスクロールできるようにする [ScrollViewer] が含まれています。[ScrollViewer] の [StackPanel] 内に、各アイテムが配置されます。[ComboBox] コントロールの子要素が [StackPanel] 内に適切に配置されるように、[StackPanel] の [IsItemsHost] プロパティは [True] に設定されます。アイテムの表示方法を変更する場合は、[オブジェクトとタイムライン] パネルで [DropDown] グリッドを右クリックし、[レイアウトの種類の変更] を選択して、[UniformGrid] などの別のパネルを選択します。
SimpleComboBoxItem コントロール テンプレートは、次の要素から構成されています。
Grid パネル : コンボ ボックス アイテム内に複数の子要素を保持するために使用します。また、[Grid] パネルを使用すると、テンプレートに複数の要素を簡単に追加できるので便利です。
Border 要素 : [BorderThickness] プロパティが含まれています。このプロパティは、このテンプレートの適用先ボタン コントロールの [BorderThickness] プロパティにテンプレート バインドできます。
ContentPresenter 要素 : [Grid] 要素内に含まれ、このテンプレートが適用されるアイテム コントロールの [Content] プロパティに自動的にバインドされます。
オブジェクト ビュー : [SimpleComboBox] コントロール (左) および [SimpleComboBoxItem] コントロール (右) の基本パーツ (テンプレート)
.png "Cc295332.e3201103-2125-43d3-b077-6aae64f53947(JA-JP,Expression.30).png")
.png "Cc295332.4532cb8d-690e-49f7-9c8d-cc2fcb0109ae(JA-JP,Expression.30).png")
使用されるプロパティ トリガー
コントロール テンプレートのプロパティ トリガーは、プロパティの変更にコントロールを対応させるために使用されます。[トリガー] パネルのアイテムをクリックすると、トリガーがアクティブになると変更されるプロパティを表示できます。たとえば、コンボ ボックス用のテンプレートでは、[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 トリガーを維持または変更できます。