Blend で色、ブラシ、およびマスクを設定する

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

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

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

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

ブラシ

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

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

ブラシ リソース

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

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

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

詳細については、「Blend でブラシ リソースまたは色リソースを作成する」および「Blend でブラシを使ってオブジェクトの外観を変更する」を参照してください。

リソースについては、「Blend での再利用可能リソースの作成」を参照してください。

色と色空間

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%)

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

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

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 つまたは複数のオブジェクトの外観を別のオブジェクトにコピーします。

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

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

グラデーション

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

グラデーションを作成するには、[プロパティ] パネルの [ブラシ] で [グラデーション ブラシ]  をクリックします。 [エディター] で [線状グラデーション]  と [放射状グラデーション]  をクリックすれば、2 種類のグラデーション ブラシを切り替えることができます。 この 2 種類のグラデーション ブラシを使用して、グラデーション塗りつぶし、グラデーション ストローク、Foreground プロパティにグラデーションを適用したテキスト、または Background プロパティを持つオブジェクト用のグラデーション背景を作成できます。

[グラデーション ブラシ] を選択すると、[エディター] のスポイトがグラデーションのスポイト  に変わります。 [グラデーションのスポイト] を選択した状態で Blend 内またはデスクトップ上の色の上にカーソルを置くと、その色が、選択しているカラー分岐点の色でプレビュー表示されます。 グラデーションのスポイトを使用して色をクリックすると、その色が、選択しているグラデーション分岐点に適用されます。 また、[グラデーションのスポイト] を Blend 内またはデスクトップ上の既存のグラデーションの上にドラッグして、そのグラデーションを既存のオブジェクトに適用できます。

グラデーションのスポイトを既存のグラデーション上でドラッグすると、そのグラデーションが Blend 内で複製されます。

グラデーションをオブジェクトに適用すると、グラデーション分岐点のアイコン  が表示されます。 各グラデーション境界の色は変更できます。また、グラデーション スライダー上をクリックするだけで、スライダーにいくつでも境界を追加できます。 境界が不要になった場合は、グラデーション スライダーの下部から外側にドラッグして、簡単に削除できます (スライダーの横または上部から外側にドラッグしても削除されません)。 また、選択しているグラデーション分岐点のオフセット値を変更することもできます。これを行うには、グラデーション バーに沿って分岐点をドラッグするか、[選択されたグラデーション分岐点のオフセット] フィールドの値を変更します。

グラデーションを反転させるには、[グラデーションの分岐点の反転]  をクリックします。 [前のグラデーションの分岐点を選択] と [次のグラデーションの分岐点を選択] の矢印  を使用して、前後のグラデーション分岐点に移動できます。

グラデーションを複数のオブジェクトに適用するには、グラデーションを適用するオブジェクトをすべて選択してからグラデーションを適用します。

[詳細プロパティの表示]  をクリックすると、[プロパティ] パネルで直接変更できる追加のプロパティが表示されます。

線状グラデーション ブラシの場合は、[プロパティ] パネルで次のプロパティを変更できます。

• StartPoint   線状グラデーションの始点の座標を指定します。

• EndPoint   線状グラデーションの終点の座標を指定します。

• MappingMode   グラデーション ブラシを絶対位置に配置するのか、境界ボックスからの相対位置に配置するのかを指定します。

• SpreadMethod   グラデーションを境界ボックス内でどのように開始または終了するかを指定します。 Pad は、グラデーションの一番外側にある分岐点の色をオブジェクトの端まで伸ばします。 Reflect は、グラデーション塗りつぶしを反転します。 Repeat は、グラデーション塗りつぶしを繰り返します。

• Opacity   グラデーション ブラシの不透明度を指定します。

放射状グラデーション ブラシの場合は、[プロパティ] パネルで次のプロパティを変更できます。

• GradientOrigin   グラデーションの始点の座標を指定します。

• Center   放射状グラデーションの一番外側の円の中心点を指定します。

• RadiusX   放射状グラデーションの一番外側の円の水平方向の半径を指定します。

• RadiusY   放射状グラデーションの一番外側の円の垂直方向の半径を指定します。

• MappingMode   グラデーション ブラシを絶対位置に配置するのか、境界ボックスからの相対位置に配置するのかを指定します。

• SpreadMethod   グラデーションを境界ボックス内でどのように開始または終了するかを指定します。 Pad は、グラデーションの一番外側にある分岐点の色をオブジェクトの端まで伸ばします。 Reflect は、グラデーション塗りつぶしを反転します。 Repeat は、グラデーション塗りつぶしを繰り返します。

• Opacity   グラデーション ブラシの不透明度を指定します。

