ブラシを使用して背景、前景、輪郭を描画するUsing brushes to paint backgrounds, foregrounds, and outlines

Brush オブジェクトを使用して、コントロールの一部、XAML 図形、テキストの内側または輪郭を塗りつぶすと、対象オブジェクトが UI 上で見えやすくなります。You use Brush objects to paint the interiors or outlines of XAML shapes, text, and parts of controls, so that the object being painted is visible in a UI. ここでは、利用可能なブラシとそれらの使い方について説明します。Let's look at the available brushes and how to use them.

重要な API:Brush クラスImportant APIs: Brush class

ブラシ入門Introduction to brushes

ShapeControl の領域など、アプリ キャンバスに表示されるオブジェクトを塗りつぶすには、Brush を使います。To paint an object such as a Shape or the parts of a Control that is displayed on the app canvas, you use a Brush. たとえば、ShapeBackgroundFill プロパティ、または ControlForeground プロパティを Brush 値に設定すると、対象となる UI 要素の塗りつぶし方法や、その要素の UI でのレンダリング方法が、Brush によって決定されます。For example, you set the Fill property of the Shape or the Background and Foreground properties of a Control to a Brush value, and that Brush determines how the UI element paints or is rendered in UI.

ブラシには、次のような種類があります。The different types of brushes are:

単色ブラシSolid color brushes

SolidColorBrush は、赤や青などの 1 つの Color で領域を塗りつぶします。A SolidColorBrush paints an area with a single Color, such as red or blue. これは、最も基本的なブラシです。This is the most basic brush. XAML で SolidColorBrush とその色 (単色) を定義するには、定義済みの色の名前、16 進数の色値、およびプロパティ要素構文という 3 つの方法があります。There are three ways in XAML to define a SolidColorBrush and the solid color it specifies: predefined color names, hexadecimal color values, or the property element syntax.

定義済みの色の名前Predefined color names

YellowMagenta など、定義済みの色の名前を使うことができます。You can use a predefined color name, such as Yellow or Magenta. 名前付きの色は 256 個存在します。There are 256 available named colors. XAML パーサーは、色の名前を、正しいカラー チャネルを持つ Color 構造体に変換します。The XAML parser converts the color name to a Color structure with the correct color channels. 256 個の名前付きの色は、カスケード スタイル シート レベル 3 (CSS3) 仕様の X11 の色名が基になっているため、過去に Web 開発や Web デザインの経験があれば、この一連の色について既にご存じの方も多いと思います。The 256 named colors are based on the X11 color names from the Cascading Style Sheets, Level 3 (CSS3) specification, so you may already be familiar with this list of named colors if you have previous experience with web development or design.

RectangleFill プロパティを定義済みの色 Red に設定する例を次に示します。Here's an example that sets the Fill property of a Rectangle to the predefined color Red.

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

次の画像は、Rectangle に適用されている SolidColorBrush を示しています。This image shows the SolidColorBrush as applied to the Rectangle.

レンダリングされた SolidColorBrush。

XAML ではなくコードを使って SolidColorBrush を定義する場合、名前付きの色はそれぞれ、Colors クラスの静的プロパティの値として利用できます。If you are defining a SolidColorBrush using code rather than XAML, each named color is available as a static property value of the Colors class. たとえば、名前付きの色 "Orchid" を表す、SolidColorBrushColor 値を宣言するには、Color 値を静的な Colors.Orchid 値に設定します。For example, to declare a Color value of a SolidColorBrush to represent the named color "Orchid", set the Color value to the static value Colors.Orchid.

16 進数の色値Hexadecimal color values

16 進数形式の文字列を使い、SolidColorBrush に対して、8 ビットのアルファ チャネルを備えた厳密な 24 ビットの色値を宣言できます。You can use a hexadecimal format string to declare precise 24-bit color values with 8-bit alpha channel for a SolidColorBrush. 16 進数文字列は成分ごとに、0 ~ F の範囲の 2 文字で定義され、各成分の値がアルファ チャネル (不透明度)、赤色チャネル、緑色チャネル、青色チャネルの順に並びます (ARGB)。Two characters in the range 0 to F define each component value, and the component value order of the hexadecimal string is: alpha channel (opacity), red channel, green channel, and blue channel (ARGB). たとえば、16 進数値 "#FFFF0000" は、完全に不透明な赤色 (アルファ = "FF"、赤 = "FF"、緑 = "00"、青 = "00") を定義します。For example, the hexadecimal value "#FFFF0000" defines fully opaque red (alpha="FF", red="FF", green="00", and blue="00").

