次の方法で共有

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

  • [アーティクル]

JJ170183.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,VS.120).png

組み込みの ComboBox コントロール テンプレートを使用して、カスタム ComboBox テンプレートを作成できます。 Popup コントロールには、ユーザーが一覧からアイテムを選択できるようにする ListBox コントロールが含まれています。 既定の ComboBox コントロールは、次のように表示されます。

JJ170183.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(ja-jp,VS.120).png

ComboBox テンプレートのパーツ

ComboBox テンプレートには、以下のパーツが含まれています。

JJ170183.69fada84-8d77-4b89-a14c-18fcbd2da5a9(ja-jp,VS.120).png

パーツ名

オブジェクトの種類

JJ170183.B1_1(ja-jp,VS.120).png ContentPresenter

ContentPresenter

JJ170183.B1_2(ja-jp,VS.120).png ContentPresenterBorder

FrameworkElement

JJ170183.B1_3(ja-jp,VS.120).png DropDownToggle

ToggleButton

JJ170183.B1_4(ja-jp,VS.120).png Popup

Popup

ヒント

テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。

コンボ ボックスのヒント

コンボ ボックスは、アイテムの一覧を含むポップアップ ウィンドウ (4)、現在選択されているアイテムが表示される領域 (1)、およびポップアップ ウィンドウを開いたり閉じたりするために使用するトグル ボタン (3) で構成されます。

JJ170183.collapse_all(ja-jp,VS.120).gifContentPresenter パーツ

ContentPresenter パーツは必須で、この目的は現在のアイテムを表示することです。 テンプレートの ContentPresenter 内部にコンテンツを配置すると、選択されているアイテムがない場合に、そのコンテンツが表示されます。

JJ170183.collapse_all(ja-jp,VS.120).gifContentPresenterBorder パーツ

IsHitTestVisible が true の場合、ContentPresenterBorder パーツをクリックして、ポップアップ ウィンドウを開いたり閉じたりすることができます。ポップアップ ウィンドウは、ContentPresenterBorder (2) の左下隅に表示されます。 ContentPresenterBorder パーツには、レイアウト パネルをお勧めします。

JJ170183.collapse_all(ja-jp,VS.120).gifDropDownToggle パーツ

DropDownToggle パーツは必須ではありませんが、ポップアップを開いたり閉じたりするためのもう 1 つの方法として使用できます。

JJ170183.collapse_all(ja-jp,VS.120).gifPopup パーツ

Popup パーツは必須です。 これは、アイテムが表示されるパーツです。 ItemsPresenter は、アイテムを表示する場所を示すために使用されます。 ItemsPresenter は、ScrollViewer パーツの中に配置する必要があります。 Popup は、テンプレートのルート オブジェクトの境界に相対的に開かれます。

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

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

状態名

説明

Normal

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

MouseOver

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

Disabled

IsEnabled プロパティが False に設定されたときの ComboBox コントロールの状態。

ComboBox コントロールは、[FocusStates] 状態グループに属する次の 3 つの状態のいずれかになります。

状態名

説明

Unfocused

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

Focused

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

FocusedDropDown

キーボードでフォーカスされていて、ComboBox コントロールが展開されているときの ComboBox の状態。

ComboBox コントロールは、[ValidationStates] 状態グループに属する次の 3 つの状態のいずれかになります。

状態名

説明

Valid

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

InvalidUnfocused

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

InvalidFocused

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

ヒント

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

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

テンプレートのバインド

Background、BorderBrush、Foreground、および BorderThickness プロパティは、テンプレートにバインドすることができます。 詳細については、「Blend でオブジェクト プロパティをテンプレートに反映させる」を参照してください。

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

次の図は、コンボ ボックスのデザイン見本図（カンプ）です。

ComboBox

注意

上の図はまだ ComboBox コントロールではなく、ComboBox コントロールを表すアートワークであることに注意してください。

