ブラシを使用して背景、前景、およびアウトラインを描画する

2025-06-10

Brush オブジェクトを使用して、XAML 図形、テキスト、コントロールの内部とアウトラインを描画し、アプリケーション UI に表示します。

重要な API: Brush クラス

ブラシの概要

アプリキャンバスに表示される コントロール の図形、テキスト、または一部を描画するには、図形の Fill プロパティ、または コントロール の Background プロパティと Foreground プロパティを Brush 値に設定します。

ブラシの種類は次のとおりです。

単色ブラシ

SolidColorBrush は、赤や青などの 1 つの カラーで領域を塗りつぶします。これは最も基本的なブラシです。 XAML では、SolidColorBrush と指定する色を定義する 3 つの方法があります。定義済みの色名、16 進数の色値、またはプロパティ要素の構文です。

定義済みの色名

Yellow や Magentaなど、定義済みの色名を使用できます。使用可能な名前付き色は 256 個あります。 XAML パーサーは、適切なカラーチャネルを使用して、色名を Color 構造体に変換します。 256 の名前付き色は、カスケードスタイルシートのレベル 3 (CSS3) 仕様の X11 の色名に基づいているため、Web 開発やデザインの経験がある場合は、この名前付き色の一覧を既に理解している可能性があります。

Rectangle の Fill プロパティを、赤定義済みの色に設定する例を次に示します。

<Rectangle Width="100" Height="100" Fill="Red" />

は、SolidColorBrush をレンダリングしたものです。

矩形に適用された SolidColorBrush

XAML ではなくコードを使用して SolidColorBrush を定義する場合、各名前付き色は、Colors クラスの静的プロパティ値として使用できます。たとえば、SolidColorBrush の Color 値を宣言して名前付き色 "Orchid" を表すには、Color 値を Colors.Orchid静的な値に設定します。

16 進数の色の値

16 進数の書式指定文字列を使用して、SolidColorBrushの 8 ビットアルファチャネルで正確な 24 ビットカラー値を宣言できます。 0 ~ F の範囲の 2 文字で各コンポーネント値が定義され、16 進文字列のコンポーネント値の順序はアルファチャネル (不透明度)、赤チャネル、緑チャネル、青チャネル (ARGB) です。たとえば、16 進数の値 "#FFFF0000" は完全に不透明な赤を定義します (alpha="FF"、red="FF"、green="00"、blue="00")。

次の XAML の例では、Rectangle の Fill プロパティを 16 進数の値 "#FFFF0000" に設定し、Colors.Redの名前付き色使用した場合と同じ結果を得られます。

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

プロパティ要素の構文

プロパティ要素の構文を使用して、SolidColorBrushを定義できます。この構文は前のメソッドよりも詳細ですが、Opacityなど、要素に追加のプロパティ値を指定できます。プロパティ要素の構文を含む XAML 構文の詳細については、XAML の概要のと XAML 構文ガイドを参照してください。

前の例では、作成されるブラシは、最も一般的なケースで UI 定義をシンプルに保つために役立つ意図的な XAML 言語の短縮形の一部として、暗黙的かつ自動的に作成されます。次の例では、Rectangle を作成し、Rectangle.Fill プロパティの要素値として SolidColorBrush を明示的に作成します。 SolidColorBrush の色は Blue に設定され、の不透明度 は 0.5 に設定されます。

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

線形グラデーションブラシ

LinearGradientBrush は、線に沿って定義されたグラデーションで領域を塗りつぶします。この線は、グラデーション軸と呼ばれます。 GradientStop オブジェクトを使用し、でグラデーションの色とその軸に沿った位置を指定します。既定では、グラデーション軸はブラシが塗りつぶす領域の左上隅から右下隅まで引かれ、結果として斜めのシェーディングが生じます。

GradientStop は、グラデーションブラシの基本的な構成要素です。グラデーションの分岐点は、ブラシが塗りつぶされている領域に適用されるときに、ブラシの色がグラデーション軸に沿って オフセット にあるものを指定します。

グラデーションの分岐点の Color プロパティは、グラデーションの分岐点の色を指定します。色を設定するには、定義済みの色名を使用するか、ARGB 値 16 進数を指定します。

GradientStop の Offset プロパティは、グラデーション軸に沿った各 GradientStop の位置を指定します。 オフセット は、0 から 1 の範囲の 倍精度浮動小数点 です。 オフセット が 0 の場合、グラデーション軸の先頭に GradientStop が配置されます。つまり、StartPointの近くに配置されます。 オフセット を 1 に設定すると、GradientStop が EndPointに配置されます。少なくとも、便利な LinearGradientBrush には 2 つの GradientStop 値が必要です。各 GradientStop は、異なる色を指定し、0 から 1 の間で異なる オフセット を持つ必要があります。

