Información general sobre pinceles de WPF
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 primer 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 user interface (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
.jpg "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 |
|---|---|
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
.png "Rectángulo pintado mediante 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>
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
.jpg "Rectángulo pintado mediante 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>
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
.jpg "Rectángulo pintado mediante 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>
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
.jpg "Rectángulo pintado mediante 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>
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
.jpg "Rectángulo pintado mediante 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>
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
.jpg "Rectángulo pintado mediante 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>
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, vea 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.
.gif "Nota") 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
Referencia
Conceptos
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
Optimizar el rendimiento: Otras recomendaciones