この例では、次の手順 2 で XAML コードを使用します。

  1. 新しい Microsoft Silverlight プロジェクトを開きます。 [コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 次のコードをコピーし、新しいプロジェクトで、手順 1 で見つけたコードの後に貼り付けます。

    <Grid Height="70" Width="120">
<Rectangle 
   x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" 
   Height="20" VerticalAlignment="Top" />
<Rectangle 
   Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" 
   Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
<Path 
   Fill="White" Stretch="Fill" Width="8" Height="5" 
   Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" 
   HorizontalAlignment="Right" VerticalAlignment="Top" />
<Rectangle 
   x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" 
   Margin="0,20,0,0" />
<TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
<TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>
</Grid>

  3. Grid の終了タグ (</Grid>) を、上記で張り付けたコードの最後に追加します。

  4. [オブジェクトとタイムライン] パネルで [Grid] を右クリックして、[コントロールの作成] をクリックします。 [コントロールの作成] ダイアログ ボックスで [ComboBox]、[OK] の順にクリックします。

  5. [オブジェクトとテンプレート] パネルで Ctrl キーを押しながら、両方の TextBlock アイテムをクリックします。 選択したいずれかのアイテムを右クリックし、[切り取り] をクリックします。 [スコープを <オブジェクト名> に戻す] JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,VS.120).png をクリックして、[貼り付け] をクリックします。 [プロパティ] パネルの [レイアウト] カテゴリで、[Width] の横にある [詳細オプション] をクリックして、[リセット] をクリックします。 この手順を [Height] に対して繰り返します。

  6. [オブジェクトとタイムライン] パネルの [ComboBox] を右クリックし、[テンプレートの編集]、[現在のテンプレートの編集] をクリックします。

  7. [オブジェクトとタイムライン] パネルで contentarea を右クリックして、[グループ化設定]、[Grid] の順にクリックします。

  8. [Grid] を右クリックして、[ComboBox パーツの作成]、[ContentPresenterBorder] の順にクリックします。

  9. [パーツ] パネルで [ContentPresenter] をダブルクリックします。 [プロパティ] パネルの [レイアウト] カテゴリで、[Margin] を次のように設定します。

    • [左]   5

    • [右]   5

    • [上]   1

    • [下]   0

  10. [オブジェクトとテンプレート] パネルで Ctrl キーを押しながら、[四角形] アイテムをクリックして、[パス] をクリックします。 選択範囲を右クリックし、[グループ化設定]、[Grid] の順にクリックします。

  11. [オブジェクトとタイムライン] パネルで [Grid] を右クリックして、[ComboBox パーツの作成]、[DropDownToggle] の順にクリックします。 [OK] をクリックします。

  12. [パス] を右クリックして、[切り取り] をクリックします。 [スコープを <オブジェクト名> に戻す] JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,VS.120).png をクリックして、[DropDownToggle] をクリックし、Ctrl + V キーを押して貼り付けます。

  13. [オブジェクトとタイムライン] パネルで [Grid] を選択します。 [パーツ] パネルで [Popup] をダブルクリックします。

  14. [ツール] パネルの [Grid] をダブルクリックします。 [プロパティ] パネルの [レイアウト] カテゴリで、[Width] の横にある [詳細オプション] をクリックして、[リセット] をクリックします。 この手順を [Height] に対して繰り返します。

  15. [オブジェクトとタイムライン] パネルで [popupbackground] をクリックして、前の手順で作成したグリッドにドラッグします。 [プロパティ] パネルの [レイアウト] カテゴリで、[Width] の横にある [詳細オプション] をクリックして、[リセット] をクリックします。 この手順を [Height]、[HorizontalAlignment]、[VerticalAlignment]、および [Margin] に対して繰り返します。

  16. [オブジェクトとタイムライン] パネルで、[ScrollViewer] オブジェクトを新しいグリッドにドラッグします。 [プロパティ] パネルの [レイアウト] カテゴリで、[Width] の横にある [詳細オプション] をクリックして、[リセット] をクリックします。 この手順を [Height]、[HorizontalAlignment]、[VerticalAlignment]、および [Margin] に対して繰り返します。

  17. [スコープを <オブジェクト名> に戻す] JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,VS.120).png をクリックします。 [プロパティ] パネルの [レイアウト] カテゴリで [Height] を「20」に設定します。

  18. Ctrl + Shift + B キーを押してプロジェクトをビルドした後に F5 キーを押してプロジェクトをテストします。

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

参照

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

参照

概念

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

SimpleComboBox および SimpleComboBoxItem (Blend での WPF サポート)

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