Partilhar via

WPF Brushes Overview

  • Artigo

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 interface do usuário (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

Tipos de pincel

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.

Classe

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. Existem várias maneiras de especificar o Color de um SolidColorBrush: Por exemplo, você pode especificar seus canais alfa, vermelho, azul e verde ou use um da cor predefinida fornecida pelo Colors classe.

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

Um retângulo pintado com um 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>

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

Um retângulo pintado com um 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>

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

Um retângulo pintado com um 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>

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

Um retângulo pintado por um 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>

For more information about the ImageBrush class, see Pintura com Imagens, Desenhos e Visuais.

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

Um retângulo pintado com um 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>

For more information about the DrawingBrush class, see Pintura com Imagens, Desenhos e Visuais.

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

Um retângulo pintado com um 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>

For more information about the VisualBrush class, see Pintura com Imagens, Desenhos e Visuais.

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.

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.

ObservaçãoObservação:

É mais eficiente para alterar o valor de opacidade de um pincel que alterar a opacidade de um elemento inteiro usando seu UIElement.Opacity propriedade.

You can rotate, scale, skew, and translate a brush's content by using its Transform or RelativeTransform properties. Para obter mais informações, consulte Visão Geral de Transformação de Brush (Pincel).

Because they are Animatable objects, Brush objects can be animated. Para obter mais informações, consulte Revisão de Animação.

Características Freezable (Congeláveis)

Porque ele herda do Freezable classe, o Brush classe fornece vários recursos especiais: Brush objetos podem ser declarados sistema autônomo recursos, compartilhados entre vários objetos e clonado. 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 Visão geral sobre objetos Freezable.

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

Consulte também

Tarefas

Exemplo de pincéis

Exemplo de ImageBrush

Exemplo de DrawingBrush

Exemplo de VisualBrush

Conceitos

Painting with Solid Colors and Gradients Overview

Pintura com Imagens, Desenhos e Visuais

Visão geral sobre objetos Freezable

Otimizando o desempenho: Outras recomendações

Referência

Brush

Brushes

Outros recursos

Brushes How-to Topics