外観の概要

オブジェクトの外観の変更は、Microsoft Expression Blend で行う基本的な操作です。[プロパティ] パネルの [外観] および [ブラシ] にあるプロパティを使用して、選択したオブジェクトのストロークや塗りつぶしの色、不透明度を変更したり、表示と非表示を切り替えることができます。[外観] および [ブラシ] カテゴリのプロパティは、Expression Blend プロジェクトで選択したオブジェクトの種類に応じて、そのオブジェクトのコンテンツを動的に変更し、適切な表示属性を反映します。

外観を定義する一般的なプロパティ

多くの場合、オブジェクトの外観を変更する際には、特定のプロパティにブラシを適用します。次の表では、これらのプロパティについて説明します。

プロパティ	説明
Fill	シェイプやパスの内側に適用されるブラシを設定します。
Stroke	シェイプやパスのアウトライン (枠線) に適用されるブラシを設定します。
Background	オブジェクトの背景に適用されるブラシを設定します。このプロパティは、通常、Button コントロールや TextBlock コントロールなどの、テキストを表示するコントロールの背景に適用されます。
Foreground	オブジェクトの前景に適用されるブラシを設定します。このプロパティは、通常、Button や TextBlock などのコントロールに表示されるテキストに適用されます。
BorderBrush	特定コントロールの枠線に適用されるブラシを設定します。
Opacity	オブジェクト全体の不透明度を設定します。
Visibility	オブジェクトを実行時に表示するか非表示にするかを指定します。子オブジェクトも、親オブジェクトの Visibility プロパティの設定の影響を受けます。
OpacityMask	不透明度マスクとして使用するブラシを設定します。このブラシの色は無視され、その不透明度が適用先のオブジェクトに反映されます。不透明度マスクが不透明な場合、マスクの適用先オブジェクトも不透明になります。不透明度マスクが透明の場合は、マスクの適用先オブジェクトも透明になります。

先頭に戻る

ブラシ

ブラシは、アートボード上のオブジェクトの外観を設定するために使用されます。たとえば、下に示す最初のイメージのように、青の単色ブラシを使用して四角形の塗りつぶしを実行できます。単純な単色ブラシやグラデーション ブラシからより複雑なタイル ブラシまで、各種のブラシがあります。次の表では、Expression Blend で使用できるブラシについて説明します。また、[ブラシなし] タブを使用して、選択したプロパティからすべての色を削除することもできます。たとえば、四角形の輪郭を作成するには、四角形の Fill を [ブラシなし] に設定し、Stroke を [単色ブラシ] に設定します。

ブラシ	外観			説明
単色ブラシ				単色のブラシ。
線状グラデーション ブラシ				色の線状グラデーションのブラシ。
放射状グラデーション ブラシ				色の放射状グラデーションのブラシ。
イメージ ブラシ (WPF および Silverlight 2 のみ)				イメージから作成されたブラシ。左から右に、元のイメージ ブラシ、並べて表示したイメージ ブラシ、反転させたイメージ ブラシ。
描画ブラシ (WPF および Silverlight 2 のみ)				ベクタ描画から作成されたブラシ。左から右に、元の描画ブラシ、並べて表示した描画ブラシ、反転させた描画ブラシ。
表示ブラシ (WPF および Silverlight 2 のみ)				ボタンなどのコントロールから作成されたブラシ。左から右に、元のボタン、[並べて表示モード] が [Tile] に設定されているブラシ。表示ブラシの作成に使用されるコントロールは複雑であるため、表示ブラシを使用すると、実行中のアプリケーションのパフォーマンスが一時的に低下する場合があります。

先頭に戻る

ブラシ リソース

オブジェクトにブラシを作成したら、そのブラシをリソースに変換して他のオブジェクトに適用できます。

メモ :
リソースは、Microsoft Silverlight 1.0 ではサポートされていません。

ブラシ リソースは、単一のブラシ プロパティまたは色プロパティに限定されません。アートボード上の複数のオブジェクトを使用して、ブラシ リソースを作成できます。さらに、基になっているオブジェクトが実行時に変化すると、それに合わせて外観が実行時に更新される、VisualBrush (表示ブラシ) と呼ばれるブラシを作成することもできます。