どちらのグラデーション ブラシも、[プロパティ] パネルで RelativeTransform プロパティを変更できます。[RelativeTransform] ボックスで次のタブをクリックして、関連する値を変更します。

• 平行移動

• 回転

• 倍率

• 傾斜

• 反転

また、[グラデーション] ツール  や [ブラシの変更] ツール  を使用すれば、アートボード上で線状グラデーション ブラシと放射状グラデーション ブラシの両方を変更できます。 詳細については、後述の「グラデーション ツール」および「ブラシの変更ツール」を参照してください。

グラデーション ツール

オブジェクトに適用されているグラデーション ブラシの塗りつぶし、ストローク、不透明度マスクをアートボード上で直接変更するには、[プロパティ] パネルでブラシのプロパティを選択してから、[ツール] パネルの [グラデーション] ツール を選択します。

ヒント

アートボード上でオブジェクトを選択した状態で G キーを押すと、[グラデーション] ツールが選択されます。

アートボード上に表示される矢印を使用してグラデーションを変更できます。 矢印の始点と終点は、グラデーションの両端の分岐点に対応しています。 グラデーションの分岐点は、青い輪郭の円 (内側はグラデーションと同じ色) で示されます。

線状グラデーション矢印

放射状グラデーション矢印

グラデーションの分岐点をクリックするとその分岐点が選択され、青い輪郭線が太くなります。 グラデーションの分岐点をダブルクリックするとカラー ピッカーが表示され、選択しているグラデーションの分岐点の色を変更できます。

グラデーションの分岐点は、矢印をクリックすることで、いつでも追加できます。 グラデーションの分岐点を削除するには、その分岐点の円をクリックして、矢印の外側にドラッグします。

グラデーションのプロパティは次の方法でも変更できます。

• Shift キーを押しながら始点または終点をドラッグすると、始点と終点の方向のみに動きが制限されます。

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

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

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

ブラシの変更ツール

[ブラシの変更] ツール  を使うと、ブラシ リソースの RelativeTransform プロパティ (線状グラデーションと放射状グラデーションの両方の RelativeTransform など) を変更できます。 [ブラシの変更] ツールは、[ブラシ] パネルで選択されているブラシを変更し、アートボード上で選択されているオブジェトに適用します。

オブジェクトに適用されているブラシの変換をアートボード上で直接変更するには、[プロパティ] パネルでブラシのプロパティを選択してから、[ツール] パネルの [ブラシの変更]  を選択します。

ヒント

アートボード上でオブジェクトを選択した状態で B キーを押すと、[ブラシの変更] ツールが選択されます。

オブジェクトの周囲には、ガイド (青い境界線) が表示されます。 [ブラシの変更] ツールでオブジェクトを選択した状態で、次のようにしてオブジェクトを変更できます。

• ブラシを移動するには、オブジェクト内でドラッグします。 この操作は、[プロパティ] パネルの [RelativeTransform] ボックスの [変換] タブの設定に相当します。

• ブラシを回転させるには、オブジェクトの輪郭線の角の外側にポインターを置いて、ポインターが回転ハンドル  に変化したらドラッグします。 この操作は、[プロパティ] パネルの [RelativeTransform] ボックスの [回転] タブの設定に相当します。

• タイル ブラシまたは放射状グラデーション ブラシのサイズを変更するには、オブジェクトの中点ハンドルまたは角のハンドルにポインターを置き、ドラッグします。 この操作は、[プロパティ] パネルの [RelativeTransform] ボックスの [拡大縮小] タブの設定に相当します。

• ブラシを傾けるには、中点ハンドルの外側にポインターを置いて、ポインターが傾斜ハンドル  に変化したらドラッグします。 この操作は、[プロパティ] パネルの [RelativeTransform] ボックスの [傾斜] タブの設定に相当します。

変換を反転させることもできます。 [プロパティ] パネルで、[ブラシ] カテゴリの [詳細プロパティの表示]  をクリックします。 [RelativeTransform] ボックスで [反転] タブをクリックし、[X 軸に沿って反転] または [Y 軸に沿って反転] をクリックします。

クリッピング

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

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

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

ストローク

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

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

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

  

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

  

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

  

• StrokeDashArray   StrokeDashArray は、破線パターンが適用されたストロークです。 StrokeDashCap と StrokeDashOffset は、StrokeDashArray に適用される専用のプロパティです。

  次のイメージは、StrokeDashArray の値を 5 4 (最初の値はダッシュの長さ、2 番目の値は空白の長さ)、StrokeDashCap の値を Round、StrokeDashOffset (破線パターン内のダッシュの始点間の距離) を 2 に設定した場合の四角形です。

不透明度と表示

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

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

参照

概念

Blend でエフェクトを適用する