次の使用例は、4 色の線形グラデーションを作成し、それを使用して 四角形を描画します。

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

グラデーションの分岐点間の各ポイントの色は、2 つの境界グラデーションの分岐点で指定された色の組み合わせとして線形補間されます。次の図は、前の例のグラデーションの分岐点を強調表示しています。円はグラデーションの分岐点の位置を示し、破線はグラデーション軸を示します。

図の左上隅から始まり、図の右下隅に達するまで右下に傾斜するグラデーションの分岐点 1 から 4 を示す図。

2つの境界グラデーションストップによって指定された色の組み合わせ

の StartPoint プロパティと EndPoint プロパティを、(0,0) および (1,1) の初期の既定値とは異なる値に設定することで、グラデーションの停止点の位置を変更できます。 StartPoint と endPoint 座標値を変更することで、水平方向または垂直方向のグラデーションを作成したり、グラデーションの方向を反転させたり、グラデーションの広がりを縮小して、塗り分け領域全体よりも小さい範囲に適用したりできます。グラデーションを縮小するには、StartPoint または EndPoint の値を 0 から 1 の間の値に設定します。たとえば、ブラシの左半分でフェードがすべて行われ、右側が最後の色で塗りつぶされる水平グラデーションを作成したい場合は、GradientStop 色を使用します。このとき、の (0,0) との (0.5,0) を指定してください。

ツールを使用してグラデーションを作成する

線形グラデーションのしくみを確認したら、Visual Studio または Blend を使用して、これらのグラデーションを簡単に作成できます。グラデーションを作成するには、デザインサーフェイスまたは XAML ビューでグラデーションを適用するオブジェクトを選択します。 ブラシ を展開し、線形グラデーション タブを選択します。

Visual Studio で線形グラデーションを作成する

Visual Studio で線形グラデーションを作成する

グラデーションの分岐点の色を変更し、下部のバーを使用して位置をスライドできるようになりました。バーをクリックして新しいグラデーションの分岐点を追加し、バーからストップをドラッグして削除することもできます (次のスクリーンショットを参照)。

グラデーションの分岐点を制御するプロパティウィンドウの下部にあるバー

グラデーションスライダー設定

放射状グラデーションブラシ

RadialGradientBrush は、Center、RadiusX、RadiusY プロパティによって定義された楕円内に描画されます。グラデーションの色は、楕円の中心から始まり、半径で終了します。

放射状グラデーションの色は、グラデーションストップ コレクションプロパティに追加されたカラーストップによって定義されます。各グラデーションの分岐点は、グラデーションに沿った色とオフセットを指定します。

グラデーションの原点は既定で中央に設定され、GradientOrigin プロパティを使用してオフセットできます。

MappingMode では、中心、RadiusX、RadiusY、および GradientOrigin が相対座標または絶対座標を表すかどうかを定義します。

MappingMode がに設定されている場合、3 つのプロパティの X 値と Y 値は要素の境界を基準として扱われます。ここで、は左上を表し、は Center、RadiusX、RadiusY プロパティの要素境界の右下を表し、は GradientOrigin プロパティの中心を表します。

MappingMode がに設定されている場合、3 つのプロパティの X 値と Y 値は、要素の境界内の絶対座標として扱われます。

次の使用例は、4 色の線形グラデーションを作成し、それを使用して 四角形を描画します。

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

グラデーションの分岐点間の各ポイントの色は、2 つの境界グラデーションの分岐点で指定された色の組み合わせとして放射状に補間されます。次の図は、前の例のグラデーションの分岐点を強調表示しています。

放射状グラデーションのスクリーンショット。

グラデーションの分岐点

画像ブラシ

ImageBrush は、イメージファイルソースから描画するイメージを使用して、領域をイメージで塗りつぶします。 ImageSource プロパティは、読み込むイメージのパスを使用して設定します。通常、イメージソースは、アプリのリソースの一部である Content 項目から取得されます。

既定では、ImageBrush はイメージを引き伸ばして、塗りつぶす領域を完全に埋めます。塗りつぶす領域の縦横比がイメージと異なる場合、イメージが歪む可能性があります。この動作を変更するには、Stretch プロパティを既定値の Fill から変更し、UniformToFill、Uniform、または Noneに設定します。

次の例では、ImageBrush を作成し、ImageSource を licorice.jpgという名前のイメージに設定します。このイメージは、アプリにリソースとして含める必要があります。 ImageBrush は、楕円図形によって定義された領域を塗りつぶします。

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

レンダリングされた ImageBrush です。

レンダリングされた ImageBrush

