WPF のブラシの概要
画面に表示されるすべてが表示されるのは、ブラシで塗られたためです。 たとえば、ブラシは、ボタンの背景、テキストの前景、図形の塗りつぶしを記述するために使用されます。 このトピックでは、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 は、1 つの Color で領域を塗りつぶします。 SolidColorBrushの Color を指定するには、さまざまな方法があります。たとえば、アルファ、赤、青、緑のチャネルを指定したり、Colors クラスによって提供される定義済みの色のいずれかを使用したりできます。
次の例では、SolidColorBrush を使用して、Rectangleの Fill を描画します。 次の図は、塗りつぶされた四角形を示しています。
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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a SolidColorBrush and use it to
' paint the rectangle.
Dim myBrush As New SolidColorBrush(Colors.Red)
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<SolidColorBrush Color="Red" />
</Rectangle.Fill>
</Rectangle>
SolidColorBrush クラスの詳細については、「単色とグラデーションによる塗りつぶしの概要を参照してください。
線形グラデーションを使用したペイント
LinearGradientBrush は、線形グラデーションを使用して領域を塗りつぶします。 線形グラデーションは、1 つの線 (グラデーション軸) に 2 つ以上の色をブレンドします。 GradientStop オブジェクトを使用して、グラデーションの色とその位置を指定します。
次の例では、LinearGradientBrush を使用して、Rectangleの Fill を描画します。 次の図は、塗りつぶされた四角形を示しています。
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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a LinearGradientBrush and use it to
' paint the rectangle.
Dim myBrush As 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 を使用して塗りつぶされた四角形
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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a RadialGradientBrush and use it to
' paint the rectangle.
Dim myBrush As 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 を描画します。 次の図は、塗りつぶされた四角形を示しています。
イメージを使用して塗りつぶされた四角形
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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create an ImageBrush and use it to
' paint the rectangle.
Dim myBrush As 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 を使用して塗りつぶされた四角形
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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a DrawingBrush and use it to
' paint the rectangle.
Dim myBrush As New DrawingBrush()
Dim backgroundSquare As New GeometryDrawing(Brushes.White, Nothing, New RectangleGeometry(New Rect(0, 0, 100, 100)))
Dim aGeometryGroup As New GeometryGroup()
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))
Dim checkerBrush As New LinearGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.Black, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.Gray, 1.0))
Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)
Dim checkersDrawingGroup As 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 オブジェクトを使って領域を塗ります。 ビジュアル オブジェクトの例としては、Button、Page、MediaElementなどがあります。 VisualBrush を使用すると、アプリケーションのある部分から別の領域にコンテンツを投影することもできます。これは、反射効果と画面の拡大部分を作成するために非常に便利です。
次の例では、VisualBrush を使用して、Rectangleの Fill を描画します。 次の図は、塗りつぶされた四角形を示しています。
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;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a VisualBrush and use it
' to paint the rectangle.
Dim myBrush As New VisualBrush()
'
' Create the brush's contents.
'
Dim aPanel As New StackPanel()
' Create a DrawingBrush and use it to
' paint the panel.
Dim myDrawingBrushBrush As New DrawingBrush()
Dim aGeometryGroup As New GeometryGroup()
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))
Dim checkerBrush As New RadialGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.MediumBlue, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.White, 1.0))
Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)
myDrawingBrushBrush.Drawing = checkers
aPanel.Background = myDrawingBrushBrush
' Create some text.
Dim someText As New TextBlock()
someText.Text = "Hello, World"
Dim fSizeConverter As New FontSizeConverter()
someText.FontSize = CDbl(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) には、オブジェクトの描画に使用できる定義済みブラシとシステム ブラシのセットが用意されています。
使用可能な定義済みブラシの一覧については、Brushes クラスを参照してください。 定義済みのブラシの使用方法を示す例については、「単色で領域を塗りつぶす」を参照してください。
使用可能なシステム ブラシの一覧については、SystemColors クラスを参照してください。 例については、「システム ブラシ を使用して領域をペイントする」を参照してください。
ブラシの一般的な機能
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 Objects Overview」を参照してください。
VisualBrush オブジェクトを固定できない理由の詳細については、「VisualBrush タイプ」ページを参照してください。
関連項目
.NET Desktop feedback