純色およびグラデーションによる塗りつぶしの概要Painting with Solid Colors and Gradients Overview

このトピックでは、、 SolidColorBrushLinearGradientBrushおよびRadialGradientBrushオブジェクトを使用して、純色、線状グラデーション、および放射状グラデーションで描画する方法について説明します。This topic describes how to use SolidColorBrush, LinearGradientBrush, and RadialGradientBrush objects to paint with solid colors, linear gradients, and radial gradients.

領域を純色で塗りつぶすPainting an Area with a Solid Color

どのプラットフォームでも最も一般的な操作の1つは、純色Colorで領域を塗りつぶすことです。One of the most common operations in any platform is to paint an area with a solid Color. このタスクを実行するWindows Presentation Foundation (WPF)Windows Presentation Foundation (WPF)ためにSolidColorBrush 、にはクラスが用意されています。To accomplish this task, Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides the SolidColorBrush class. 以下のセクションでは、 SolidColorBrushを使用して描画するさまざまな方法について説明します。The following sections describe the different ways to paint with a SolidColorBrush.

"XAML" での SolidColorBrush の使用Using a SolidColorBrush in "XAML"

XAMLXAML で領域を純色で塗りつぶすには、次のオプションのいずれかを使用します。To paint an area with a solid color in XAMLXAML, use one of the following options.

  • 定義済みの純色のブラシを名前で選択します。Select a predefined solid color brush by name. たとえば、ボタンのBackgroundを "Red" または "MediumBlue" に設定できます。For example, you can set a button's Background to "Red" or "MediumBlue". その他の定義済みの単色ブラシの一覧については、 Brushesクラスの静的プロパティを参照してください。For a list of other predefined solid color brushes, see the static properties of the Brushes class. 次に例を示します。The following is an example.

    <!-- This button's background is painted with a red SolidColorBrush,
         described using a named color. -->
    <Button Background="Red">A Button</Button>
    
  • 赤、緑、および青の量を指定して単一の純色に結合することで、32 ビット カラー パレットからカラーを選択します。Choose a color from the 32-bit color palette by specifying the amounts of red, green, and blue to combine into a single solid color. 32 ビット パレットからカラーを指定するための書式は、" #rrggbb" です。ここで、rr は赤の相対的な量を指定する 2 桁の 16 進数であり、gg は緑の量を、bbは青の量を指定します。The format for specifying a color from the 32-bit palette is "#rrggbb", where rr is a two digit hexadecimal number specifying the relative amount of red, gg specifies the amount of green, and bb specifies the amount of blue. さらに、カラーは、"#aarrggbb" として指定することもできます。ここで、aa はカラーのアルファ値 (透明度) を指定します。Additionally, the color can be specified as "#aarrggbb" where aa specifies the alpha value, or transparency, of the color. この方法により、部分的に透明な色を作成することができます。This approach enables you to create colors that are partially transparent. 次の例では、 Background Buttonのは16進表記で完全に不透明な赤に設定されています。In the following example, the Background of a Button is set to fully-opaque red using hexadecimal notation.

    <!-- This button's background is painted with a red SolidColorBrush,
         described using hexadecimal notation. -->
    <Button Background="#FFFF0000">A Button</Button>
    
  • を記述するには、 SolidColorBrushプロパティタグ構文を使用します。Use property tag syntax to describe a SolidColorBrush. この構文は冗長ですが、ブラシの不透明度などの追加設定を指定することができます。This syntax is more verbose but enables you to specify additional settings, such as the brush's opacity. 次の例では、 Background 2 つButtonの要素のプロパティが完全に不透明な赤に設定されています。In the following example, the Background properties of two Button elements are set to fully-opaque red. 最初のブラシの色は、定義済みの色の名前を使用して記述されています。The first brush's color is described using a predefined color name. 2 番目のブラシの色は、16 進表記で記述されています。The second brush's color is described using hexadecimal notation.

    <!-- Both of these buttons' backgrounds are painted with red 
         SolidColorBrush objects, described using object element
         syntax. -->
    <Button>A Button
    
      <Button.Background>
        <SolidColorBrush Color="Red" />
      </Button.Background>
    </Button>
    
    <Button>A Button
    
      <Button.Background>
        <SolidColorBrush Color="#FFFF0000" />
      </Button.Background>
    </Button>  
    

コードでの SolidColorBrush による塗りつぶしPainting with a SolidColorBrush in Code

