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

  • [アーティクル]

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

ListBox コントロールはアイテムのコレクションを表します。[ListBox] コントロールをデータ ソースにバインドしてデータを表示するか、バインドされていないアイテムを表示できます。[ListBox] コントロールはアイテム コントロールなので、テキストや他のコントロールを含むアイテムを表示することができます。

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

Ee371162.3cc2d3af-6781-4937-b068-c3448a56406d(JA-JP,Expression.30).png

ListBox コントロールのプロパティ

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

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

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

ListBox テンプレートの各パーツ

[ListBox] コントロールは外観を定義するために 「ListBox テンプレート」 というテンプレートを 1 つ使用します。このテンプレートの各パーツによって、テンプレートが適用される [ListBox] オブジェクトの外観と動作が決まります。

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

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

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

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

パーツ名

オブジェクトの種類

説明

ScrollViewer

ScrollViewer

スクロール可能なウィンドウにアイテムを表示するオブジェクト。

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

ListBox テンプレート内の [ScrollViewer] オブジェクトには、変更されたテンプレートを適用することができます。また、[ScrollViewer] オブジェクトの [ScrollBar] オブジェクトにも、変更されたテンプレートを適用することができます。これを行うと、テンプレートが次のように入れ子になります。

Ee371162.b8a37dc0-a65e-4fe1-8a9f-df485bb1bbae(JA-JP,Expression.30).png

Ee371162.095c13e8-6ed8-4572-9bd2-b2d6bdfdf199(JA-JP,Expression.30).png

[ListBox] コントロール。アイテムの一覧を含むコンテナーです。データ ソースのアイテムにバインドすることも、バｲンドせずに個別のオブジェクトを表示することもできます。
Ee371162.e1a62fcf-2f5c-4263-95fe-a9bf97616b85(JA-JP,Expression.30).png

[ListBox] テンプレート内の [ScrollViewer] コントロール。
Ee371162.b36987f6-e914-4b58-99f2-a76c47128837(JA-JP,Expression.30).png

[ListBox] コントロール内のバインドされていないアイテム。
Ee371162.41999197-e26c-42b9-8039-58ce07f5b5ba(JA-JP,Expression.30).png

ScrollViewer テンプレート内にある縦の [ScrollViewer] コントロール。
Ee371162.a5d608f2-bba2-48c5-8b15-2c115db86acc(JA-JP,Expression.30).png

ScrollBar テンプレート内にある縦の [Thumb] コントロール。
Ee371162.15de085f-48f5-41dd-a286-e3dcb4cfd18b(JA-JP,Expression.30).png

ScrollBar テンプレート内にある縦の [RepeatButton] コントロール。[ScrollBar] コントロールの値を一度に大きく減らします。
Ee371162.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(JA-JP,Expression.30).png

ScrollBar テンプレート内にある縦の [RepeatButton] コントロール。[ScrollBar] コントロールの値を少しずつ減らします。

[ScrollViewer] オブジェクトと [ScrollBar] オブジェクトの詳細については、「ScrollViewer コントロールのスタイル処理のヒント」および「ScrollBar コントロールのスタイル処理のヒント」を参照してください。

ListBox コントロールの状態

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

状態名

説明

Valid

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

InvalidUnfocused

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

InvalidFocused

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

状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン Ee371162.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(JA-JP,Expression.30).png をクリックするか、[状態] パネルで [ベース] を選択します。

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

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

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

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

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

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

  1. [ListBox] コントロールの外観を定義するすべてのオブジェクトをグループにして、Grid コントロールに配置します。テンプレートのパーツにならないものも含めます。

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

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

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

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

  5. ScrollViewer パーツを作成するには、[パーツ] パネルの [ScrollViewer] をダブルクリックします。新しい [ScrollViewer] オブジェクトを選択した状態で、その中に [ItemsPresenter] コントロールを描画します。[プロパティ] パネルの [選択内容] ツール Ee371162.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png を使用するか、[プロパティ] パネルの [レイアウト] でプロパティを設定して、テンプレート内にあるこれらのオブジェクトのサイズを変更します。

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

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

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

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

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

参照

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

関連項目

タスク

DataGrid コントロールの使用

TreeView コントロールを使用する

概念

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

SimpleListBox および SimpleListBoxItem

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

データを表示するコントロールのスタイルを設定する