ComboBox コントロールのスタイル処理のヒント

  • [アーティクル]

Ee341409.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(JA-JP,Expression.30).png

[ComboBox] コントロールは、編集不可能なテキスト ボックスと [Popup] コントロールを組み合わせたオブジェクトを表します。[Popup] コントロールには、ユーザーが一覧からアイテムを選択できるようにする [ListBox] コントロールが含まれています。

すべてのコントロールと同様、[ComboBox] コントロール ([Popup] コントロール、[ListBox] コントロール、および [ComboBox] オブジェクトに含まれる各 [ComboBoxItem] コントロール) を変更して、既定の外観とは異なる外観にすることができます。既定では、[ComboBox] コントロールは次のように見えます。

Ee341409.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(JA-JP,Expression.30).png

[ComboBox] コントロールのプロパティ

[ComboBox] コントロールの選択済みアイテムを設定するには、[プロパティ] パネルの [共通プロパティ] パネルの [SelectedIndex] プロパティを設定します。このプロパティを -1 に設定すると、アイテムが何も選択されていない [ComboBox] オブジェクトが表示されます。0 に設定すると、一番上のアイテムが選択された状態の [ComboBox] オブジェクトが表示されます。

[ComboBox] コントロールにアイテムを追加するには、[ComboBoxItem] オブジェクトを手動で追加するか、[ComboBox] オブジェクトにデータのコレクションをバインドしてアイテムが自動的に表示されるようします。

詳細については、「データへのオブジェクトのバインド」および「サンプル データの作成」を参照してください。

ComboBox テンプレートのパーツ

[ComboBox] コントロールでは、ComboBox テンプレートという 1 つのテンプレートを使って、ドロップダウン ボックス、ドロップダウン矢印、ポップアップ ウィンドウの外観を定義します。. このテンプレートの各パーツによって、テンプレートが適用される [ComboBox] オブジェクトの外観と動作が決まります。

Ee341409.alert_tip(JA-JP,Expression.30).gifヒント :

[ComboBox] コントロールに含めるアイテムのスタイルを設定するには、別のテンプレートを変更する必要があります。たとえば、[ComboBox] コントロールをデータにバインドした場合に、含まれるアイテムのスタイルを設定するには、生成されたアイテムのテンプレート (データ テンプレート) を使用します。[ComboBox] コントロールをデータにバインドしない場合は、含まれるアイテムに適用されるテンプレートはありません。代わりに、[ComboBoxItem] テンプレートなど、アイテム自体のテンプレートを変更します。

[ComboBox] コントロールの見栄えをよくするために他のオブジェクトをテンプレートに入れることはできますが、次の表にあるパーツは、コントラクトで定義されている動作しか行えません。

テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。[オブジェクトとタイムライン] パネルのオブジェクトの横に表示される Ee341409.6cf58c39-edba-4a0e-acbc-1da272f9a387(JA-JP,Expression.30).png アイコンは、そのオブジェクトが [パーツ] パネルでパーツの役割を果たしていること示します。

Ee341409.5fdb8c23-16c9-48df-a89b-12652543402e(JA-JP,Expression.30).pngEe341409.69fada84-8d77-4b89-a14c-18fcbd2da5a9(JA-JP,Expression.30).png

パーツ名

オブジェクトの種類

説明

Ee341409.25182a96-9a69-478a-9cfe-5b360e6a9bea(JA-JP,Expression.30).png ContentPresenter

ContentPresenter

[ComboBox] コントロールが展開されていない場合に、現在選択されているアイテムを表示するオブジェクト。

これは、必須のパーツです。

Ee341409.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(JA-JP,Expression.30).png ContentPresenterBorder

FrameworkElement

[ComboBox] コントロールの一番上の部分を含むレイアウト パネル。

これは、必須のパーツです。

Ee341409.f0c1ff71-7814-42ba-806b-7ea92d616e69(JA-JP,Expression.30).png DropDownToggle

ToggleButton

ボタンがクリックされたときに [ComboBox] コントロールを展開するボタン。既定では、矢印を表す [Path] オブジェクトですが、イメージに変更することができます。

Ee341409.eb6fad93-f17e-4f62-a926-8c8651862891(JA-JP,Expression.30).png Popup

Popup

[ComboBox] コントロールのコンテンツを表示する [Popup] オブジェクト。