コードで領域を純色で塗りつぶすには、次のオプションのいずれかを使用します。To paint an area with a solid color in code, use one of the following options.

  • Brushesクラスに用意されている定義済みのブラシのいずれかを使用します。Use one of the predefined brushes provided by the Brushes class. 次の例Backgroundでは、 ButtonのはにRed設定されています。In the following example, the Background of a Button is set to Red.

    Button myButton = new Button();
    myButton.Content = "A Button";
    myButton.Background = Brushes.Red;  
    
  • SolidColorBrush作成し、 Color構造Color体を使用してそのプロパティを設定します。Create a SolidColorBrush and set its Color property using a Color structure. クラスのColors定義済みの色を使用することも、静的FromArgbメソッドColorを使用してを作成することもできます。You can use a predefined color from the Colors class or you can create a Color using the static FromArgb method.

    次の例は、定義済みColor SolidColorBrushの色を使用してのプロパティを設定する方法を示しています。The following example shows how to set the Color property of a SolidColorBrush using a predefined color.

    Button myButton = new Button();
    myButton.Content = "A Button";
    
    SolidColorBrush mySolidColorBrush = new SolidColorBrush();
    mySolidColorBrush.Color = Colors.Red;
    myButton.Background = mySolidColorBrush;
    

[静的FromArgb ] を使用すると、色のアルファ、赤、緑、および青の値を指定できます。The static FromArgb enables you to specify the color's alpha, red, green, and blue values. これらの各値の一般的な範囲は、0 ~ 255 です。The typical range for each of these values is 0-255. たとえば、アルファ値 0 はカラーが完全に透明であることを示し、値 255 はカラーが完全に不透明であることを示します。For example, an alpha value of 0 indicates that a color is completely transparent, while a value of 255 indicates the color is completely opaque. 同様に、赤値 0 はカラーに赤が全く含まれないことを示し、値 255 は可能な最大量の赤が含まれることを示します。Likewise, a red value of 0 indicates that a color has no red in it, while a value of 255 indicates a color has the maximum amount of red possible. 次の例では、ブラシのカラーは、アルファ、赤、緑、および青の値を指定することで記述されています。In the following example, a brush's color is described by specifying alpha, red, green, and blue values.

Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = 
    Color.FromArgb(
        255, // Specifies the transparency of the color.
        255, // Specifies the amount of red.
        0, // specifies the amount of green.
        0); // Specifies the amount of blue.
        
myButton.Background = mySolidColorBrush;

色を指定するその他の方法にColorついては、リファレンストピックを参照してください。For additional ways to specify color, see the Color reference topic.

領域をグラデーションで塗りつぶすPainting an Area with a Gradient

グラデーション ブラシは、軸に沿って互いに溶け込む複数の色で領域を塗りつぶします。A gradient brush paints an area with multiple colors that blend into each other along an axis. これらを使用して、光と影の感じを作り出して、コントロールを立体的に見せることができます。You can use them to create impressions of light and shadow, giving your controls a three-dimensional feel. ガラス、クロム メッキ、水、その他の滑らかな表面をシミュレートするためにも使用できます。You can also use them to simulate glass, chrome, water, and other smooth surfaces. WPFWPFにはLinearGradientBrush 、ととRadialGradientBrushいう2種類のグラデーションブラシがあります。provides two types of gradient brushes: LinearGradientBrush and RadialGradientBrush.

線状グラデーションLinear Gradients

LinearGradientBrush 、直線 (グラデーション軸) に沿って定義されたグラデーションで領域を塗りつぶします。A LinearGradientBrush paints an area with a gradient defined along a line, the gradient axis. グラデーション軸に沿ってグラデーションの色と位置を指定するにGradientStopは、オブジェクトを使用します。You specify the gradient's colors and their location along the gradient axis using GradientStop objects. グラデーション軸を変更することもできます。これにより、水平方向と垂直方向のグラデーションの作成やグラデーションの方向の反転を行うことができます。You may also modify the gradient axis, which enables you to create horizontal and vertical gradients and to reverse the gradient direction. グラデーション軸については、次のセクションで説明します。The gradient axis is described in the next section. 既定では、対角線方向のグラデーションが作成されます。By default, a diagonal gradient is created.

次の例では、4 津のカラーを使用して線状グラデーションを作成するコードを示します。The following example shows the code that creates a linear gradient with four colors.

<!-- 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" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));
    
// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

このコードを実行すると、次のグラデーションが生成されます。This code produces the following gradient:

対角線方向の線状グラデーションA diagonal linear gradient

注意