以下の XAML では、名前付きの色 Colors.Red とまったく同じ結果となるように、RectangleFill プロパティを 16 進数値 "#FFFF0000" に設定しています。This XAML example sets the Fill property of a Rectangle to the hexadecimal value "#FFFF0000", and gives an identical result to using the named color Colors.Red.

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

プロパティ要素構文Property element syntax

プロパティ要素構文を使って SolidColorBrush を定義できます。You can use property element syntax to define a SolidColorBrush. この構文は、前の方法よりもやや複雑ですが、Opacity などのプロパティ値を要素に対して追加で指定できます。This syntax is more verbose than the previous methods, but you can specify additional property values on an element, such as the Opacity. プロパティ要素構文を含む XAML 構文について詳しくは、「XAML の概要」と「XAML 構文のガイド」をご覧ください。For more info on XAML syntax, including property element syntax, see XAML overview and XAML syntax guide.

これまでの例では、構文に "SolidColorBrush" という文字列が一切出現していません。In the previous examples, you never even saw the string "SolidColorBrush" appear in the syntax. XAML 言語は、一般的なケースについては UI を簡潔に定義できるよう、意識的に省略表現が採用されており、その一環として、ブラシも暗黙的かつ自動的に作成されます。The brush being created is created implicitly and automatically, as part of a deliberate XAML language shorthand that helps keep UI definition simple for the most common cases. 次の例では、Rectangle を作成し、Rectangle.Fill プロパティの要素値として SolidColorBrush を明示的に作成します。The next example creates a Rectangle and explicitly creates the SolidColorBrush as an element value for a Rectangle.Fill property. SolidColorBrushColorBlue に設定され、Opacity は 0.5 に設定されます。The Color of the SolidColorBrush is set to Blue and the Opacity is set to 0.5.

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

線状グラデーション ブラシLinear gradient brushes

LinearGradientBrush は、直線に沿って定義されたグラデーションを使って、領域を塗りつぶします。A LinearGradientBrush paints an area with a gradient that's defined along a line. この直線はグラデーション軸と呼ばれます。This line is called the gradient axis. GradientStop オブジェクトを使って、グラデーションの色とグラデーション軸に沿った位置を指定します。You specify the gradient's colors and their locations along the gradient axis using GradientStop objects. 既定では、ブラシで塗りつぶす領域の左上隅から右下隅に向かってグラデーション軸がとられているため、明暗は斜め方向に適用されます。By default, the gradient axis runs from the upper left corner to the lower right corner of the area that the brush paints, resulting in a diagonal shading.

GradientStop は、グラデーション ブラシの基本的な構成要素です。The GradientStop is the basic building block of a gradient brush. グラデーション境界は、塗りつぶす領域に適用されたブラシの、グラデーション軸上の Offset 位置における Color を指定します。A gradient stop specifies what the Color of the brush is at an Offset along the gradient axis, when the brush is applied to the area being painted.

グラデーション境界の Color プロパティは、グラデーション境界の色を指定します。The gradient stop's Color property specifies the color of the gradient stop. 定義済みの色の名前を使うか、または 16 進数の ARGB 値を指定して、色を設定できます。You can set the color by using a predefined color name or by specifying the hexadecimal ARGB values.

GradientStopOffset プロパティは、グラデーション軸に沿った各 GradientStop の位置を指定します。The Offset property of a GradientStop specifies the position of each GradientStop along the gradient axis. Offset は、0 から 1 までの範囲の倍精度浮動小数点数です。The Offset is a double that ranges from 0 to 1. Offset が 0 のとき、GradientStop は、グラデーション軸の開始位置、つまり、StartPoint 付近に配置されます。An Offset of 0 places the GradientStop at the start of the gradient axis, in other words near its StartPoint. Offset が 1 のとき、GradientStopEndPoint に配置されます。An Offset of 1 places the GradientStop at the EndPoint. 実用上、LinearGradientBrush には少なくとも 2 つの GradientStop 値が必要であり、2 つの GradientStop は、それぞれ異なる Color と、0 ~ 1 の範囲内の異なる Offset 値を持つ必要があります。At a minimum, a useful LinearGradientBrush should have two GradientStop values, where each GradientStop should specify a different Color and have a different Offset between 0 and 1.

