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

[アーティクル]
10/11/2017

Ee371156.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,Expression.40).png

Microsoft Expression Blend には、Microsoft Silverlight コントロールが多数用意されています。信頼できる発行元からのコントロールをダウンロードすることもできます。

詳細については、「参照の追加によるカスタムコントロールのインポート」を参照してください。

見つかったコントロールが機能的には適しているけれども外観が希望に沿わない場合は、そのコントロールがテンプレートをサポートしていれば、コントロールのテンプレートを変更して外観を変えることができます。

作業の手間を省くには、まず、アートボードで描画ツールを使用したり、アートや他のアセットをインポートして、デザインに必要な要素をすべて揃えます。次に、[コントロールの作成] コマンドを使用して、オブジェクトをコントロール用のテンプレートに変換します。

テンプレートのバインド

コントロールに含まれるプロパティに、テンプレートのオブジェクトをバインドすることができます。これは、テンプレートのバインドと呼ばれます。テンプレートの一部をコントロールにバインドすることで、テンプレートのパラメーターを作成できます。たとえば、"この Rectangle は青です" という代りに、"この Rectangle はコントロールの Background と同じ色です" ということができます。つまり、異なる Background プロパティを持つコントロールにテンプレートを適用すると、その結果異なる色のテンプレートが作成されます。

プロパティのテンプレートバインドを行なうには、テンプレートでオブジェクトを選択して、[プロパティ] パネルの [詳細オプション] をクリックし、次に [テンプレートのバインド] からプロパティを選択します。

OpacityMask、Font、FontSize、LayoutTransform、および RenderTransform などのプロパティは、テンプレートにバインドする必要はありません。これらは、テンプレート内のオブジェクトに自動的に適用されます。

Content と Header プロパティ

一部のコントロールは Content プロパティ (Button、CheckBox、RadioButton など) または Header プロパティ (TabItem および MenuItem) を含んでいます。Content と Header プロパティを使用して、どのような種類のコンテンツでも表示することができます。

任意のコンテンツを表示するには

テキストだけでなく任意の種類のコンテンツを表示するには、コントロールの Content (または Header) プロパティにテンプレートバインドされた、Content (または Header) プロパティを持つ ContentPresenter をテンプレートに定義する必要があります。[コントロールの作成] を使用してアートワークからテンプレートを作成すると、Expression Blend により ContentPresenter がテンプレートに追加されます。コンテンツの表示に TextBlock を使用していた場合は、アートワークをコントロールに変換した後で、TextBlock を削除します。ContentPresenter が、以前は TextBlock で表示されていたコンテンツを表示するようになります。

テキストを表示するには

テキストのみを表示する場合は、ContentPresenter の代りに TextBlock を使用できます。TextBlock をテンプレートに含めて、TextBlock の Text プロパティを Button の Content (または Header) プロパティにテンプレートバインドします。[コントロールの作成] を使用してアートワークからテンプレートを作成する場合、コンテンツの表示に TextBlock を使用していた場合は、Expression Blend によりテンプレートに追加された ContentPresenter を削除します。テキストをコントロールの Content (または Header) プロパティに追加する際に、このスタイルが適用されていると、TextBlock がそのテキストを表示します。

ContentControl の作成

[コントロールの作成] を使用して TextBlock オブジェクトを含むアートワークから ContentControl (ボタンなど) のテンプレートを作成すると、Expression Blend により以下の操作が行なわれます。

テンプレートの TextBlock を ContentPresenter で置き換えます。
TextBlock の Layout プロパティを ContentPresenter にコピーします。
TextBlock の Typography プロパティをコントロールのスタイルにコピーします。
TextBlock の Text プロパティをコントロールの Content プロパティのインスタンスにコピーします。

TextBox の作成

[コントロールの作成] を使用して TextBlock オブジェクトを含むアートワークから TextBox のテンプレートを作成すると、Expression Blend により以下の操作が行なわれます。

テンプレートの TextBlock を ContentElement パーツを表す ScrollViewer で置き換えます。
TextBlock の Layout プロパティを ContentElement パーツにコピーします。
TextBlock の Typography プロパティを TextBox スタイルにコピーします。
TextBlock の Text プロパティを TextBox コントロールのインスタンスにコピーします。

表示状態

状態グループの表示状態は、相互排他的です。ただし、どのグループの状態も、ほかのグループの状態には依存しません。つまり、各グループの 1 つの状態は、競合を生じずに、いつでも適用できることを意味します。

オブジェクトのプロパティを同じグループ内の複数の状態において変更するのは一般的です。たとえば、Rectangle の Fill プロパティを、MouseOver、Pressed、Disabled の各状態において変更する場合があります。これは、CommonStates 状態グループの 1 つの状態が、同時に適用されているため問題なく動作します。ただし、特定のオブジェクトのプロパティを複数の状態グループにおいて変更すると、状態グループの非依存性に反する状況を生じ、複数の状態が同時に同一オブジェクトのプロパティの設定を試行するために競合が生じるようになります。Expression Blend は、状態の競合を検出すると、警告を表示します。

重要 :
各状態は、状態グループが違う場合でも、テンプレート内で一意の名前を持つ必要があります。

Normal の表示状態

各状態グループには、既定の状態があります。たとえば、CommonStates の場合は Normal、CheckedStates では Unchecked が既定の状態です。オブジェクトのプロパティを変更する際には、ベストプラクティスとして、既定の状態には変更を加えないようにします。チェックボックスを例とすると、Base では、チェックマークとチェックボックスの四角形は空 (非表示) となり、Checked ではチェックマークが表示され、Focused ではチェックボックスの四角形が表示されます。

Base は状態ではないことに注意してください。そのため、Base を対象として切り替え効果の定義や操作はできません。Base は状態ではないため、Base から MouseOver などへ切り替え効果を定義することはできません。Base は、テンプレートに状態が何も適用されていない基本形式を表します。切り替え効果を定義する際には、状態のみを対象とします。

独自のコントロールテンプレートを作成する場合は、各状態グループの Normal 状態を定義し、コントロールの読み込み時には既定として Normal 状態が読み込まれるようにします。Button などのコントロールが読み込み時に正常な状態にない場合は、切り替え効果 (Normal 状態から MouseOver 状態への切り替えなど) は実行されません。

次の方法で共有