このトピックのグラデーションの例では、開始点と終了点を設定するための既定の座標系を使用します。The gradient examples in this topic use the default coordinate system for setting start points and end points. 既定の座標系は、境界ボックスに対して相対的です。0は境界ボックスの 0% を示し、1は境界ボックスの 100% を示します。The default coordinate system is relative to a bounding box: 0 indicates 0 percent of the bounding box and 1 indicates 100 percent of the bounding box. この座標系を変更するには、 MappingModeプロパティを値Absoluteに設定します。You can change this coordinate system by setting the MappingMode property to the value Absolute. 絶対座標系は、境界ボックスに相対しません。An absolute coordinate system is not relative to a bounding box. 値は、ローカル空間に直接変換されます。Values are interpreted directly in local space.

GradientStopは、グラデーションブラシの基本的な構成要素です。The GradientStop is the basic building block of a gradient brush. グラデーションの分岐Offset点はColor 、グラデーション軸に沿ってを指定します。A gradient stop specifies a Color at an Offset along the gradient axis.

  • グラデーションのColor分岐点のプロパティは、グラデーションの分岐点の色を指定します。The gradient stop's Color property specifies the color of the gradient stop. 色は、( Colorsクラスによって提供される) 定義済みの色を使用するか、ScRGB または ARGB 値を指定することによって設定できます。You may set the color by using a predefined color (provided by the Colors class) or by specifying ScRGB or ARGB values. XAMLXAML では、16 進表記を使用してカラーを記述することもできます。In XAMLXAML, you may also use hexadecimal notation to describe a color. 詳細については、 Color構造体を参照してください。For more information, see the Color structure.

  • グラデーションの分岐点Offsetのプロパティは、グラデーション軸のグラデーションの分岐点の色の位置を指定します。The gradient stop's Offset property specifies the position of the gradient stop's color on the gradient axis. オフセットは、 Double 0 ~ 1 の範囲のです。The offset is a Double that ranges from 0 to 1. グラデーション境界のオフセット値が 0 に近ければ近いほど、カラーはグラデーションの始まりに近づきます。The closer a gradient stop's offset value is to 0, the closer the color is to the start of the gradient. グラデーションのオフセット値が 1 に近ければ近いほど、カラーはグラデーションの終わりに近づきます。The closer the gradient's offset value is to 1, the closer the color is to the end of the gradient.

グラデーション境界の間の各点のカラーは、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 following illustration highlights the gradient stops in the previous example. 円はグラデーション境界の位置をマークし、破線はグラデーション軸を示しています。The circles mark the position of gradient stops and a dashed line shows the gradient axis.

線状グラデーションでのグラデーション境界Gradient stops in a linear gradient

最初のグラデーション境界は、オフセット0.0 に黄色を指定しています。The first gradient stop specifies the color yellow at an offset of 0.0. 2 番目のグラデーション境界は、オフセット 0.25 に赤色を指定しています。The second gradient stop specifies the color red at an offset of 0.25. これら 2 つの境界の間の点は、グラデーション軸に沿って左から右に移動するにつれて、黄色から徐々に赤色に変化します。The points between these two stops gradually change from yellow to red as you move from left to right along the gradient axis. 3 番目のグラデーション境界は、オフセット 0.75 に青色を指定しています。The third gradient stop specifies the color blue at an offset of 0.75. 2 番目と 3 番目のグラデーション境界の間の点は、赤から青に徐々に変化します。The points between the second and third gradient stops gradually change from red to blue. 4 番目のグラデーション境界は、オフセット 1.0 に緑色を指定しています。The fourth gradient stop specifies the color lime green at an offset of 1.0. 3 番目と 4 番目のグラデーション境界の間の点は、青から緑に徐々に変化します。The points between the third and fourth gradient stops gradually change from blue to lime green.

グラデーション軸The Gradient Axis

前述のように、線状グラデーション ブラシのグラデーション境界は、直線のグラデーション軸に沿って配置されます。As previously mentioned, a linear gradient brush's gradient stops are positioned along a line, the gradient axis. ブラシのStartPointプロパティとEndPointプロパティを使用して、線の向きとサイズを変更することができます。You may change the orientation and size of the line using the brush's StartPoint and EndPoint properties. ブラシのStartPointおよびEndPointを操作することにより、グラデーションの方向を反転させたり、グラデーションの方向を逆にしたりできます。By manipulating the brush's StartPoint and EndPoint, you can create horizontal and vertical gradients, reverse the gradient direction, condense the gradient spread, and more.

