WPF のブラシの概要

  • [アーティクル]

更新 : 2007 年 11 月

スクリーン上に表示されるものはすべてブラシによって描画されているため、目で見ることができます。たとえば、ブラシはボタンの背景、テキストの前景、および図形を塗りつぶすために使用されます。ここでは、Windows Presentation Foundation (WPF) のブラシを使用した塗りつぶしの概念について説明し、例を示します。ブラシを使用すると、ユーザー インターフェイス (UI) オブジェクトに、純色やパターンとイメージの複雑なセットなどを適用できます。

ブラシによる塗りつぶし

Brush は、その出力で領域を塗りつぶします。ブラシによって出力の種類がそれぞれ異なります。純色で領域を塗りつぶすブラシもあれば、グラデーション、パターン、イメージ、または描画で塗りつぶすブラシもあります。Brush のさまざまな種類の例を次の図に示します。

ブラシの例

ブラシの種類

ほとんどのビジュアル オブジェクトでは、その塗りつぶし方法を指定できます。Brush を使用できる一般的なオブジェクトとプロパティの一部を次の表に示します。

クラス

ブラシのプロパティ

Border

BorderBrush, Background

Control

Background, Foreground

Panel

Background

Pen

Brush

Shape

Fill, Stroke

TextBlock

Background

以下のセクションでは、さまざまな種類の Brush について説明し、それぞれの例を示します。

純色での塗りつぶし

SolidColorBrush は、領域を均一の Color (純色) で塗りつぶします。SolidColorBrush の Color を指定するにはさまざまな方法があります。たとえば、アルファ、赤、青、緑の各チャネルを指定したり、Colors クラスで提供されている定義済みの色のいずれかを使用したりできます。

SolidColorBrush を使用して、Rectangle の Fill を塗りつぶす例を次に示します。塗りつぶされた四角形を次の図に示します。

SolidColorBrush を使用して塗りつぶされた四角形

SolidColorBrush を使用して描画された四角形

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a SolidColorBrush and use it to
// paint the rectangle.
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

SolidColorBrush クラスの詳細については、「純色およびグラデーションによる塗りつぶしの概要」を参照してください。

線形グラデーションでの塗りつぶし

LinearGradientBrush は、線形グラデーションで領域を塗りつぶします。線形グラデーションは、直線つまりグラデーション軸を境にして 2 つ以上の色をブレンドします。グラデーション内の色とその位置を指定するには、GradientStop オブジェクトを使用します。

LinearGradientBrush を使用して、Rectangle の Fill を塗りつぶす例を次に示します。塗りつぶされた四角形を次の図に示します。

LinearGradientBrush を使用して塗りつぶされた四角形

LinearGradientBrush を使用して描画された四角形

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a LinearGradientBrush and use it to
// paint the rectangle.
LinearGradientBrush myBrush = new LinearGradientBrush();
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

LinearGradientBrush クラスの詳細については、「純色およびグラデーションによる塗りつぶしの概要」を参照してください。

放射状グラデーションでの塗りつぶし

RadialGradientBrush は、放射状グラデーションで領域を塗りつぶします。放射状グラデーションは、円を境にして 2 つ以上の色をブレンドします。LinearGradientBrush クラスと同様、グラデーション内の色とその位置を指定するには、GradientStop オブジェクトを使用します。

RadialGradientBrush を使用して、Rectangle の Fill を塗りつぶす例を次に示します。塗りつぶされた四角形を次の図に示します。

RadialGradientBrush を使用して塗りつぶされた四角形

RadialGradientBrush を使用して描画された四角形

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a RadialGradientBrush and use it to
// paint the rectangle.
RadialGradientBrush myBrush = new RadialGradientBrush();
myBrush.GradientOrigin = new Point(0.75, 0.25);
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="0.75,0.25">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialGradientBrush クラスの詳細については、「純色およびグラデーションによる塗りつぶしの概要」を参照してください。

イメージでの塗りつぶし

ImageBrush は、ImageSource で領域を塗りつぶします。

ImageBrush を使用して、Rectangle の Fill を塗りつぶす例を次に示します。塗りつぶされた四角形を次の図に示します。

イメージを使用して塗りつぶされた四角形

ImageBrush で描画された四角形

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create an ImageBrush and use it to
// paint the rectangle.
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource = 
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg"  />
  </Rectangle.Fill>
</Rectangle>

ImageBrush クラスの詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」を参照してください。

描画での塗りつぶし

DrawingBrush は、Drawing で領域を塗りつぶします。Drawing は、図形、イメージ、テキスト、および、メディアを含むことができます。

DrawingBrush を使用して、Rectangle の Fill を塗りつぶす例を次に示します。塗りつぶされた四角形を次の図に示します。

DrawingBrush を使用して塗りつぶされた四角形

DrawingBrush を使用して描画された四角形

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();

GeometryDrawing backgroundSquare =
    new GeometryDrawing(
        Brushes.White,
        null,
        new RectangleGeometry(new Rect(0, 0, 100, 100)));

GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

LinearGradientBrush checkerBrush = new LinearGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.Gray, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);

myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
myBrush.TileMode = TileMode.Tile;

exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <RectangleGeometry Rect="0,0,50,50" />
                <RectangleGeometry Rect="50,50,50,50" />
              </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
              <LinearGradientBrush>
                <GradientStop Offset="0.0" Color="Black" />
                <GradientStop Offset="1.0" Color="Gray" />
              </LinearGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

