純色とグラデーションの塗装概要

このトピックでは、 SolidColorBrush、 LinearGradientBrush、および RadialGradientBrush オブジェクトを使用して、純色、線形グラデーション、放射状グラデーションで描画する方法について説明します。

単色でエリアを塗りつぶす

どのプラットフォームでも最も一般的な操作の 1 つは、ソリッド Colorで領域を描画することです。 このタスクを実行するために、Windows Presentation Foundation (WPF) は SolidColorBrush クラスを提供します。 次のセクションでは、 SolidColorBrushで描画するさまざまな方法について説明します。

"XAML" での SolidColorBrush の使用

XAML で領域を純色で塗りつぶすには、次のいずれかのオプションを使用します。

• 定義済みの純色ブラシを名前で選択します。 たとえば、ボタンの Background を "赤" または "MediumBlue" に設定できます。 その他の定義済みの純色ブラシの一覧については、 Brushes クラスの静的プロパティを参照してください。 次に例を示します。

  <!-- This button's background is painted with a red SolidColorBrush,
       described using a named color. -->
  <Button Background="Red">A Button</Button>
  

• 32 ビット カラー パレットから色を選択するには、単一の単色に結合する赤、緑、青の量を指定します。 32 ビット パレットから色を指定する形式は "#rrggbb" です。 rr は赤の相対量を指定する 2 桁の 16 進数で、 gg は緑の量を指定し、 bb は青の量を指定します。 さらに、色は "#aarrggbb" として指定できます。 ここで、aa は色の アルファ 値 (透明度) を指定します。 この方法では、部分的に透明な色を作成できます。 次の例では、16 進数表記を使用して、BackgroundのButtonが完全に不透明な赤に設定されています。

  <!-- This button's background is painted with a red SolidColorBrush,
       described using hexadecimal notation. -->
  <Button Background="#FFFF0000">A Button</Button>
  

• プロパティ タグ構文を使用して、 SolidColorBrushを記述します。 この構文はより詳細ですが、ブラシの不透明度などの追加の設定を指定できます。 次の例では、2 つのBackground要素のButtonプロパティが完全に不透明な赤に設定されています。 最初のブラシの色は、定義済みの色名を使用して記述されます。 2 番目のブラシの色は、16 進表記を使用して記述されます。

  <!-- 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 を使用して描画する

コード内で単色の領域を塗りつぶすには、次のいずれかのオプションを使用します。

• Brushes クラスによって提供される定義済みのブラシのいずれかを使用します。 次の例では、BackgroundのButtonがRedに設定されています。

  Button myButton = new Button();
  myButton.Content = "A Button";
  myButton.Background = Brushes.Red;
  

• SolidColorBrushを作成し、Color構造体を使用してそのColorプロパティを設定します。 Colors クラスの定義済みの色を使用することも、静的なColor メソッドを使用してFromArgbを作成することもできます。

  次の例は、定義済みの色を使用してColorのSolidColorBrush プロパティを設定する方法を示しています。

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

静的 FromArgb を使用すると、色のアルファ、赤、緑、青の値を指定できます。 これらの値の一般的な範囲は 0 から 255 です。 たとえば、アルファ値 0 は色が完全に透明であることを示し、値 255 は色が完全に不透明であることを示します。 同様に、赤の値が 0 の場合は色に赤がないことを示し、値 255 は色に可能な赤の最大量があることを示します。 次の例では、ブラシの色をアルファ、赤、緑、青の値で指定します。

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 リファレンス トピックを参照してください。

グラデーションを使用して領域を塗る

グラデーション ブラシは、軸に沿って互いに混ざり合う複数の色で領域を塗ります。 それらを使用して、光と影の印象を作成し、コントロールに立体感を与えることができます。 また、ガラス、クロム、水、その他の滑らかなサーフェスをシミュレートするために使用することもできます。 WPF には、 LinearGradientBrush と RadialGradientBrushの 2 種類のグラデーション ブラシが用意されています。

