Información general sobre pinceles de WPF

Artículo
08/24/2008

Actualización: noviembre 2007

Todo lo que aparece visible en la pantalla lo está porque lo ha pintado un pincel. Por ejemplo, se utiliza un pincel para describir el fondo de un botón, el primero plano del texto y el relleno de una forma. En este tema se introducen los conceptos relativos a pintar con los pinceles de Windows Presentation Foundation (WPF) y se proporcionan ejemplos. Los pinceles permiten pintar los objetos de una interfaz de usuario (UI) con cualquier cosa desde simples colores sólidos hasta conjuntos complejos de tramas e imágenes.

Pintar con un pincel

Un objeto Brush (pincel), "pinta" un área con su salida. Los distintos pinceles tienen tipos de salidas diferentes. Algunos pinceles pintan una área con un color sólido, otros con un degradado, una trama, una imagen o un dibujo. En la ilustración siguiente se muestran ejemplos de cada uno de los tipos de Brush diferentes.

Ejemplos de pinceles

Tipos de pincel

La mayoría de los objetos visuales permiten especificar cómo pintarlos. En la tabla siguiente se muestra una lista de algunos objetos y propiedades comunes con los que puede utilizar un objeto Brush.

Clase	Propiedades de pincel
Border	BorderBrush, Background
Control	Background, Foreground
Panel	Background
Pen	Brush
Shape	Fill, Stroke
TextBlock	Background

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

Pintar con un color sólido

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

En el ejemplo siguiente se usa un objeto SolidColorBrush para pintar la propiedad Fill de un objeto Rectangle. En la siguiente ilustración 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;

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

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

Pintar con un degradado lineal

LinearGradientBrush pinta un área con un degradado lineal. Un degradado lineal mezcla dos o más colores a lo largo de una línea, el eje de degradado. Se utilizan objetos GradientStop para especificar los colores del degradado y sus posiciones.

En el ejemplo siguiente se usa un objeto LinearGradientBrush para pintar la propiedad Fill de un objeto Rectangle. En la siguiente ilustración 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;

<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 obtener más información sobre la clase LinearGradientBrush, vea Información general sobre el dibujo con colores sólidos y degradados.

Pintar con un degradado radial

RadialGradientBrush pinta un área con un degradado radial. Un degradado radial mezcla dos o más colores a lo largo de un círculo. Al igual que con la clase LinearGradientBrush, se utilizan objetos GradientStop para especificar los colores del degradado y sus posiciones.

En el ejemplo siguiente se usa un objeto RadialGradientBrush para pintar la propiedad Fill de un objeto Rectangle. En la siguiente ilustración 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;

<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 obtener más información sobre la clase RadialGradientBrush, vea Información general sobre el dibujo con colores sólidos y degradados.

Pintar con una imagen

Un objeto ImageBrush pinta una área con un objeto ImageSource.

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

Rectángulo pintado mediante una imagen

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

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

Pintar con un dibujo

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

En el ejemplo siguiente se usa un objeto DrawingBrush para pintar la propiedad Fill de un objeto Rectangle. En la siguiente ilustración 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;

<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 obtener más información sobre la clase DrawingBrush, vea Pintar con imágenes, dibujos y elementos visuales.

Pintar con un objeto visual

Un objeto VisualBrush pinta un área con un objeto Visual. Algunos ejemplos de objetos visuales son Button, Page y MediaElement. VisualBrush también permite proyectar el contenido de una parte de la aplicación en otra área; resulta muy útil para crear efectos de reflexión y para ampliar partes de la pantalla.

En el ejemplo siguiente se usa un objeto VisualBrush para pintar la propiedad Fill de un objeto Rectangle. En la siguiente ilustración 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;

<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 obtener más información sobre la clase VisualBrush, vea Pintar con imágenes, dibujos y elementos visuales.

Pintar mediante pinceles predefinidos y del sistema

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

Para obtener una lista de pinceles predefinidos disponibles, consulte la clase Brushes. Para obtener un ejemplo en que se muestra cómo utilizar un pincel predefinido, consulte Cómo: Pintar un área con un color sólido.
Para obtener una lista de pinceles del sistema 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 utilizar para que un pincel sea transparente total o parcialmente. Un valor de Opacity de 0 hace que el pincel sea completamente transparente, mientras que un valor de Opacity de 1 lo hace totalmente opaco. En el ejemplo siguiente se utiliza la propiedad Opacity para hacer que un objeto SolidColorBrush tenga una opacidad del 25 por ciento.

<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 que son parcialmente transparentes, el valor de opacidad del color se combina por 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 utilizado en el pincel también tiene un valor de opacidad de 0,5, el color de salida tiene un valor de opacidad de 0,25.

Nota

Es más eficaz cambiar el valor de opacidad de un pincel que modificar la opacidad de un elemento completo mediante su propiedad UIElement.Opacity.

El contenido de los pinceles se puede girar, sesgar y convertir, y se puede ajustar su escala, mediante las propiedades Transform o RelativeTransform. Para obtener más información, consulte Información general sobre la transformación de pinceles.

Al tratarse de objetos Animatable, los objetos Brush se pueden animar. Para obtener más información, consulte Información general sobre animaciones.

Características de elementos Freezable

Al heredar de la clase Freezable, la clase Brush proporciona varias características especiales: los objetos Brush pueden declararse como recursos, compartirse entre varios objetos y clonarse. Además, todos los tipos de Brush, con excepción de VisualBrush, pueden hacerse de sólo lectura para mejorar el rendimiento y que sean seguros para subprocesos.

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

Para obtener más información sobre los motivos que impiden inmovilizar los objetos VisualBrush, consulte la página del tipo VisualBrush.

Vea también

Compartir a través de