ComboBox コントロールのスタイル設定のヒント

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

ComboBox テンプレートのパーツ

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

パーツ名	オブジェクトの種類
ContentPresenter	ContentPresenter
ContentPresenterBorder	FrameworkElement
DropDownToggle	ToggleButton
Popup	Popup

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

コンボ ボックスのヒント

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

ContentPresenter パーツ

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

ContentPresenterBorder パーツ

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

DropDownToggle パーツ

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

Popup パーツ

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 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン をクリックするか、[状態] パネルで [ベース] を選択します。2 つの状態がアクティブになったときのコントロールの外観を変更するには、1 つのグループに属する状態のプレビューを固定しておき、別のグループに属する状態を変更します。

テンプレートのバインド

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

オブジェクトを [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 アイテムをクリックします。選択したいずれかのアイテムを右クリックし、[切り取り] をクリックします。[スコープを <オブジェクト名> に戻す] をクリックして、[貼り付け] をクリックします。[プロパティ] パネルの [レイアウト] カテゴリで、[Width] の横にある [詳細オプション] をクリックして、[リセット] をクリックします。この手順を [Height] に対して繰り返します。

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

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

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

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

   • [左]   5

   • [右]   5

   • [上]   1

   • [下]   0

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

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

12. [パス] を右クリックして、[切り取り] をクリックします。[スコープを <オブジェクト名> に戻す] をクリックして、[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. [スコープを <オブジェクト名> に戻す] をクリックします。[プロパティ] パネルの [レイアウト] カテゴリで [Height] を「20」に設定します。

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

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

参照

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

関連項目

概念

一般的な Silverlight コントロールのスタイル処理のヒント
SimpleComboBox および SimpleComboBoxItem
テンプレートを使用するコントロールのスタイルの設定

Copyright ©2011 by Microsoft Corporation. All rights reserved.