線形グラデーション

LinearGradientBrushは、線に沿ってグラデーションが定義された領域(グラデーション軸)を塗りつぶします。 GradientStopオブジェクトを使用して、グラデーションの色とそのグラデーション軸に沿った位置を指定します。 グラデーション軸を変更することもできます。これにより、水平および垂直方向のグラデーションを作成したり、グラデーションの方向を反転させることができます。 グラデーション軸については、次のセクションで説明します。 既定では、斜めのグラデーションが作成されます。

次の例は、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" />
      <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;

このコードでは、次のグラデーションが生成されます。

GradientStopはグラデーション ブラシの基本的な構成要素です。 グラデーションの分岐点は、グラデーション軸に沿ったColorのOffsetを指定します。

• グラデーションの分岐点の Color プロパティは、グラデーションの分岐点の色を指定します。 色を設定するには、( Colors クラスによって提供される) 定義済みの色を使用するか、ScRGB または ARGB 値を指定します。 XAML では、16 進数表記を使用して色を記述することもできます。 詳細については、 Color 構造を参照してください。

• グラデーションの分岐点の Offset プロパティは、グラデーション軸上のグラデーションの分岐点の色の位置を指定します。 オフセットは、0 から 1 の範囲の Double です。 グラデーションの分岐点のオフセット値が 0 に近いほど、色はグラデーションの始点に近づきます。 グラデーションのオフセット値が 1 に近いほど、色はグラデーションの終点に近づきます。

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

最初のグラデーションの分岐点は、 0.0のオフセットで黄色の色を指定します。 2 番目のグラデーションの分岐点は、 0.25のオフセットで赤の色を指定します。 グラデーション軸に沿って左から右に移動すると、これら 2 つの停止間の点が黄色から赤に徐々に変化します。 3 番目のグラデーションの分岐点は、 0.75のオフセットで青の色を指定します。 2 番目と 3 番目のグラデーションの分岐点の間の点は、徐々に赤から青に変わります。 4番目のグラデーション停止ポイントは、オフセット1.0でライムグリーンの色を指定します。 3 番目と 4 番目のグラデーションの分岐点の間の点は、青からライム グリーンに徐々に変化します。

グラデーション軸

前述のように、線形グラデーション ブラシのグラデーションの分岐点は、線 (グラデーション軸) に沿って配置されます。 ブラシの StartPoint プロパティと EndPoint プロパティを使用して、線の向きとサイズを変更できます。 ブラシの StartPoint と EndPointを操作することで、水平方向と垂直方向のグラデーションを作成したり、グラデーションの方向を逆にしたり、グラデーションの広がりを縮小したりすることができます。

既定では、線形グラデーション ブラシの StartPoint と EndPoint は、塗りつぶされている領域を基準にしています。 ポイント (0,0) は、塗りつぶされている領域の左上隅を表し、(1,1) は塗りつぶされている領域の右下隅を表します。 StartPointの既定のLinearGradientBrushは (0,0) で、既定のEndPointは (1,1) です。これは、左上隅から塗りつぶされる領域の右下隅まで斜めのグラデーションを作成します。 次の図は、既定の StartPoint と EndPointを持つ線形グラデーション ブラシのグラデーション軸を示しています。

次の例は、ブラシの StartPoint と EndPointを指定して水平方向のグラデーションを作成する方法を示しています。 グラデーションの分岐点は前の例と同じであることに注意してください。 StartPoint と EndPointを変更するだけで、グラデーションが対角線から水平に変更されました。

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

次の図は、作成されるグラデーションを示しています。 グラデーション軸は破線でマークされ、グラデーションの分岐点は円でマークされます。

次の例では、垂直方向のグラデーションを作成する方法を示します。

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

次の図は、作成されるグラデーションを示しています。 グラデーション軸は破線でマークされ、グラデーションの分岐点は円でマークされます。