これは、必須のパーツです。

[ComboBox] コントロールの状態

既定では、[ComboBox[ コントロールは、次の表にある CommonStates 状態グループの 4 つの状態のいずれかになります。これらの状態は、[ComboBox] テンプレートを変更するときに、[状態] パネルで見ることができます。

状態名

説明

Normal

[ComboBox] コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。

MouseOver

ユーザーが [ComboBox] コントロールの上にポインターを動かしたときの状態。

Disabled

[ComboBox] コントロールの [IsChecked] プロパティを [False] に設定したときの状態。

[ComboBox] コントロールは、次の CheckStates 状態グループにある 3 つの状態の 1 つになることができます。

状態名

説明

Unfocused

[ComboBox] コントロールがキーボードでフォーカスされていないときの状態。

Focused

[ComboBox] コントロールがキーボードでフォーカスされていないときの状態。たとえば、アプリケーション内でユーザーが Tab キーを押してフォーカスを切り替えていき、[ComboBox] コントロールにフォーカスが移った場合が相当します。

FocusedDropDown

[ComboBox] コントロールがキーボードでフォーカスされていないときの状態。

[ComboBox] コントロールは、次の ValidationStates 状態グループにある 3 つの状態の 1 つになることができます。

状態名

説明

Valid

[ComboBox] コントロールが有効な状態。

InvalidUnfocused

[ComboBox] コントロールが無効で、キーボードでフォーカスされていないときの状態。

InvalidFocused

[ComboBox] コントロールが無効で、キーボードでフォーカスされているときの状態。
Ee341409.alert_tip(JA-JP,Expression.30).gifヒント :

状態グループは、コントロールの表示状態を論理的に分類したものです。1 つのグループに属する複数の状態を同時に表示することはできません。たとえば、CommonStates グループには、ユーザーがマウスなどの入力デバイスで行う操作に関係のある状態が含まれています。1 つのグループ内で一度に表示できる状態は 1 つだけですが、別々のグループに属する状態を同時に表示することはできます。

状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン Ee341409.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(JA-JP,Expression.30).png をクリックするか、[状態] パネルで [ベース] を選択します。2 つの状態がアクティブになったときのコントロールの外観を変更するには、1 つのグループに属する状態のプレビューを固定しておき、別のグループに属する状態を変更します。

オブジェクトを [ComboBox] コントロールに変換するには

[ComboBox] コントロールのテンプレートを変更するには、次のいずれかの操作を行います。

  • アートボードに [ComboBox] Ee341409.b174a511-dd12-4a45-a986-034de7693de9(JA-JP,Expression.30).png を描いてから、既定のテンプレートのコピーを作成します。

    詳細については、「テンプレートの作成または変更」を参照してください。

  • [ComboBox] コントロールにするオブジェクトを描くかアートをインポートして、その外観をデザインしてから、[コントロールの作成] コマンドを使用します。

[コントロールの作成] コマンドを使用する場合は、次の手順に従って、ComboBox テンプレートに必要なオブジェクトをすべて作成します。

  1. [ComboBox] コントロールの外観を定義するすべてのオブジェクトをグループにして、[Grid] コントロールに配置します。

  2. 新しい [Grid] コントロールを選択して、[ツール] メニューの [コントロールの作成] をクリックします。

  3. 表示されるダイアログ ボックスで、[ComboBox] を選択してテンプレートに名前を付け、テンプレートの保存場所を選択します。

    保存場所については、「リソースの作成」を参照してください。

  4. [OK] をクリックすると、Microsoft Expression Blend がテンプレート編集モードになり、[ComboBox] コントロールを構成しているオブジェクトが表示されます。このモードで、テンプレートの変更を続けます。たとえば、オブジェクトの追加や変更を行ったり、[状態] パネルで状態を選択して、この状態のテンプレートの外観を変更したりできます。

  5. 元のオブジェクトのグループに [TextBlock] オブジェクト Ee341409.42165963-00f7-4a33-abcd-b0849edebada(JA-JP,Expression.30).png が含まれていた場合は、この [TextBlock] オブジェクトが ComboBox コントロール テンプレートの [ContentPresenter] オブジェクト Ee341409.51a0c06c-d801-4133-8caf-cf1856a8dfc4(JA-JP,Expression.30).png に変換されます。これで、[ComboBox] オブジェクトにテキストが表示されるようになります。元のグループに TextBlock オブジェクトが含まれていなかった場合は、[ContentPresenter] オブジェクトが自動的にテンプレートに追加されます。

    [ContentPresenter] オブジェクトをまだテンプレートの正しいパーツに割り当てていない場合は、[ContentPresenter] オブジェクトを右クリックして、[ComboBox パーツの作成] をポイントし、[ContentPresenter] をクリックします。

    [ContentPresenter] オブジェクト内部のその他のオブジェクトを、現在選択されたアイテムがない場合でも [ComboBox] コントロールに表示したい場合は、それらのオブジェクトを追加または移動します。

  6. [ComboBox] コントールのドロップダウン矢印としてオブジェクトまたはアートワークを使用する場合は、次の操作を行います。

    1. 使用するオブジェクトまたはアートワークをグループにしてレイアウト パネルに配置します。

    2. そのレイアウト パネルを右クリックします。

    3. [ComboBox パーツの作成] をポイントします。

    4. [DropDownToggle] をクリックします。

      オブジェクトが [ToggleButton] オブジェクトに置き換えられます。[ToggleButton] オブジェクトに適用するスタイルやテンプレートを作成するときに、元のオブジェクトが使われます。

    5. [パーツの作成] ダイアログ ボックスで、作成する ToggleButton スタイルの名前を入力します。

    6. スタイルを保存する場所を選択し、[OK] をクリックします。

      新しい [ToggleButton]オブジェクトのテンプレート編集モードのまま、必要な変更を加えます。たとえば、[ToggleButton] オブジェクトにテキストが表示されないように [ContentPresenter] オブジェクトを削除したり、[状態] パネルで状態を選択して、各状態の [ToggleButton] オブジェクトの外観を変更したりします。

    7. [ComboBox] のテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルの [上へスコープ] Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックするか、アートボードの上端にある階層リンク バーの [DropDownToggle] をクリックします。

    Ee341409.alert_note(JA-JP,Expression.30).gifメモ :

    [DropDownToggle] パーツはオプションです。これは、[ContentPresenterBorder] でも [ComboBox] コントロール アイテムの一覧を開くことができ、このパーツの方がクリックできる面が広いからです。

  7. [Popup] パーツは、[ComboBox] コントロールのアイテムを表示します。通常は、[ItemsPresenter] オブジェクトを使用してアイテムの一覧を表示し、[ItemsPresenter] オブジェクトはスクロール機能用の ScrollViewer コントロールの内部に表示します。[Popup] パーツを作成するには、次の操作を行います。

    1. [オブジェクトとタイムライン] パネルで、ルート レイアウト パネルを選択します。

    2. [パーツ] パネルで、[Popup] パーツをダブルクリックして、テンプレートのルートに [Popup] オブジェクトを作成します。

    3. 新しい [Popup] オブジェクト内に、新しい [ItemsPresenter] コントロールを描画します。

    4. [選択内容] ツール Ee341409.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png を使用して、ポップアップのサイズと場所を変更します。

  8. ContentPresenterBorder パーツを作成するには、[ContentPresenter] とオプションの [ToggleButton] を選択し、[オブジェクト] メニューの [グループ化設定] をポイントし、レイアウト パネルを選択します。新しいレイアウト パネルオブジェクトを右クリックして、[ComboBox パーツの作成] をポイントし、[ContentPresenterBorder] をクリックします。

  9. 必要に応じて、このテンプレートを使うことになる [ComboBox] オブジェクトの次のプロパティと、オブジェクトのブラシ プロパティをバインドします。

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。

  10. テンプレート編集モードを終了するには、アートボードの上端にある階層リンク バーの [ComboBox] をクリックするか、[オブジェクトとタイムライン] パネルの [上へスコープ] Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックします。

    新しく作成した ComboBox テンプレートを別の [ComboBox] オブジェクトに適用する方法については、「リソースの適用と削除」を参照してください。

参照

Microsoft Silverlight の [ComboBox] コントロールのプロパティとイベントの詳細については、MSDN の 「Silverlight Control Gallery (Silverlight コントロール ギャラリー)」 を参照してください。

関連項目

概念

一般的な Silverlight コントロールのスタイル処理のヒント

SimpleComboBox および SimpleComboBoxItem

テンプレートをサポートするコントロールのスタイル処理