ImageBrush と Image は、どちらも Uniform Resource Identifier (URI) によってイメージソースファイルを参照します。この場合、イメージソースファイルではいくつかの可能なイメージ形式が使用されます。これらのイメージソースファイルは URI として指定されます。イメージソースの指定、使用可能なイメージ形式の指定、アプリでのパッケージ化の詳細については、「Image と ImageBrush」を参照してください。

ブラシとテキスト

ブラシを使用して、テキスト要素にレンダリング特性を適用することもできます。たとえば、TextBlock の Foreground プロパティは、Brushを受け取ります。ここで説明するブラシをテキストに適用できます。テキストに適用されるブラシについては注意を払ってください。背景にブラシを使用する際、背景に溶け込んでしまうようなブラシを使うと、テキストが読めなくなる可能性があります。テキスト要素が主に装飾目的でない場合は、ほとんどのケースでテキスト要素を読みやすくするために、SolidColorBrush を使用します。

単色を使用する場合でも、選択したテキストの色が、テキストのレイアウトコンテナーの背景色と十分なコントラストを持っていることを確認します。テキストの前景とテキストコンテナーの背景のコントラストのレベルは、アクセシビリティの考慮事項です。

WebViewBrush

WebViewBrush は、WebView コントロールで通常表示されるコンテンツにアクセスできる特殊な種類のブラシです。 WebView コントロール領域の四角形コンテンツをレンダリングする代わりに、WebViewBrush 、そのコンテンツをレンダーサーフェイスの Brush-type プロパティを持つ別の要素に描画します。 WebViewBrush はすべてのブラシシナリオに適しているわけではありませんが、WebViewの遷移に役立ちます。詳細については、WebViewBrushを参照してください。

XamlCompositionBrushBase

XamlCompositionBrushBase は、CompositionBrush を使用して XAML UI 要素を描画するカスタムブラシを作成するために使用される基本クラスです。

これにより、ビジュアルレイヤーの概要で説明されているように、Windows.UI.Xaml レイヤーと Windows.UI.Composition レイヤー間の "ドロップダウン" 相互運用が可能になります。

カスタムブラシを作成するには、XamlCompositionBrushBase から継承し、必要なメソッドを実装する新しいクラスを作成します。

たとえば、CompositionEffectBrushを使用して XAML UIElement に、効果を適用することができます。たとえば、GaussianBlurEffect や、XamlLightによって照らされるときにXAML UIElementの反射特性を制御する SceneLightingEffect などです。

コード例については、XamlCompositionBrushBaseを参照してください。

XAML リソースとしてのブラシ

XAML リソースディクショナリでは、任意のブラシをキー付き XAML リソースとして宣言できます。これにより、UI 内の複数の要素に適用されるのと同じブラシ値を簡単にレプリケートできます。このブラシの値は共有され、XAML 内でブラシリソースを {StaticResource} 用法として参照するすべてのケースに適用されます。これには、共有ブラシを参照する XAML コントロールテンプレートがあり、コントロールテンプレート自体がキー付き XAML リソースである場合が含まれます。

コード内のブラシ

XAML を使用してブラシを指定する方が、ブラシを定義するコードよりもずっと一般的です。これは、ブラシは通常 XAML リソースとして定義され、ブラシの値は多くの場合、デザインツールの出力であるか、XAML UI 定義の一部として出力されるためです。それでも、コードを使用してブラシを定義したい場合は、ブラシ 型をすべてコードインスタンス化に使用できます。

コードで SolidColorBrush を作成するには、Color パラメーターを受け取るコンストラクターを使用します。次のように、Colors クラスの静的プロパティである値を渡します。

SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };

blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);

WebViewBrush をまたは ImageBrush を使用する場合は、まず既定のコンストラクターを使い、その後にそのブラシを UI プロパティに使用する前に他の API を呼び出してください。

ImageSource では、コードを使用して ImageBrush を定義するときに、(URI ではなく) BitmapImage が必要です。ソースがストリームの場合は、SetSourceAsync メソッドを使用して値を初期化します。ソースが、ms-appx または ms-resource スキーム使用するアプリ内のコンテンツを含む URI である場合は、URI を受け取る BitmapImage コンストラクターを使用します。また、イメージソースの取得またはデコードにタイミングの問題がある場合は、ImageOpened イベントの処理を検討することもできます。ここで、イメージソースが使用可能になるまで代替コンテンツを表示する必要がある場合があります。
WebViewBrush では、SourceName プロパティを最近リセットした場合や、WebView の内容もコードで変更されている場合は、再描画 を呼び出す必要があります。

コード例については、WebViewBrush、ImageBrush、および XamlCompositionBrushBaseを参照してください。