次の例では、4 色の線状グラデーションを作成し、それを使って Rectangle を塗りつぶします。This example creates a linear gradient with four colors and uses it to paint a Rectangle.

<!-- 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 つのグラデーション境界によって指定された色の組み合わせとして、直線的に補間されます。The color of each point between gradient stops is linearly interpolated as a combination of the color specified by the two bounding gradient stops. この例の各グラデーション境界を次の図に示しています。The illustration highlights the gradient stops in the previous example. グラデーション境界の位置が円で示され、グラデーション軸が破線で示されています。The circles mark the position of the gradient stops, and the dashed line shows the gradient axis.

グラデーション境界 グラデーション境界が配置される直線は、StartPoint プロパティと EndPoint プロパティを、開始の既定値である (0,0)(1,1) 以外の値に設定することで変更できます。Gradient stops You can change the line at which the gradient stops are positioned by setting the StartPoint and EndPoint properties to be different values than the (0,0) and (1,1) starting defaults. StartPointEndPoint の座標値を変更すると、水平方向や垂直方向のグラデーションを作成したり、グラデーション方向を反転したりできるほか、塗りつぶす領域全体よりも小さくなるようにグラデーションの適用範囲を狭めることができます。By changing the StartPoint and EndPoint coordinate values, you can create horizontal or vertical gradients, reverse the gradient direction, or condense the gradient spread to apply to a smaller range than the full painted area. グラデーションの領域を狭めるには、StartPoint または EndPoint (あるいはその両方) の値を 0 ~ 1 の範囲で変更します。To condense the gradient, you set values of StartPoint and/or EndPoint to be something that is between the values 0 and 1. たとえば、フェード効果がブラシの左半分で完結し、右半分は、直近の GradientStop に基づく単色であるような水平方向のグラデーションが必要な場合、StartPoint(0,0) に、EndPoint(0.5,0) に設定します。For example, if you want a horizontal gradient where the fade all happens on the left half of the brush and the right side is solid to your last GradientStop color, you specify a StartPoint of (0,0) and an EndPoint of (0.5,0).

ツールによるグラデーションの作成Use tools to make gradients

ここまで、線状グラデーションのしくみについて説明しました。次に、Visual Studio または Blend を使うと、これらのグラデーションの作成が簡単になります。Now that you know how linear gradients work, you can use Visual Studio or Blend to make creating these gradients easier. グラデーションを作成するには、デザイン サーフェイスまたは XAML ビューで、グラデーションを適用するオブジェクトを選択します。To create a gradient, select the object you want to apply a gradient to on the design surface or in XAML view. [ブラシ] を展開し、 [線状グラデーション] タブをクリックします (次のスクリーンショットをご覧ください)。Expand Brush and select the Linear Gradient tab (see next screenshot).

Visual Studio による線状グラデーションの作成。

ここで、グラデーション境界の色を変更したり、下のバーを使って位置をずらしたりできます。Now you can change the colors of the gradient stops and slide their positions using the bar on the bottom. また、バーをクリックして新しいグラデーション境界を追加したり、グラデーション境界をバーの外側にドラッグして削除したりもできます (次のスクリーンショットをご覧ください)。You can also add new gradient stops by clicking on the bar and remove them by dragging the stops off of the bar (see next screenshot).

プロパティ ウィンドウの下にあるバーでグラデーション境界を制御。

イメージ ブラシImage brushes

ImageBrush は、イメージ ファイル ソースから取得した画像で領域を塗りつぶします。An ImageBrush paints an area with an image, with the image to paint coming from an image file source. ImageSource プロパティに、読み込む画像のパスを設定します。You set the ImageSource property with the path of the image to load. 通常、イメージ ソースは、アプリのリソースに含まれる Content 項目から取得します。Typically, the image source comes from a Content item that is part of your app's resources.

ImageBrush では、既定で、描画する領域が完全に埋まるように画像が拡大されます。描画する領域と画像の縦横比が異なる場合は、画像がゆがむ可能性があります。By default, an ImageBrush stretches its image to completely fill the painted area, possibly distorting the image if the painted area has a different aspect ratio than the image. この動作を変更するには、Stretch プロパティを既定値の Fill から NoneUniform、または UniformToFill に変更します。You can change this behavior by changing the Stretch property from its default value of Fill and setting it as None, Uniform, or UniformToFill.

