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

  • [アーティクル]

データは、データのアイテムをアートボードのオブジェクトにバインドすることにより表示します。データ アイテムは、どのようなプロパティにもバインドできます。たとえば、色の 16 進数値を表す文字列値を rectangle の Background プロパティにバインドしたり、データ アイテムのコレクションを ListBox の ItemsSource プロパティにバインドしたりします。

データを表示するオブジェクトのスタイルを設定するには、オブジェクトのプロパティを変更します。オブジェクトがテンプレートを使用する場合は、オブジェクトに適用されたテンプレートの 1 つを変更します。

[プロパティ] パネルを使用したオブジェクトのプロパティの変更

アートボードでオブジェクトを選択すると、[プロパティ] パネルでプロパティの値を変更して、そのオブジェクトの外観などを変更することができます。

たとえば、DataGrid オブジェクトをデータにバインドしてから、そのオブジェクトの列見出しを変更します。

[DataGrid] オブジェクトの列見出しの変更

Cc294682.a2cebe0b-dc3d-45d5-9a30-23639e4bef48(ja-jp,Expression.40).png

さらに、DataGrid オブジェクトの [AlternatingRowBackground] プロパティを使用すると、1 行おきに付ける色を指定できます。

[DataGrid] オブジェクトの 1 行おきに付ける色の変更

Cc294682.0547a4e7-d415-4589-99af-dbfdc369a793(ja-jp,Expression.40).png

オブジェクトの変更の一般的な情報については、「オブジェクトおよびプロパティの使用」を参照してください。

個々のオブジェクトの詳細については、Windows Presentation Foundation のクラス ライブラリに関するトピック (「System.Windows.Controls Namespace Cc294682.xtlink_newWindow(ja-jp,Expression.40).png」の下) およびMicrosoft Silverlight (「System.Windows.Controls Namespace Cc294682.xtlink_newWindow(ja-jp,Expression.40).png」の下) を参照してください。

オブジェクトに適用されたテンプレートの 1 つの変更

オブジェクトがテンプレートを使用するコントロールの場合は、そのテンプレートを変更して、オブジェクトの外観や同じテンプレートを使用する他のオブジェクトすべての外観を変更できます。

コントロールの多くは、その部分ごとに異なるテンプレートを使用します。たとえば、ListBox コントロールは入れ子になった多数のテンプレートを使用して、スクロール ビューアー、スクロール バー、スクロール バーのボタン、ページング ボタンなど、各 ListBox のスタイルを設定します。

[ListBox] コントロールの入れ子されたテンプレート

Cc294682.b8a37dc0-a65e-4fe1-8a9f-df485bb1bbae(ja-jp,Expression.40).png

Cc294682.095c13e8-6ed8-4572-9bd2-b2d6bdfdf199(ja-jp,Expression.40).png

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

ListBox テンプレート内の ScrollViewer コントロール。
Cc294682.b36987f6-e914-4b58-99f2-a76c47128837(ja-jp,Expression.40).png

ListBox コントロール内のバインドされていないアイテム。
Cc294682.41999197-e26c-42b9-8039-58ce07f5b5ba(ja-jp,Expression.40).png

ScrollViewer テンプレート内の垂直の ScrollBar コントロール。
Cc294682.a5d608f2-bba2-48c5-8b15-2c115db86acc(ja-jp,Expression.40).png

ScrollBar テンプレート内の垂直の Thumb コントロール。
Cc294682.15de085f-48f5-41dd-a286-e3dcb4cfd18b(ja-jp,Expression.40).png

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

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

また、ListBox コントロールには、オブジェクトの各行に表示するアイテムのスタイルを設定するデータ テンプレートもあります。データ テンプレートは、オブジェクトにバインドするアイテム特有のテンプレートです。たとえば、 [データ] パネルから文字列のデータ アイテムとイメージのデータ アイテムを ListBox にドラッグすると、データ テンプレートに、文字列を表示する TextBlock とイメージ ファイルを表示する Image が作成されます。これらのオブジェクトはデータ テンプレートでスタイルを設定します。

データにバインドされている [ListBox] オブジェクトのデータ テンプレート

Cc294682.25738f24-f008-4283-9172-de0a0fbd81bf(ja-jp,Expression.40).png

コントロールの外観を既定とはまったく違ったものにすることができます。たとえば、ListBox オブジェクトの既定の外観は次のようになります。

既定のテンプレートを使った [ListBox] オブジェクト

Cc294682.f3190de1-098e-4dc0-bc1d-4a44d091685f(ja-jp,Expression.40).png

ただし、テンプレートを変更して、ListBox オブジェクトを次のように変えることができます (Microsoft Expression Blend に付属している ColorSwatchSL サンプルを使用した場合)。

ListBox オブジェクトの2 つの (ItemContainerStyle と ItemsPanel) を変更した場合

Cc294682.0a581ba0-08e1-4116-91bf-d1309c645ae0(ja-jp,Expression.40).png

オブジェクトに適用したテンプレートにアクセスするには、オブジェクトを右クリックするか、オブジェクトを選択してからアートボードの上端にある階層リンク バーを使用します。

階層リンク バーを使用してテンプレートを開く

Cc294682.a7257528-6a90-47ac-8c31-ad3422395f38(ja-jp,Expression.40).png

テンプレート内でも、テンプレートの外と同じようにして、オブジェクトの追加、削除、変更を行えます。ListBox コントロールの機能自体は変わらず、選択可能な 1 つ以上のアイテムからなる一覧を含みます。

データ テンプレートの変更例については、「DataGrid コントロールの使用」 および「 TreeView コントロールを使用する」を参照してください。

コントロールのスタイル設定の一般的な情報については、「オブジェクトのスタイル指定」を参照してください。

コントロールのパーツとテンプレートの詳細については、「一般的な Silverlight コントロールのスタイル処理のヒント」、または MSDN の Windows Presentation Foundation のクラス ライブラリに関するトピック (「System.Windows.Controls Namespace Cc294682.xtlink_newWindow(ja-jp,Expression.40).png」の下) および Silverlight (「System.Windows.Controls Namespace Cc294682.xtlink_newWindow(ja-jp,Expression.40).png」の下) を参照してください。

また、「Learn Expression Blend  Cc294682.xtlink_newWindow(ja-jp,Expression.40).png」で、コントロールのスタイル設定のチュートリアルとビデオを見ることもできます。

関連項目

概念

ListBox コントロールのスタイル設定のヒント
SimpleListBox および SimpleListBoxItem
オブジェクトのスタイル指定

Copyright ©2011 by Microsoft Corporation. All rights reserved.