純色およびグラデーションによる塗りつぶしの概要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

信頼性の高い領域を塗りつぶすには、任意のプラットフォームで最も一般的な操作のいずれかの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. 次の例では、BackgroundButtonは 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. 次の例では、BackgroundButtonに設定されている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クラスを作成できる、Color静的FromArgbメソッド。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 2 つの種類のグラデーション ブラシを提供します。LinearGradientBrushRadialGradientBrushします。provides two types of gradient brushes: LinearGradientBrush and RadialGradientBrush.

線状グラデーションLinear Gradients

ALinearGradientBrushに沿って、定義されているグラデーションを使用して領域を塗りつぶします、グラデーション軸します。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

注: このトピックのグラデーションの例は、始点と終点を設定するための既定の座標系を使用します。Note: The gradient examples in this topic use the default coordinate system for setting start points and end points. 既定の座標系は、境界ボックスに対して相対的です。0 は、境界ボックスの 100% を示します、境界ボックスと 1 の 0% を示します。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. グラデーションの分岐点を指定します、Colorで、Offsetグラデーション軸に沿ったします。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 1 ~ 0 の範囲をします。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. ブラシを使用して行のサイズと向きを変更することがありますStartPointEndPointプロパティ。You may change the orientation and size of the line using the brush's StartPoint and EndPoint properties. ブラシを操作することによってStartPointEndPoint水平を作成、および垂直方向のグラデーションのグラデーションの方向を反転、グラデーションの広がりとその詳細を要約します。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. 既定値StartPointLinearGradientBrush(0, 0) とその既定EndPoint(1, 1) は、左上隅から開始し、塗りつぶされる領域の右下隅に拡張する対角線方向のグラデーションを作成します。The 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

ブラシを指定することで、次の例がグラデーションにある水平方向を作成する方法を示しますStartPointEndPointします。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

ように、 LinearGradientBrushRadialGradientBrush軸に沿ってブレンドされるカラーで領域を塗りつぶします。Like 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. ブラシのグラデーション円がによって定義されているそのCenterRadiusX、およびRadiusYプロパティ。A brush's gradient circle is defined by its Center, RadiusX, and RadiusY properties.

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

RadialGradientBrush 設定RadialGradientBrush settings
GradientOrigin、Center、RadiusX、および RadiusY の設定が異なる RadialGradientBrushes。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. 次の例では、2 つの色を指定する 16 進数の ARGB 表記を使用します。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. メソッドは型の 4 つのパラメーターを受け取りますByteします。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