次の例では、ImageBrush を作成し、ImageSource を licorice.jpg という画像に設定します。この画像は、アプリのリソースとして取り込んでおく必要があります。The next example creates an ImageBrush and sets the ImageSource to an image named licorice.jpg, which you must include as a resource in the app. この ImageBrush を使って、Ellipse で定義される領域を塗りつぶします。The ImageBrush then paints the area defined by an Ellipse shape.

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

この ImageBrush をレンダリングすると、次のようになります。Here's what the rendered ImageBrush looks like.

レンダリングされた ImageBrush。

ImageBrushImage は、どちらも Uniform Resource Identifier (URI) でイメージ ソース ファイルを参照します。また、イメージ ソース ファイルに使うことができる画像形式には、さまざまなものがあります。ImageBrush and Image both reference an image source file by Uniform Resource Identifier (URI), where that image source file uses several possible image formats. これらのイメージ ソース ファイルは、URI として指定されます。These image source files are specified as URIs. イメージ ソースの指定、使用できる画像形式、アプリへのパッケージ化について詳しくは、「Image と ImageBrush」をご覧ください。For more info about specifying image sources, the usable image formats, and packaging them in an app, see Image and ImageBrush.

ブラシとテキストBrushes and text

ブラシを使って、テキスト要素にレンダリング特性を適用することもできます。You can also use brushes to apply rendering characteristics to text elements. たとえば、TextBlockForeground プロパティに対して、Brush を指定できます。For example, the Foreground property of TextBlock takes a Brush. テキストには、ここで説明したすべてのブラシを適用できます。You can apply any of the brushes described here to text. ただし、テキストにブラシを適用するときは注意が必要です。背景に溶け込むようなブラシやテキスト文字の輪郭に合っていないブラシを使うと、テキストが読みにくくなる場合があります。But be careful with brushes applied to text, because it's possible to make the text unreadable if you use brushes that bleed into whatever background the text is rendered on top of, or that distract from the outlines of text characters. テキスト要素の装飾性を高めることが重要でなければ、ほとんどの場合は SolidColorBrush を使うと読みやすくなります。Use SolidColorBrush for readability of text elements in most cases, unless you want the text element to be mostly decorative.

単色を使う場合でも、テキストには、そのレイアウト コンテナーの背景色に対して十分なコントラストを持つ色を選ぶ必要があります。Even when you use a solid color, make sure that the text color you choose has enough contrast against the background color of the text's layout container. テキストの前景とテキスト コンテナーの背景とのコントラスト レベルは、アクセシビリティにかかわる考慮事項です。The level of contrast between text foreground and text container background is an accessibility consideration.

WebViewBrushWebViewBrush

WebViewBrush は、WebView コントロールに通常表示されるコンテンツにアクセスできる特殊なブラシです。A WebViewBrush is a special type of brush that can access the content normally viewed in a WebView control. 四角形の WebView コントロール領域にコンテンツをレンダリングする代わりに、WebViewBrush は、レンダリング サーフェスに Brush タイプのプロパティを持つ別の要素にコンテンツを描画します。Instead of rendering the content in the rectangular WebView control area, WebViewBrush paints that content onto another element that has a Brush-type property for a render surface. WebViewBrush は、必ずしもすべての用途に適したブラシではありませんが、WebView の切り替えで効果的に使うことができます。WebViewBrush isn't appropriate for every brush scenario, but is useful for transitions of a WebView. 詳しくは、「WebViewBrush」をご覧ください。For more info, see WebViewBrush.

XamlCompositionBrushBaseXamlCompositionBrushBase

XamlCompositionBrushBase は、CompositionBrush を使って XAML UI 要素を描画する、カスタム ブラシを作成するために使用する基底クラスです。XamlCompositionBrushBase is a base class used to create custom brushes that use CompositionBrush to paint XAML UI elements.

これにより、Windows.UI.Xaml と Windows.UI.Composition レイヤー間の「ドロップ ダウン」相互運用を行えます。詳しくは、「ビジュアル レイヤーの概要」をご覧ください。This enables "drop down" interoperation between the Windows.UI.Xaml and Windows.UI.Composition layers as described in the Visual Layer overview.