作成したブラシをプロジェクト全体または他のプロジェクトで再利用できるように、ブラシのリソース ディクショナリを作成できます。

詳細については、「ブラシ リソースまたは色リソースの作成」および「描画ブラシ リソースの作成または変更」を参照してください。リソースについては、「リソースの概要」を参照してください。

先頭に戻る

色と色空間

Expression Blend には、[プロパティ] パネルの [ブラシ] の下にカラー エディタが組み込まれています。カラー エディタは、[リソース] パネルでブラシ リソースを変更する場合にも表示されます。カラー エディタには、次に示す 4 つの色空間と 16 進数モード (#AARRGGBB) があります。

• RGB   赤 (0 ～ 255)、緑 (0 ～ 255)、青 (0 ～ 255)

• HLS   色合い (360 度の色相環)、輝度 (0 ～ 100%)、鮮やかさ (0 ～ 100%)

• HSB   色合い (360 度の色相環)、鮮やかさ (0 ～ 100%)、明度 (0 ～ 100%)

• CMYK   シアン (0 ～ 100%)、マゼンタ (0 ～ 100%)、イエロー (0 ～ 100%)、ブラック (0 ～ 100%)

色空間を切り替えるには、現在の色空間で下線の付いた文字のいずれかをクリックし、別の色空間のポップアップ メニューを表示します。

先頭に戻る

スポイト ツールとペイント ツール

Expression Blend には、オブジェクト間で属性をコピーして適用するための専用ツールが 2 つあります。次のプロパティは、スポイト ツールとペイント ツールを操作してコピーまたは適用します。

• ブラシ   Foreground、Background、BorderBrush、Fill、Stroke、OpacityMask

• 外観   Opacity、StrokeThickness、StrokeMiterLimit、StrokeStartLineCap、StrokeEndLineCap、StrokeLineJoin、StrokeDashCap

• テキスト   FontFamily、FontSize、FontWeight、FontStyle、TextDecorations、LineHeight、TextIndent、TextAlignment

	スポイト ツール	別のオブジェクトの外観を、現在選択されている 1 つまたは複数のオブジェクトにコピーします。
	ペイント ツール	現在選択されている 1 つまたは複数のオブジェクトの外観を別のオブジェクトにコピーします。

[スポイト] ツールおよび [ペイント ツール] ツールの詳細については、「オブジェクトへの属性のコピーまたは適用」を参照してください。

[単色ブラシ ] または [グラデーション ブラシ]  でグラデーション境界を変更する場合は、カラー エディタ の右下隅に [スポイト]  が表示されます。このスポイトを選択すると、デスクトップのどこからでもカラー サンプルを取得し、選択したブラシにその色を適用できます。Esc キーを押せば、いつでもスポイトの操作をキャンセルできます。

先頭に戻る

グラデーション

複数の色を徐々に混ぜ合わせて滑らかな色のグラデーションを作成し、オブジェクトに適用してその外観に深みを与えることができます。このオブジェクトを背景として使用して、左側の単色が右側に向かって次第に白くフェードアウトしていくようにすることができます。これにより、普通の状態では平坦なオブジェクト上に明らかに区別できる 2 つの領域が生まれます。

[プロパティ] パネルの [ブラシ] で [線状グラデーション ブラシ] と [放射状グラデーション ブラシ] をクリックして、2 種類のグラデーション ブラシを切り替えることができます。

この 2 種類のグラデーション ブラシを使用して、グラデーション塗りつぶし、グラデーション ストローク、Foreground プロパティにグラデーションが指定されたテキスト、または Background プロパティを持つ任意の要素に適用できるグラデーション背景を作成できます。外観を定義するプロパティにグラデーションを適用すると、境界と呼ばれる小さなアイコン がグラデーション スライダに表示されます。各グラデーション境界の色は変更できます。また、グラデーション スライダ上をクリックするだけで、スライダにいくつでも境界を追加できます。境界が不要になった場合は、グラデーション スライダの下部から外側にドラッグして、簡単に削除できます (スライダの横または上部から外側にドラッグしても削除されません)。

グラデーション ブラシを使用するときは、いくつかのオプションも設定できます。グラデーション モードを [パディング]、[反転] (グラデーション塗りつぶしを反転)、または [繰り返し] (グラデーション塗りつぶしを繰り返し) に設定するには、カラー エディタの下部にある [オプション] ボタンをクリックします。これらのオプションは、[ブラシの変更] ツールを使用してブラシを変更するときに、線状と放射状の両方のグラデーションに適用されます。詳細については、この後の「Brush transform tool」を参照してください。

先頭に戻る

ブラシの変更ツール

オブジェクトに適用する塗りつぶし、ストローク、不透明度マスク、またはその他のブラシを変換するには、[プロパティ] パネルでブラシのプロパティを選択してから、ツールボックスの [ブラシの変更]  ツールを選択します。ブラシ変更矢印がアートボードに表示され、マウス ポインタで変更できるようになります。グラデーション ブラシを使用している場合、変更矢印の終点は、カラー バーのいずれか一方の端のグラデーション境界に対応しています。ブラシの変更ツールの動作は、次の方法で変更できます。

• Shift キーを押しながら端点をドラッグすると、移動が端点間の直線上に制限されます。

• Shift キーを押しながら矢印全体を移動すると、移動が X 平面または Y 平面に制限されます。

• Shift キーを押しながら端点を回転すると、15°間隔でスナップされます。

• Alt キーを押しながら端点をドラッグすると、両方の端点が同時に移動し、中心点の位置が保たれます。

次のイメージは、[Fill] プロパティのグラデーション ブラシにさまざまな変換を適用した後の四角形の外観を示すものです。

四角形の線状グラデーション ブラシに適用された変換

四角形の放射状グラデーション ブラシに適用された変換

必要に応じて、[プロパティ] パネルの [ブラシ] にある [オプション] ボタンをクリックすると表示されるプロパティを設定することができます。前のイメージでは、[パディング] オプションが選択されています。[反転] または [繰り返し] オプションを選択し、次に変換矢印をオブジェクトよりも短くすると、波形になって表示されます。

グラデーション ブラシ以外のブラシの種類を変換することができます。ブラシの変更の詳細については、「グラデーション ブラシまたはタイル ブラシの変更」を参照してください。

先頭に戻る

クリッピング

ブラシを変換するとき、オブジェクトの一部が切り取られ、境界ボックス外の部分が消えることがあります。切り取りの問題を解決するには、次の方法で行います。

• [プロパティ] パネルの [外観] で、ClipToBounds プロパティのチェック ボックスをオフにします。

• [プロパティ] パネルの [変換] で、[RenderTransform] カテゴリではなく、[LayoutTransform] カテゴリのプロパティを使用します。これは、表示ブラシを変換するときに特に有効です。

先頭に戻る

ストローク

ストロークとは、オブジェクトの枠線のことです。オブジェクトのストロークに適用されているブラシ (単色、グラデーション、またはタイル)、不透明度、幅、マイター リミット、および角の結合や線端のスタイルを変更できます。オブジェクトのストロークは、そのオブジェクトに塗りつぶしが適用されているかどうかにかかわらず、必ず塗りつぶしの上に適用されます。オブジェクトのストロークを変更するには、[プロパティ] パネルの [ブラシ] の下のリストで [Stroke] を選択する必要があります。

• ストロークの幅   オブジェクトのストロークの幅はピクセル単位 (デバイスに依存しない単位で、約 1/96 インチ) で指定します。0 を最小値として、該当するシェイプの幅または高さの半分までの値を指定できます。通常、ストロークの太さがシェイプの幅と高さの半分に達すると、ストロークで塗りつぶし部分全体が覆われます。ストロークの幅の値は、[プロパティ] パネルの [外観] にある StrokeThickness プロパティで設定できます。

• 角の結合   四角形などの角が尖ったオブジェクトについては、各頂点におけるストロークの外観を、マイター結合 、ラウンド結合 、べベル結合 の 3 つの結合スタイルのいずれかを適用して変更できます。角の結合スタイルは、[プロパティ] パネルの [外観] にある StrokeLineJoin プロパティで設定できます。

  

• マイター リミット マイター結合の角を伸ばせる長さを制御します。この値を超えると、自動的に面取りされてベベル結合になります。マイター リミットは、[プロパティ] パネルの [外観] にある StrokeMiterLimit プロパティで設定できます。次の図は、StrokeThickness が 40 で、StrokeMiterLimit が 1 、2.2 、および 4 の 3 つの角を示しています。角度のサイズとストロークの太さにより、マイター リミットの視覚効果が決まります。

  

• 線端   線端が他の線端とつながっていない直線などのパスについては、ストロークの各線端の形状を、切り落とし線端 、ラウンド線端 、スクエア線端 、鋭角線端 の 4 つの線端スタイルのいずれかを適用して変更できます。線端スタイルは、[プロパティ] パネルの [外観] にある StrokeEndLineCap プロパティと StrokeStartLineCap プロパティで設定できます。

  

先頭に戻る

不透明度と表示

オブジェクトの不透明度を下げると、逆に透明度が増し、その背後にあるオブジェクトが透けて見えるようになります。不透明度は、オブジェクト、グラデーション、または不透明度マスクのすべての透明度情報を格納するアルファ チャネルによって制御されます。次の表では、オブジェクトの不透明度を変更するために選択できる 3 つの方法について説明します。

方法	結果
Opacity   オブジェクトのすべての表示属性を含め、オブジェクト全体の透明度を変更します。右の図では、不透明度の値が 60 パーセントに設定されています。
Transparency   オブジェクトのすべての属性を変更するのではなく、塗りつぶしやストロークなど、オブジェクトの個別のブラシ属性のアルファ値 (A) を単独で若干高く設定できます。右の図では、楕円の塗りつぶしのアルファ値が 50 パーセントに設定されているため、塗りつぶし部の透明度がストローク部よりも高くなっています。楕円のストロークのアルファ値は 100 パーセントのままです。
Visibility   状況に応じてオブジェクトの表示と非表示を切り替えることができます。これは、特にアニメーションでアートボードからオブジェクトを完全に削除したくない場合に役立ちます。右の図では、青い塗りつぶしと黒く太いストロークが適用され、同じ表内の前の 2 つのイメージの一部を成している左側のオブジェクトが、Hidden (非表示) に設定されています。

先頭に戻る

ビットマップ効果

ビットマップ効果とは、簡単なピクセル処理を施すことです。

メモ :
ビットマップ効果は、Silverlight 1.0 または Silverlight 2 ではサポートされていません。

メモ :
Windows Presentation Foundation (WPF) アプリケーション (Expression Blend を使用して作成されたアプリケーションなど) では、ピクセルとはデバイスに依存しないピクセルまたはデバイスに依存しない単位であり、画面解像度を 1 インチあたり 96 ドットに設定したモニタでの 1 ピクセルのサイズに相当します。1 単位は、モニタのサイズまたは画面解像度に関係なく約 1/96 インチです。

次の表では、Expression Blend で使用できる各ビットマップ効果について説明します。ビットマップ効果は、四角形やボタンなどのオブジェクトを選択すると、[プロパティ] パネルの [外観] で使用できます。各ビットマップ効果は、Radius や Blur ビットマップ効果などのように、サブプロパティを公開します。ビットマップ効果を (および、それらの効果を適用するオブジェクト) のレンダリングに必要なピクセル処理は、実行時に行われます。このため、大きなビジュアル オブジェクトやアニメーションへのビットマップ効果の適用は、アプリケーションのパフォーマンスの低下を招く可能性があるため避けてください。ビットマップ効果を設定する方法については、「オブジェクトへのビットマップ効果の追加」を参照してください。

効果	外観	説明
なし		ビットマップ効果が適用されていないボタン。
ぼかし		焦点の外れたレンズでオブジェクトを見ているような効果を生み出します。
光彩 (外側)		オブジェクトの外側を光り輝いているように見せます。
ドロップ シャドウ		オブジェクトの背後に影を付けます。
ベベル		指定した曲線に従って、イメージの表面から浮き出すように斜角面を付けます。
エンボス		光の当たり具合を操作することで、凹凸があるような視覚効果を生むバンプ マッピングを行います。

先頭に戻る