DrawingBrush クラスの詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」を参照してください。

ビジュアルでの塗りつぶし

VisualBrush は、Visual オブジェクトで領域を塗りつぶします。Visual オブジェクトの例としては、Button、Page、MediaElement などがあります。また、VisualBrush を使用すると、アプリケーションのある部分の内容を別の領域に投影することもできます。これは、反射効果を作成し、画面の一部を際立たせる場合に非常に役立ちます。

VisualBrush を使用して、Rectangle の Fill を塗りつぶす例を次に示します。塗りつぶされた四角形を次の図に示します。

VisualBrush を使用して塗りつぶされた四角形

VisualBrush を使用して描画された四角形

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a VisualBrush and use it
// to paint the rectangle.
VisualBrush myBrush = new VisualBrush();

//
// Create the brush's contents.
//
StackPanel aPanel = new StackPanel();

// Create a DrawingBrush and use it to
// paint the panel.
DrawingBrush myDrawingBrushBrush = new DrawingBrush();
GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));
RadialGradientBrush checkerBrush = new RadialGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.MediumBlue, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));
GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
myDrawingBrushBrush.Drawing = checkers;
aPanel.Background = myDrawingBrushBrush;

// Create some text.
TextBlock someText = new TextBlock();
someText.Text = "Hello, World";
FontSizeConverter fSizeConverter = new FontSizeConverter();
someText.FontSize = (double)fSizeConverter.ConvertFromString("10pt");
someText.Margin = new Thickness(10);

aPanel.Children.Add(someText);

myBrush.Visual = aPanel;
exampleRectangle.Fill = myBrush;


<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <VisualBrush TileMode="Tile">
      <VisualBrush.Visual>
        <StackPanel>
          <StackPanel.Background>
            <DrawingBrush>
              <DrawingBrush.Drawing>
                <GeometryDrawing>
                  <GeometryDrawing.Brush>
                    <RadialGradientBrush>
                      <GradientStop Color="MediumBlue" Offset="0.0" />
                      <GradientStop Color="White" Offset="1.0" />
                    </RadialGradientBrush>
                  </GeometryDrawing.Brush>
                  <GeometryDrawing.Geometry>
                    <GeometryGroup>
                      <RectangleGeometry Rect="0,0,50,50" />
                      <RectangleGeometry Rect="50,50,50,50" />
                    </GeometryGroup>
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingBrush.Drawing>
            </DrawingBrush>
          </StackPanel.Background>
          <TextBlock FontSize="10pt" Margin="10">Hello, World!</TextBlock>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

VisualBrush クラスの詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」を参照してください。

定義済みブラシおよびシステム ブラシを使用した塗りつぶし

便宜上、Windows Presentation Foundation (WPF) では、オブジェクトの塗りつぶしに使用できる定義済みブラシとシステム ブラシのセットが提供されています。

ブラシの共通機能

Brush オブジェクトが提供する Opacity プロパティを使用すると、ブラシを透明にしたり、部分的に透明にしたりできます。Opacity の値を 0 にするとブラシは完全に透明になり、Opacity の値を 1 にするとブラシは完全に不透明になります。Opacity プロパティを使用して、SolidColorBrush の不透明度を 25% にする例を次に示します。

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <SolidColorBrush Color="Blue" Opacity="0.25" />
  </Rectangle.Fill>
</Rectangle>

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
SolidColorBrush partiallyTransparentSolidColorBrush
    = new SolidColorBrush(Colors.Blue);
partiallyTransparentSolidColorBrush.Opacity = 0.25;
myRectangle.Fill = partiallyTransparentSolidColorBrush;

ブラシに部分的に透明な色が含まれる場合は、ブラシの不透明度の値との乗算により、色の不透明度の値が結合されます。たとえば、ブラシの不透明度の値が 0.5 で、ブラシで使用されている色の不透明度値も 0.5 である場合は、出力される色の不透明度は 0.25 になります。

メモ :

UIElement.Opacity プロパティを使用して要素全体の不透明度を変更するより、ブラシの不透明度の値を変更する方が効率的です。

Transform プロパティまたは RelativeTransform プロパティを使用すると、ブラシのコンテンツの回転、拡大縮小、傾斜、および平行移動を行うことができます。詳細については、「ブラシの変換の概要」を参照してください。

これらは Animatable オブジェクトであるため、Brush オブジェクトはアニメーション化できます。詳細については、「アニメーションの概要」を参照してください。

Freezable の機能

Freezable クラスを継承するので、Brush クラスはいくつかの特殊な機能を備えています。Brush オブジェクトをリソースとして宣言したり、複数のオブジェクトで共有したり、複製したりできます。さらに、VisualBrush を除くすべての種類の Brush は、読み取り専用にして、パフォーマンスを向上させ、スレッド セーフにすることができます。

Freezable のさまざまな機能の詳細については、「Freezable オブジェクトの概要」を参照してください。

VisualBrush オブジェクトを固定できない理由の詳細については、VisualBrush のページを参照してください。

参照

処理手順

ブラシのサンプル

ImageBrush のサンプル

DrawingBrush のサンプル

VisualBrush のサンプル

概念

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

イメージ、描画、およびビジュアルによる塗りつぶし

Freezable オブジェクトの概要

パフォーマンスの最適化 : その他の推奨事項

参照

Brush

Brushes

その他の技術情報

ブラシに関する「方法」トピック