カスタム ブラシを作成するには、XamlCompositionBrushBase から継承する新しいクラスを作成し、必要なメソッドを実装します。To create a custom brush, create a new class that inherits from XamlCompositionBrushBase and implements the required methods.

これにより、CompositionEffectBrush を使って、効果を XAML UIElements に適用することができます。たとえば、XamlLight に照射される XAML UIElement の反射プロパティを制御するGaussianBlurEffectSceneLightingEffect などの効果を適用できます。For example, this can be used to apply effects to XAML UIElements using a CompositionEffectBrush, such as a GaussianBlurEffect or a SceneLightingEffect that controls the reflective properties of a XAML UIElement when being lit by a XamlLight.

コードの例については、XamlCompositionBrushBase のリファレンス ページをご覧ください。For code examples, see the reference page for XamlCompositionBrushBase.

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

すべてのブラシは、XAML リソース ディクショナリに、キーを持つ XAML リソースとして宣言できます。You can declare any brush to be a keyed XAML resource in a XAML resource dictionary. これにより、UI 内の複数の要素に適用する同じブラシの値を簡単に複製することができます。This makes it easy to replicate the same brush values as applied to multiple elements in a UI. このブラシの値を共有し、XAML の {StaticResource} でブラシ リソースを参照するときに適用することができます。The brush values are then shared and applied to any case where you reference the brush resource as a {StaticResource} usage in your XAML. たとえば、共有されたブラシを参照する XAML コントロール テンプレートがあるとき、そのコントロール テンプレート自体を、キーを持つ XAML リソースとして利用することができます。This includes cases where you have a XAML control template that references the shared brush, and the control template is itself a keyed XAML resource.

コードを使ったブラシBrushes in code

コードを使ってブラシを定義するよりも、XAML を使ってブラシを指定する方が一般的です。It's much more typical to specify brushes using XAML than it is to use code to define brushes. これは、ブラシが通常は XAML リソースとして定義されるためであり、ブラシの値がデザイン ツールの出力結果である場合や、XAML UI 定義の一部としての出力結果である場合が多いためです。This is because brushes are usually defined as XAML resources, and because brush values are often the output of design tools or otherwise as part of a XAML UI definition. ただし、コードを使ってブラシを定義する必要がある場合は、すべての種類の Brush をコードのインスタンス化に使うことができます。Still, for the occasional case where you might want to define a brush using code, all the Brush types are available for code instantiation.

コードを使って SolidColorBrush を作成するには、Color パラメーターを受け取るコンストラクターを使います。To create a SolidColorBrush in code, use the constructor that takes a Color parameter. 次のように、Colors クラスの静的プロパティである値を渡します。Pass a value that is a static property of the Colors class, like this:

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

WebViewBrushImageBrush を UI プロパティに使う場合、その前に既定のコンストラクターを使って他の API を呼び出してください。For WebViewBrush and ImageBrush, use the default constructor and then call other APIs before you attempt to use that brush for a UI property.

  • コードを使って ImageBrush を定義する場合、ImageSource では BitmapImage (URI ではない) が必要です。ImageSource requires a BitmapImage (not a URI) when you define an ImageBrush using code. ソースがストリームである場合は、SetSourceAsync メソッドを使って値を初期化します。If your source is a stream , use the SetSourceAsync method to initialize the value. ソースが、ms-appx スキームまたは ms-resource スキームを使うアプリ内のコンテンツを含む URI である場合は、URI を受け取る BitmapImage コンストラクターを使います。If your source is a URI, which includes content in your app that uses the ms-appx or ms-resource schemes, use the BitmapImage constructor that takes a URI. イメージ ソースが使えるようになるまで代替コンテンツを表示することが必要であるなど、イメージ ソースの取得やデコードについてタイミングの問題がある場合は、ImageOpened イベントを処理することも検討してください。You might also consider handling the ImageOpened event if there are any timing issues with retrieving or decoding the image source, where you might need alternate content to display until the image source is available.
  • WebViewBrush については、SourceName プロパティを最近リセットした場合、または WebView のコンテンツをコードを使って変更した場合に、Redraw を呼び出す必要があります。For WebViewBrush you might need to call Redraw if you've recently reset the SourceName property or if the content of the WebView is also being changed with code.

コードの例については、WebViewBrushImageBrushXamlCompositionBrushBase のリファレンス ページをご覧ください。For code examples, see reference pages for WebViewBrush, ImageBrush, and XamlCompositionBrushBase.