既定では、線状グラデーションブラシのStartPointEndPointは、塗りつぶされる領域を基準としています。By default, the linear gradient brush's StartPoint and EndPoint are relative to the area being painted. 点 (0, 0) は塗りつぶされる領域の左上隅を、点 (1, 1) は塗りつぶされる領域の右下隅を表します。The point (0,0) represents the upper-left corner of the area being painted, and (1,1) represents the lower-right corner of the area being painted. の既定値StartPointは (0, 0) で、既定値EndPointは (1, 1) です。これにより、左上隅から、描画される領域の右下隅に向かって拡張された斜線グラデーションが作成されます。 LinearGradientBrushThe default StartPoint of a LinearGradientBrush is (0,0), and its default EndPoint is (1,1), which creates a diagonal gradient starting at the upper-left corner and extending to the lower-right corner of the area being painted. 次の図は、線形グラデーションブラシのグラデーション軸を既定値StartPointEndPointで示しています。The following illustration shows the gradient axis of a linear gradient brush with default StartPoint and EndPoint.

対角線方向の線状グラデーションのグラデーション軸Gradient axis for a diagonal linear gradient

次の例では、ブラシのStartPointおよびをEndPoint指定して、水平グラデーションを作成する方法を示します。The following example shows how to create a horizontal gradient by specifying the brush's StartPoint and EndPoint. グラデーションの分岐点は、前の例と同じであることに注意してください。StartPointEndPointを変更するだけで、グラデーションが斜めから水平に変更されました。Notice that the gradient stops are the same as in the previous examples; by simply changing the StartPoint and EndPoint, the gradient has been changed from diagonal to horizontal.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.   
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));
    
// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient; 

次の図は、作成されるグラデーションを示しています。The following illustration shows the gradient that is created. グラデーション軸は破線でマークされ、グラデーション境界は円でマークされています。The gradient axis is marked with a dashed line, and the gradient stops are marked with circles.

水平方向の線状グラデーションのグラデーション軸Gradient axis for a horizontal linear gradient

次の例では、垂直方向のグラデーションを作成する方法を示します。The next example shows how to create a vertical gradient.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));
    
// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;  

次の図は、作成されるグラデーションを示しています。The following illustration shows the gradient that is created. グラデーション軸は破線でマークされ、グラデーション境界は円でマークされています。The gradient axis is marked with a dashed line, and the gradient stops are marked with circles.

垂直方向のグラデーションのグラデーション軸Gradient axis for a vertical gradient

放射状グラデーションRadial Gradients

と同様に、 RadialGradientBrushは軸に沿ってブレンドされる色で領域を塗りつぶします。 LinearGradientBrushLike a LinearGradientBrush, a RadialGradientBrush paints an area with colors that blend together along an axis. 前の例では、線状グラデーション ブラシの軸は直線であることを示しました。The previous examples showed how a linear gradient brush's axis is a straight line. 放射状グラデーション ブラシの軸は円によって定義され、そのカラーはその原点から外側に "放射" されます。A radial gradient brush's axis is defined by a circle; its colors "radiate" outward from its origin.

次の例では、放射状グラデーション ブラシを使用して、四角形の内側を塗りつぶします。In the following example, a radial gradient brush is used to paint the interior of a rectangle.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

次の図は、前の例で作成されるグラデーションを示しています。The following illustration shows the gradient created in the previous example. ブラシのグラデーション境界が強調されています。The brush's gradient stops have been highlighted. 結果は異なっていますが、この例のグラデーション境界は、前の線状グラデーション ブラシの例のグラデーション境界と同じであることに注目してください。Notice that, even though the results are different, the gradient stops in this example are identical to the gradient stops in the previous linear gradient brush examples.

放射状グラデーションでのグラデーション境界Gradient stops in a radial gradient

GradientOrigin放射状グラデーションブラシのグラデーション軸の始点を指定します。The GradientOrigin specifies the start point of a radial gradient brush's gradient axis. グラデーション軸は、グラデーションの原点からグラデーション円に放射状に広がります。The gradient axis radiates from the gradient origin to the gradient circle. ブラシのグラデーション円は、、 Center RadiusX、およびRadiusYの各プロパティによって定義されます。A brush's gradient circle is defined by its Center, RadiusX, and RadiusY properties.

GradientOrigin次の図はCenter RadiusY 、、、、およびの設定が異なるいくつかの放射状グラデーションを示しています。 RadiusXThe following illustration shows several radial gradients with different GradientOrigin, Center, RadiusX, and RadiusY settings.

RadialGradientBrush の設定異なる GradientOrigin、Center、RadiusX、RadiusY 設定を使用した RadialGradientBrushes。RadialGradientBrush settings RadialGradientBrushes with different GradientOrigin, Center, RadiusX, and RadiusY settings.

