Información general sobre pinceles de WPF

Todo lo visible en la pantalla lo es porque lo pintó un pincel. Por ejemplo, se usa un pincel para describir el fondo de un botón, el primer plano del texto y el relleno de una forma. En este tema se presentan los conceptos de pintura con pinceles de Windows Presentation Foundation (WPF) y se proporcionan ejemplos. Los pinceles permiten pintar objetos de interfaz de usuario (UI) con cualquier cosa, desde colores simples y sólidos hasta conjuntos complejos de patrones e imágenes.

Pintura con un pincel

Una clase Brush "pinta" un área con su salida. Distintos pinceles tienen tipos de salida diferentes. Algunos pinceles pintan un área con un color sólido, otros con un degradado, patrón, imagen o dibujo. En la ilustración siguiente se muestran ejemplos de cada uno de los diferentes tipos de Brush.

Ejemplos de pincel

La mayoría de los objetos visuales permiten especificar cómo se pintan. En la tabla siguiente se enumeran algunos objetos y propiedades comunes con los que puede usar Brush.

En las secciones siguientes se describen los distintos tipos de Brush y se proporciona un ejemplo de cada uno.

Pintura con un color sólido

SolidColorBrush pinta un área con un Color sólido. Hay varias maneras de especificar la propiedad Color de un SolidColorBrush: por ejemplo, puede especificar sus canales alfa, rojo, azul y verde o usar uno de los colores predefinidos proporcionados por la clase Colors.

En el ejemplo siguiente se usa SolidColorBrush para pintar el Fill de Rectangle. En la ilustración siguiente se muestra el rectángulo pintado.

Rectángulo pintado mediante 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>

Para más información sobre SolidColorBrush, consulte Información general sobre el dibujo con colores sólidos y degradados.

Pintura con un degradado lineal

LinearGradientBrush pinta un área con un degradado lineal. Un degradado lineal combina dos o más colores a través de una línea, el eje degradado. Se usan objetos GradientStop para especificar los colores en el degradado y sus posiciones.

En el ejemplo siguiente se usa LinearGradientBrush para pintar la propiedad Fill de Rectangle. En la ilustración siguiente se muestra el rectángulo pintado.

Rectángulo pintado mediante 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>

Para más información sobre LinearGradientBrush, consulte Información general sobre el dibujo con colores sólidos y degradados.

Pintura con un degradado radial

RadialGradientBrush pinta un área con un degradado radial. Un degradado radial combina dos o más colores a través de un círculo. Como en la clase LinearGradientBrush, se usan objetos GradientStop para especificar los colores en el degradado y sus posiciones.

En el ejemplo siguiente se usa RadialGradientBrush para pintar la propiedad Fill de un Rectangle. En la ilustración siguiente se muestra el rectángulo pintado.

Rectángulo pintado mediante 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>

Para más información sobre RadialGradientBrush, consulte Información general sobre el dibujo con colores sólidos y degradados.

Pintura con una imagen

ImageBrush pinta un área con ImageSource.

En el ejemplo siguiente se usa ImageBrush para pintar la propiedad Fill de Rectangle. En la ilustración siguiente se muestra el rectángulo pintado.

Un rectángulo pintado mediante una imagen

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>

Para más información sobre la clase ImageBrush, consulte Pintar con imágenes, dibujos y elementos visuales.

Pintura con un dibujo

DrawingBrush pinta un área con un Drawing. Drawing puede contener formas, imágenes, texto y elementos multimedia.

En el ejemplo siguiente se usa DrawingBrush para pintar la propiedad Fill de Rectangle. En la ilustración siguiente se muestra el rectángulo pintado.

Rectángulo pintado mediante 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>

Para más información sobre la clase DrawingBrush, consulte Pintar con imágenes, dibujos y elementos visuales.

Pintura con un objeto visual

VisualBrush pinta un área con un objeto Visual. Entre los ejemplos de objetos visuales se incluyen Button, Page y MediaElement. VisualBrush también le permite proyectar contenido de una parte de la aplicación en otra área; es muy útil para crear efectos de reflejo y ampliar partes de la pantalla.

En el ejemplo siguiente se usa VisualBrush para pintar la propiedad Fill de Rectangle. En la ilustración siguiente se muestra el rectángulo pintado.

Rectángulo pintado mediante 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>

Para más información sobre la clase VisualBrush, consulte Pintar con imágenes, dibujos y elementos visuales.

Pintura mediante pinceles predefinidos y del sistema

Por comodidad, Windows Presentation Foundation (WPF) proporciona un conjunto de pinceles predefinidos y del sistema que puede usar para pintar objetos.

• Para obtener una lista de pinceles predefinidos disponibles, consulte la clase Brushes. Para obtener un ejemplo que muestra cómo usar un pincel predefinido, consulte Cómo: Pintar un área con un color sólido.

• Para obtener una lista del sistema predefinidos disponibles, consulte la clase SystemColors. Para obtener un ejemplo, consulte Cómo: Pintar un área con un pincel del sistema.

Características comunes de los pinceles

Los objetos Brush proporcionan una propiedad Opacity que se puede usar para hacer que un pincel sea transparente o parcialmente transparente. Un valor Opacity de 0 hace que un pincel sea completamente transparente, mientras que un valor Opacity de 1 hace que un pincel sea completamente opaco. En el ejemplo siguiente se usa la propiedad Opacity para hacer una clase SolidColorBrush un 25 % opaca.

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

Si el pincel contiene colores parcialmente transparentes, el valor de opacidad del color se combina a través de la multiplicación con el valor de opacidad del pincel. Por ejemplo, si un pincel tiene un valor de opacidad de 0.5 y un color usado en el pincel también tiene un valor de opacidad de 0.5, el color de salida tendrá un valor de opacidad de 0.25.

Puede rotar, escalar, sesgar y trasladar el contenido de un pincel mediante sus propiedades Transform o RelativeTransform. Para más información, vea Información general sobre la transformación de pinceles.

Dado que son objetos Animatable, los objetos Brush se pueden animar. Para obtener más información, consulte Información general sobre animaciones.

Características de objeto Freezable

Al heredar de la clase Freezable, la clase Brush proporciona varias características especiales: los objetos Brush se pueden declarar como recursos, compartir entre varios objetos y clonar. Además, todos los tipos Brush excepto VisualBrush se pueden hacer de solo lectura para mejorar el rendimiento y hacer que sea seguro para subprocesos.

Para más información sobre las diferentes características que ofrecen los objetos Freezable, consulte Información general sobre objetos Freezable.

Para más información sobre por qué los objetos VisualBrush no se pueden inmovilizar, consulte la página de tipos de VisualBrush.

Vea también

• Brush
• Brushes
• Información general sobre el dibujo con colores sólidos y degradados
• Pintar con imágenes, dibujos y elementos visuales
• Información general sobre objetos Freezable
• Ejemplo de pinceles
• Ejemplo de ImageBrush
• Ejemplo de VisualBrush
• Temas "Cómo..."
• Otras recomendaciones de rendimiento