データを表示するコントロールのスタイルを設定する
データは、データのアイテムをアートボードのオブジェクトにバインドすることにより表示します。データ アイテムは、どのようなプロパティにもバインドできます。たとえば、色を表す 16 進数値を四角形の Background プロパティにバインドしたり、データ アイテムのコレクションを [ListBox] オブジェクトの [ItemsSource ]プロパティにバインドしたりします。
データを表示するオブジェクトのスタイルを設定するには、オブジェクトのプロパティを変更します。オブジェクトがテンプレートを使用する場合は、オブジェクトに適用されたテンプレートの 1 つを変更します。
[プロパティ] パネルを使用したオブジェクトのプロパティの変更
アートボードでオブジェクトを選択すると、[プロパティ] パネルでプロパティの値を変更して、そのオブジェクトの外観などを変更することができます。
たとえば、[DataGrid] オブジェクトをデータにバインドしてから、そのオブジェクトの列見出しを変更します。
[DataGrid] オブジェクトの列見出しの変更
.png "Cc294682.a2cebe0b-dc3d-45d5-9a30-23639e4bef48(JA-JP,Expression.30).png")
さらに、[DataGrid] オブジェクトの [AlternatingRowBackground] プロパティを使用すると、1 行おきに付ける色を指定できます。
[DataGrid] オブジェクトの 1 行おきに付ける色の変更
.png "Cc294682.0547a4e7-d415-4589-99af-dbfdc369a793(JA-JP,Expression.30).png")
オブジェクトの変更の一般的な情報については、「オブジェクトおよびプロパティの使用」を参照してください。
個々のオブジェクトの詳細については、Windows Presentation Foundation のクラス ライブラリに関するトピック (「System.Windows.Controls Namespace」の下) およびMicrosoft Silverlight (「System.Windows.Controls Namespace」の下) を参照してください。
オブジェクトに適用されたテンプレートの 1 つの変更
オブジェクトがテンプレートを使用するコントロールの場合は、そのテンプレートを変更して、オブジェクトの外観や同じテンプレートを使用する他のオブジェクトすべての外観を変更できます。
コントロールの多くは、その部分ごとに異なるテンプレートを使用します。たとえば、[ListBox] コントロールは入れ子になった多数のテンプレートを使用します。これには、スクロール ビューアー、スクロール バー、スクロール バーのボタン、ページング ボタンなどがあります。
[ListBox] コントロールの入れ子されたテンプレート
.png "Cc294682.b8a37dc0-a65e-4fe1-8a9f-df485bb1bbae(JA-JP,Expression.30).png")
.png "Cc294682.095c13e8-6ed8-4572-9bd2-b2d6bdfdf199(JA-JP,Expression.30).png") |
[ListBox] コントロール。アイテムの一覧を含むコンテナーです。データ ソースのアイテムにバインドすることも、バｲンドせずに個別のオブジェクトを表示することもできます。 |
.png "Cc294682.e1a62fcf-2f5c-4263-95fe-a9bf97616b85(JA-JP,Expression.30).png") |
[ListBox] テンプレート内の [ScrollViewer] コントロール。 |
.png "Cc294682.b36987f6-e914-4b58-99f2-a76c47128837(JA-JP,Expression.30).png") |
[ListBox] コントロール内のバインドされていないアイテム。 |
.png "Cc294682.41999197-e26c-42b9-8039-58ce07f5b5ba(JA-JP,Expression.30).png") |
ScrollViewer テンプレート内にある縦の [ScrollViewer] コントロール。 |
.png "Cc294682.a5d608f2-bba2-48c5-8b15-2c115db86acc(JA-JP,Expression.30).png") |
ScrollBar テンプレート内にある縦の [Thumb] コントロール。 |
.png "Cc294682.15de085f-48f5-41dd-a286-e3dcb4cfd18b(JA-JP,Expression.30).png") |
ScrollBar テンプレート内にある縦の [RepeatButton] コントロール。[ScrollBar] コントロールの値を一度に大きく減らします。 |
.png "Cc294682.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(JA-JP,Expression.30).png") |
[ScrollBar] テンプレート内にある縦の [RepeatButton] コントロール。[ScrollBar] コントロールの値を少しずつ減らします。 |
また、[ListBox] コントロールには、オブジェクトの各行に表示するアイテムのスタイルを設定するデータ テンプレートもあります。データ テンプレートは、オブジェクトにバインドするアイテム特有のテンプレートです。たとえば、 [データ] パネルから文字列のデータ アイテムとイメージのデータ アイテムを [ListBox] にドラッグすると、データ テンプレートに、文字列とイメージ ファイルを表示する [TextBlock] が作成されます。これらのオブジェクトはデータ テンプレートでスタイルを設定します。
データにバインドされている [ListBox] オブジェクトのデータ テンプレート
.png "Cc294682.25738f24-f008-4283-9172-de0a0fbd81bf(JA-JP,Expression.30).png")
コントロールの外観を既定とはまったく違ったものにすることができます。たとえば、[ListBox[ オブジェクトの既定の外観は次のようになります。
既定のテンプレートを使った [ListBox] オブジェクト
.png "Cc294682.f3190de1-098e-4dc0-bc1d-4a44d091685f(JA-JP,Expression.30).png")
しかし、テンプレートを変更すると、次のように変えることができます (Microsoft Expression Blend に付属している ColorSwatchSL サンプルを使用した場合)。
ListBox オブジェクトの2 つの (ItemContainerStyle と ItemsPanel) を変更した場合
.png "Cc294682.0a581ba0-08e1-4116-91bf-d1309c645ae0(JA-JP,Expression.30).png")
オブジェクトに適用したテンプレートにアクセスするには、オブジェクトを右クリックするか、オブジェクトを選択してからアートボードの上端にある階層リンク バーを使用します。
階層リンク バーを使用してテンプレートを開く
.png "Cc294682.a7257528-6a90-47ac-8c31-ad3422395f38(JA-JP,Expression.30).png")
テンプレート内でも、テンプレートの外と同じようにして、オブジェクトの追加、削除、変更を行えます。アイテムを選択できる一覧を含むという [ListBox] コントロールの機能自体は変わりません。
データ テンプレートの変更例については、「DataGrid コントロールの使用」 および「 TreeView コントロールを使用する」を参照してください。
コントロールのスタイル設定の一般的な情報については、「オブジェクトのスタイル指定」を参照してください。
コントロールのパーツとテンプレートの詳細については、「一般的な Silverlight コントロールのスタイル処理のヒント」、または MSDN の Windows Presentation Foundation のクラス ライブラリに関するトピック (「System.Windows.Controls Namespace」の下) および Silverlight (「System.Windows.Controls Namespace」の下) を参照してください。
また、「Learn Expression Blend」で、コントロールのスタイル設定のチュートリアルとビデオを見ることもできます。