透明または部分的に透明なグラデーション境界の指定Specifying Transparent or Partially-Transparent Gradient Stops

グラデーションの分岐点は不透明度プロパティを提供しないため、マークアップで ARGB 16 進表記を使用して色のColor.FromScRgbアルファチャネルを指定するか、メソッドを使用して透明または部分的に透明なグラデーションの分岐点を作成する必要があります。Because gradient stops do not provide an opacity property, you must specify the alpha channel of colors using ARGB hexadecimal notation in markup or use the Color.FromScRgb method to create gradient stops that are transparent or partially transparent. 以降のセクションで、部分的に透明なグラデーション境界を XAMLXAML とコードで作成する方法を説明します。The following sections explain how to create partially transparent gradient stops in XAMLXAML and code.

"XAML" でのカラーの不透明度の指定Specifying Color Opacity in "XAML"

XAMLXAMLは、ARGB 16 進表記を使用して、個々の色の不透明度を指定します。In XAMLXAML, you use ARGB hexadecimal notation to specify the opacity of individual colors. ARGB 16 進数表記では、次の構文を使用します。ARGB hexadecimal notation uses the following syntax:

# aa rrggbb# aa rrggbb

前の行の aa は、カラーの不透明度を指定するために使用する 2 桁の 16 進値を表します。The aa in the previous line represents a two-digit hexadecimal value used to specify the opacity of the color. rrgg、および bb は、それぞれ、カラーの赤、緑、および青の量を指定するために使用される 2 桁の 16 進値を表します。The rr, gg, and bb each represent a two digit hexadecimal value used to specify the amount of red, green, and blue in the color. 各 16 進数には、0 ~ 9 または A ~ F の値を指定できます。Each hexadecimal digit may have a value from 0-9 or A-F. 0 は最小値であり、F は最大値です。0 is the smallest value, and F is the greatest. アルファ値 00 は完全に透明なカラーを指定し、アルファ値 FF は完全に不透明なカラーを指定します。An alpha value of 00 specifies a color that is completely transparent, while an alpha value of FF creates a color that is fully opaque. 次の例では、16進数の ARGB 表記を使用して2つの色を指定しています。In the following example, hexadecimal ARGB notation is used to specify two colors. 1 つ目は部分的に透明 (アルファ値 x20 ) であり、2 つ目は完全に不透明です。The first is partially transparent (it has an alpha value of x20), while the second is completely opaque.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

コードでのカラーの不透明度の指定Specifying Color Opacity in Code

コードを使用する場合、 FromArgb静的なメソッドを使用すると、色を作成するときにアルファ値を指定できます。When using code, the static FromArgb method enables you to specify an alpha value when you create a color. メソッドは、型Byteの4つのパラメーターを受け取ります。The method takes four parameters of type Byte. 最初のパラメーターはカラーのアルファ チャネルを指定し、その他の 3 つのパラメーターはカラーの赤、緑、および青の値を指定します。The first parameter specifies the alpha channel of the color; the other three parameters specify the red, green, and blue values of the color. 各値は、0 ~ 255 (0 と 255 を含む) の数値にする必要があります。Each value should be between 0 to 255, inclusive. アルファ値 0 はカラーが完全に透明であることを指定し、アルファ値 255 はカラーが完全に不透明であることを指定します。An alpha value of 0 specifies that the color is completely transparent, while an alpha value of 255 specifies that the color is completely opaque. 次の例では、 FromArgb 2 つの色を生成するためにメソッドが使用されています。In the following example, the FromArgb method is used to produce two colors. 1 つ目のカラーは部分的に透明 (アルファ値32) であり、2 つ目のカラーは完全に不透明です。The first color is partially transparent (it has an alpha value of 32), while the second is fully opaque.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque. 
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

または、メソッドを使用FromScRgbすることもできます。これにより、ScRGB 値を使用して色を作成できます。Alternatively, you may use the FromScRgb method, which enables you to use ScRGB values to create a color.

イメージ、描画、ビジュアル、およびパターンによる塗りつぶしPainting with Images, Drawings, Visuals, and Patterns

ImageBrushDrawingBrush、およびVisualBrushクラスを使用すると、イメージ、描画、またはビジュアルを使用して領域を塗りつぶすことができます。ImageBrush, DrawingBrush, and VisualBrush classes enable you to paint an area with images, drawings, or visuals. イメージ、描画、およびパターンによる塗りつぶしの詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」を参照してください。For information about painting with images, drawings, and patterns, see Painting with Images, Drawings, and Visuals.

関連項目See also