純色およびグラデーションによる塗りつぶしの概要

[アーティクル]
08/09/2011

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

このトピックは、次のセクションで構成されています。

純色による領域の塗りつぶし
グラデーションによる領域の塗りつぶし
線形グラデーション
放射状グラデーション
透明または部分的に透明なグラデーション終了位置の指定
イメージ、描画、ビジュアル、およびパターンによる塗りつぶし
関連トピック

純色による領域の塗りつぶし

どのようなプラットフォームでも最も一般的な操作の 1 つが、純色の Color で領域を塗りつぶす操作です。このタスクを実現するために、Windows Presentation Foundation (WPF) は SolidColorBrush クラスを提供します。以下のセクションでは、SolidColorBrush で塗りつぶすためのさまざまな方法について説明します。

"XAML" での SolidColorBrush の使用

XAML で純色で領域を塗りつぶすには、次のいずれかの方法を使用します。

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

<Button Background="Red">A Button</Button>
```

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

<Button Background="#FFFF0000">A Button</Button>
```

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

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>  
```

コードでの SolidColorBrush による塗りつぶし

コードで純色で領域を塗りつぶすには、次のいずれかの方法を使用します。

Brushes クラスによって提供されている定義済みブラシのいずれかを使用します。次の例では、Button の Background が Red に設定されています。
```
Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;  
```

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

定義済みの色を使用して SolidColorBrush の Color プロパティを設定する方法を次の例に示します。
```
Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;
```

静的な FromArgb によって、色のアルファ、赤、緑、および青の値を指定できます。これらの各値の一般的な範囲は、0 ～ 255 です。たとえば、アルファ値が 0 の場合は色が完全に透明であることを示し、値が 255 の場合は色が完全に不透明であることを示します。同様に、red 値が 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 のリファレンストピックを参照してください。

グラデーションによる領域の塗りつぶし

グラデーションブラシは、軸に沿ってブレンドしあう複数の色で領域を塗りつぶします。これらを使用して、光と影の印象を作成でき、コントロールの外観を 3 次元にできます。これらを使用して、ガラス、クロム、水、およびその他の滑らかな表面をシミュレートすることもできます。 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;

このコードを実行すると、次のグラデーションが生成されます。

対角線方向の線形グラデーション

メモ : このトピックのグラデーションの例では、開始点と終了点の設定に既定の座標系を使用しています。既定の座標系は境界ボックスに対して相対的です。0 は境界ボックスの 0% を示し、1 は境界ボックスの 100% を示します。この座標系を変更するには、MappingMode プロパティを Absolute という値に設定します。絶対座標系は、境界ボックスに対して相対的ではありません。値は、ローカル空間で直接解釈されます。

GradientStop はグラデーションブラシの基本的なビルドブロックです。グラデーション終了位置は、グラデーション軸に沿った Offset 位置の Color を示します。

グラデーション終了位置の 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) は塗りつぶされている領域の右下隅を表します。 LinearGradientBrush の既定の StartPoint は (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;

前の例で作成したグラデーションを次の図に示します。ブラシのグラデーション終了位置が示されています。結果は異なりますが、この例のグラデーション終了位置は前の線形グラデーションブラシの例のグラデーション終了位置と同じであることに注意してください。

放射状グラデーションのグラデーションストップ

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

さまざまな GradientOrigin、Center、RadiusX、および RadiusY の設定を持つ複数の放射状グラデーションを次の図に示します。

さまざまな GradientOrigin、Center、RadiusX、および RadiusY の設定を持つ RadialGradientBrushes

RadialGradientBrush 設定

透明または部分的に透明なグラデーション終了位置の指定

グラデーション終了位置には不透明度プロパティがないため、マークアップで 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 種類の色の指定方法を示します。最初の例は部分的に透明 (アルファ値が 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;

また、ScRGB 値を使用して色を作成できるようにする FromScRgb メソッドを使用できます。