放射状グラデーション

LinearGradientBrushと同様に、RadialGradientBrushは軸に沿ってブレンドされた色で領域を描画します。 前の例では、線形グラデーション ブラシの軸が直線である方法を示しました。 放射状グラデーション ブラシの軸は円で定義されます。その色は、その起源から外側に「放射」します。

次の例では、放射状グラデーション ブラシを使用して四角形の内部を描画します。

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

次の図は、前の例で作成したグラデーションを示しています。 ブラシのグラデーションの分岐点が強調表示されています。 結果が異なる場合でも、この例のグラデーションの分岐点は、前の線形グラデーション ブラシの例のグラデーションの分岐点と同じであることに注意してください。

放射状グラデーションのグラデーション停止点wcpsdk_graphicsmm_4gradientstops_rg で

GradientOriginは、放射状グラデーション ブラシのグラデーション軸の始点を指定します。 グラデーション軸は、グラデーションの原点からグラデーションの円に放射されます。 ブラシのグラデーション円は、その Center、 RadiusX、および RadiusY プロパティによって定義されます。

次の図は、 GradientOrigin、 Center、 RadiusX、および RadiusY の設定が異なる複数の放射状グラデーションを示しています。

GradientOrigin、Center、RadiusX、RadiusY の設定が異なる RadialGradientBrushes。

透明または Partially-Transparent のグラデーション停止点を指定する

グラデーションの分岐点は不透明度プロパティを提供しないため、マークアップで ARGB 16 進表記を使用して色のアルファ チャネルを指定するか、 Color.FromScRgb メソッドを使用して、透明または部分的に透明なグラデーションの分岐点を作成する必要があります。 次のセクションでは、XAML とコードで部分的に透明なグラデーションの分岐点を作成する方法について説明します。

"XAML" での色の不透明度の指定

XAML では、ARGB の 16 進数表記を使用して、個々の色の不透明度を指定します。 ARGB 16 進数表記では、次の構文が使用されます。

# aarrggbb

前の行の aa は、色の不透明度を指定するために使用される 2 桁の 16 進数の値を表します。 rr、gg、bb はそれぞれ、色の赤、緑、青の量を指定するために使用される 2 桁の 16 進数の値を表します。 各 16 進数には、0 ~ 9 または A から F の値を指定できます。 0 は最小の値で、F は最大です。 アルファ値 00 は完全に透明な色を指定し、FF のアルファ値は完全に不透明な色を作成します。 次の例では、16 進数の ARGB 表記を使用して 2 色を指定しています。 1 つ目は部分的に透明で (アルファ値は x20)、2 つ目は完全に不透明です。

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

コードで色の不透明度を指定する

コードを使用する場合、静的 FromArgb メソッドを使用すると、色を作成するときにアルファ値を指定できます。 このメソッドは、 Byte型の 4 つのパラメーターを受け取ります。 最初のパラメーターは、色のアルファ チャネルを指定します。他の 3 つのパラメーターは、色の赤、緑、青の値を指定します。 各値は、0 ~ 255 の範囲にする必要があります。 アルファ値 0 は色が完全に透明であることを指定し、アルファ値 255 は色が完全に不透明であることを指定します。 次の例では、 FromArgb メソッドを使用して 2 つの色を生成します。 最初の色は部分的に透明ですが (アルファ値は 32 です)、2 番目の色は完全に不透明です。

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 値を使用して色を作成することもできます。

イメージ、描画、ビジュアル、およびパターンを使用した描画

ImageBrush、 DrawingBrush、および VisualBrush クラスを使用すると、画像、描画、またはビジュアルを使用して領域を描画できます。 イメージ、描画、およびパターンを使用した描画の詳細については、「 イメージ、描画、およびビジュアルを使用した描画」を参照してください。

こちらも参照ください

• Brush
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• 画像、イラスト、視覚要素を用いた描画
• ブラシの変換の概要
• グラフィックスレンダリング層