WPF Brushes Overview

Artikel
02/04/2013

Everything visible on your screen is visible because it was painted by a brush. For example, a brush is used to describe the background of a button, the foreground of text, and the fill of a shape. This topic introduces the concepts of painting with Windows Presentation Foundation (WPF) brushes and provides examples. Brushes enable you to paint user interface (UI) objects with anything from simple, solid colors to complex sets of patterns and images.

Painting with a Brush

A Brush "paints" an area with its output. Different brushes have different types of output. Some brushes paint an area with a solid color, others with a gradient, pattern, image, or drawing. The following illustration shows examples of each of the different Brush types.

Brush examples

Brush types

Most visual objects enable you to specify how they are painted. The following table lists some common objects and properties with which you can use a Brush.

Class	Brush properties
Border	BorderBrush, Background
Control	Background, Foreground
Panel	Background
Pen	Brush
Shape	Fill, Stroke
TextBlock	Background

The following sections describe the different Brush types and provide an example of each.

Paint with a Solid Color

A SolidColorBrush paints an area with a solid Color. There are a variety of ways to specify the Color of a SolidColorBrush: for example, you can specify its alpha, red, blue, and green channels or use one of the predefined color provided by the Colors class.

The following example uses a SolidColorBrush to paint the Fill of a Rectangle. The following illustration shows the painted rectangle.

A Rectangle painted using a SolidColorBrush

A rectangle painted using a SolidColorBrush

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

For more information about the SolidColorBrush class, see Painting with Solid Colors and Gradients Overview.

Paint with a Linear Gradient

A LinearGradientBrush paints an area with a linear gradient. A linear gradient blends two or more colors across a line, the gradient axis. You use GradientStop objects to specify the colors in the gradient and their positions.

The following example uses a LinearGradientBrush to paint the Fill of a Rectangle. The following illustration shows the painted rectangle.

A Rectangle painted using a LinearGradientBrush

A rectangle painted using a LinearGradientBrush

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

For more information about the LinearGradientBrush class, see Painting with Solid Colors and Gradients Overview.

Paint with a Radial Gradient

A RadialGradientBrush paints an area with a radial gradient. A radial gradient blends two or more colors across a circle. As with the LinearGradientBrush class, you use GradientStop objects to specify the colors in the gradient and their positions.

The following example uses a RadialGradientBrush to paint the Fill of a Rectangle. The following illustration shows the painted rectangle.

A Rectangle painted using a RadialGradientBrush

A rectangle painted using a RadialGradientBrush

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

For more information about the RadialGradientBrush class, see Painting with Solid Colors and Gradients Overview.

Paint with an Image

An ImageBrush paints an area with a ImageSource.

The following example uses an ImageBrush to paint the Fill of a Rectangle. The following illustration shows the painted rectangle.

A Rectangle painted using a Image

A Rectangle painted by an ImageBrush

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

For more information about the ImageBrush class, see Painting with Images, Drawings, and Visuals.

Paint with a Drawing

A DrawingBrush paints an area with a Drawing. A Drawing can contain shapes, images, text, and media.

The following example uses a DrawingBrush to paint the Fill of a Rectangle. The following illustration shows the painted rectangle.

A Rectangle painted using a DrawingBrush

A rectangle painted using a DrawingBrush

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

For more information about the DrawingBrush class, see Painting with Images, Drawings, and Visuals.

Paint with a Visual

A VisualBrush paints an area with a Visual object. Examples of Visual objects include Button, Page, and MediaElement. A VisualBrush also enables you to project content from one portion of your application into another area; it's very useful for creating reflection effects and magnifying portions of the screen.

The following example uses a VisualBrush to paint the Fill of a Rectangle. The following illustration shows the painted rectangle.

A Rectangle painted using a VisualBrush

A rectangle painted using a VisualBrush

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

For more information about the VisualBrush class, see Painting with Images, Drawings, and Visuals.

Paint using Predefined and System Brushes

For convenience, Windows Presentation Foundation (WPF) provides a set of predefined and system brushes that you can use to paint objects.

For a list of available predefined brushes, see the Brushes class. For an example showing how to use a predefined brush, see How to: Paint an Area with a Solid Color.
For a list of available system brushes, see the SystemColors class. For an example, see How to: Paint an Area with a System Brush.

Common Brush Features

Brush objects provide an Opacity property that can be used to make a brush transparent or partially transparent. An Opacity value of 0 makes a brush completely transparent, while an Opacity value of 1 makes a brush completely opaque. The following example uses the Opacity property to make a SolidColorBrush 25 percent opaque.

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

If the brush contains colors that are partially transparent, the opacity value of the color is combined through multiplication with the opacity value of the brush. For example, if a brush has an opacity value of 0.5 and a color used in the brush also has an opacity value of 0.5, the output color has an opacity value of 0.25.

Note

It's more efficient to change the opacity value of a brush than it is to change the opacity of an entire element using its UIElement.Opacity property.

You can rotate, scale, skew, and translate a brush's content by using its Transform or RelativeTransform properties. For more information, see Brush Transformation Overview.

Because they are Animatable objects, Brush objects can be animated. For more information, see Animation Overview.

Freezable Features

Because it inherits from the Freezable class, the Brush class provides several special features: Brush objects can be declared as resources, shared among multiple objects, and cloned. In addition, all the Brush types except VisualBrush can be made read-only to improve performance and made thread-safe.

For more information about the different features provided by Freezable objects, see Freezable Objects Overview.

For more information on why VisualBrush objects cannot be frozen, see the VisualBrush type page.

Dela via

WPF Brushes Overview

Painting with a Brush

Paint with a Solid Color

Paint with a Linear Gradient

Paint with a Radial Gradient

Paint with an Image

Paint with a Drawing

Paint with a Visual

Paint using Predefined and System Brushes

Common Brush Features

Freezable Features

See Also

Reference

Concepts

Other Resources

Ytterligare resurser