Información general sobre el dibujo con colores sólidos y degradados

  • Artículo

Actualización: noviembre 2007

En este tema se describe cómo usar los objetos SolidColorBrush, LinearGradientBrush y RadialGradientBrush para pintar con colores sólidos, degradados lineales y degradados radiales.

Este tema contiene las secciones siguientes.

  • Pintar un área con un color sólido
  • Pintar un área con un degradado
  • Degradados lineales
  • Degradados radiales
  • Especificar puntos de degradado parcialmente transparentes o transparentes
  • Pintar con imágenes, dibujos, elementos visuales y modelos
  • Temas relacionados

Pintar un área con un color sólido

Una de las operaciones más comunes en cualquier plataforma es pintar un área con un Color sólido. Para ello, Windows Presentation Foundation (WPF) proporciona la clase SolidColorBrush. En las secciones siguientes, se describen las distintas formas de pintar con SolidColorBrush.

Usar SolidColorBrush en "XAML"

Para pintar un área con un color sólido en XAML, use una de las opciones siguientes.

  • Seleccione un pincel de color sólido predefinido por nombre. Por ejemplo, puede establecer la propiedad Background de un botón en "Red" o "MediumBlue". Para obtener una lista del resto de los pinceles predefinidos de color sólido, vea las propiedades estáticas de la clase Brushes. A continuación, se muestra un ejemplo.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using a named color. -->
<Button Background="Red">A Button</Button>

  • Elija un color de la paleta de colores de 32 bits especificando las cantidades de rojo, verde y azul que se van a combinar en un solo color sólido. El formato para especificar un color de la paleta de 32 bits es "#rrggbb", donde rr es un número hexadecimal de dos dígitos que especifica la cantidad relativa de rojo, gg especifica la cantidad de verde y bb, la cantidad de azul. Además, el color se puede especificar como "#aarrggbb" donde aa especifica el valor alfa, o transparencia, del color. Este enfoque permite crear colores parcialmente transparentes. En el ejemplo siguiente, la propiedad Background de Button se establece en rojo totalmente opaco mediante la notación hexadecimal.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using hexadecimal notation. -->
<Button Background="#FFFF0000">A Button</Button>

  • Use la sintaxis de las etiquetas de las propiedades para describir SolidColorBrush. Esta sintaxis es más prolija pero permite especificar valores adicionales, como la opacidad del pincel. En el ejemplo siguiente, las propiedades Background de dos elementos Button se establecen en rojo totalmente opaco. El color del primer pincel se describe mediante un nombre de color predefinido y el del segundo, mediante la notación hexadecimal.

    <!-- Both of these buttons' backgrounds are painted with red 
     SolidColorBrush objects, described using object element
     syntax. -->
<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>

Pintar con SolidColorBrush en código

Para pintar un área con un color sólido en código, use una de las opciones siguientes.

  • Utilice uno de los pinceles predefinidos proporcionados por la clase Brushes. En el ejemplo siguiente, se establece el valor de la propiedad Background de Button en Red.

    Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;

  • Cree un SolidColorBrush y establezca el valor de su propiedad Color mediante una estructura Color. Puede utilizar un color predefinido de la clase Colors o puede crear un objeto Color mediante el método FromArgb estático.

    En el ejemplo siguiente, se muestra cómo establecer la propiedad Color de SolidColorBrush con un color predefinido.

    Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;

El objeto FromArgb estático permite especificar los valores alfa, rojo, verde y azul del color. El intervalo normal de cada uno de estos valores está comprendido entre 0 y 255. Por ejemplo, un valor alpha de 0 indica que un color es totalmente transparente, mientras que un valor de 255 indica que el color es totalmente opaco. De igual forma, un valor rojo de 0 indica que un color no contiene rojo, mientras un valor de 255 indica que un color contiene la cantidad máxima de rojo posible. En el ejemplo siguiente, el color de un pincel se describe especificando los valores de alfa, rojo, verde y azul.

Para obtener las formas adicionales de especificar el color, vea el tema de referencia Color.

Pintar un área con un degradado

Un pincel de degradado pinta un área con varios colores que se mezclan entre sí a lo largo de un eje. Puede utilizarlos para crear impresiones de luz y sombras, dando una sensación tridimensional a los controles. También puede utilizarlos para simular cristal, cromo, agua y otras superficies suavizadas. WPF proporciona dos tipos de pinceles de degradado: LinearGradientBrush y RadialGradientBrush.

Degradados lineales

LinearGradientBrush pinta un área con un degradado definido a lo largo de una línea, el eje de degradado. Especifique los colores del degradado y su ubicación a lo largo del eje de degradado mediante objetos GradientStop. También puede modificar el eje de degradado, lo que permite crear los degradados horizontal y vertical e invertir la dirección del degradado. El eje de degradado se describe en la sección siguiente. De forma predeterminada, se crea un degradado diagonal.

En el ejemplo siguiente, se muestra el código que crea un degradado lineal con cuatro colores.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

Este código genera el siguiente degradado.

Degradado lineal diagonal

Nota: los ejemplos de degradado de este tema utilizan el sistema de coordenadas predeterminado para establecer los puntos inicial y final. El sistema de coordenadas predeterminado es relativo a un rectángulo de selección: 0 indica un 0 por ciento del rectángulo de selección y 1, un 100 por cien del rectángulo de selección. Puede cambiar este sistema de coordenadas estableciendo la propiedad MappingMode en el valor Absolute. Un sistema de coordenadas absoluto no es relativo respecto a ningún rectángulo de selección. Los valores se interpretan directamente en el espacio local.

GradientStop es el bloque de creación básico de un pincel de degradado. Un punto de degradado especifica una propiedad Color en una propiedad Offset a lo largo del eje de degradado.

  • La propiedad Color del punto de degradado especifica el color del punto. Puede establecer el color mediante un color predefinido (proporcionado por la clase Colors) o especificando los valores ScRGB o ARGB. En XAML, también puede utilizar la notación hexadecimal para describir un color. Para obtener más información, vea la estructura Color.

  • La propiedad Offset del punto de degradado especifica la posición del color del punto en el eje de degradado. El desplazamiento es un objeto Double comprendido entre 0 y 1. Cuanto más se aproxime el valor de desplazamiento de un punto de degradado a 0, más próximo estará el color al principio del degradado. Cuanto más se aproxime el valor de desplazamiento a 1, más próximo estará el color al final del degradado.

El color de cada punto entre los puntos de degradado se interpola linealmente como combinación del color especificado por los dos puntos limitantes de degradado. En la ilustración siguiente se resaltan los puntos de degradado del ejemplo anterior. Los círculos marcan la posición de los puntos de degradado y una línea de guiones muestra el eje de degradado.

Delimitadores de degradado en un degradado lineal

El primer punto de degradado especifica el color amarillo en un desplazamiento de 0.0. El segundo punto de degradado especifica el color rojo en un desplazamiento de 0.25. Los puntos entre estos dos puntos cambian gradualmente del amarillo al rojo a medida que se mueva de izquierda a derecha por el eje de degradado. El tercer punto de degradado especifica el color azul en un desplazamiento de 0.75. Los puntos entre los puntos segundo y tercero de degradado cambian gradualmente del rojo al azul. El cuarto punto de degradado especifica el color verde oscuro en un desplazamiento de 1.0. Los puntos entre los puntos tercero y cuarto de degradado cambian gradualmente del azul al verde oscuro.

Eje de degradado

Como se ha mencionado anteriormente, los puntos de degradado de un pincel de degradado lineal se colocan a lo largo de una línea, el eje de degradado. Puede cambiar la orientación y el tamaño de la línea con las propiedades StartPoint y EndPoint del pincel. Si manipula las propiedades StartPoint y EndPoint del pincel, puede crear degradados horizontales y verticales, invertir la dirección del degradado, comprimir la extensión del degradado, etc.

De forma predeterminada, las propiedades StartPoint y EndPoint del pincel de degradado lineal son relativos al área que se pinta. El punto (0,0) representa la esquina superior izquierda del área que se pinta y (1,1), la esquina inferior derecha. El valor de la propiedad StartPoint predeterminada de LinearGradientBrush es (0,0) y el de su propiedad EndPoint predeterminada es (1,1). De esta forma, se crea un degradado diagonal que empieza en la esquina superior izquierda y se extiende hasta la esquina inferior derecha del área que se pinta. En la ilustración siguiente, se muestra el eje de degradado de un pincel de degradado lineal con las propiedades StartPoint y EndPoint predeterminadas.

Eje de degradado para un degradado lineal diagonal

En el ejemplo siguiente, se muestra cómo crear un degradado horizontal especificando las propiedades StartPoint y EndPoint del pincel. Observe que los puntos de degradado son iguales a los de los ejemplos anteriores; al cambiar las propiedades StartPoint y EndPoint, el degradado se ha cambiado de diagonal a horizontal.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.   
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient;

En la ilustración siguiente, se muestra el degradado que se crea. El eje de degradado se marca con una línea de guiones y los puntos de degradado, con círculos.

Eje de degradado para un degradado lineal horizontal

En el ejemplo siguiente, se muestra cómo crear un degradado vertical.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;

En la ilustración siguiente, se muestra el degradado que se crea. El eje de degradado se marca con una línea de guiones y los puntos de degradado, con círculos.

Eje de degradado para un degradado vertical

Degradados radiales

Como un LinearGradientBrush, un RadialGradientBrush pinta un área con colores que se mezclan juntos a lo largo de un eje. Los ejemplos anteriores mostraron cómo el eje de un pincel de degradado lineal es una línea recta. Un círculo define el eje de un pincel de degradado radial; sus colores "irradian" desde su origen.

En el ejemplo siguiente, se usa un pincel de degradado radial para pintar el interior de un rectángulo.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>


RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

En la ilustración siguiente, se muestra el degradado creado en el ejemplo anterior. Se han resaltado los puntos de degradado del pincel. Observe que, aunque los resultados sean diferentes, los puntos de degradado de este ejemplo son idénticos a los del degradado de los ejemplos anteriores del pincel de degradado lineal.

Delimitadores de degradado en un degradado radial

La propiedad GradientOrigin especifica el punto de inicio del eje de degradado de un pincel de degradado radial. El eje de degradado irradia desde el origen del degradado hacia el círculo del mismo. Al círculo del degradado de un pincel lo definen sus propiedades Center, RadiusX y RadiusY.

Las presentaciones de la ilustración siguientes muestran varios degradados radiales con valores distintos de las propiedades GradientOrigin, Center, RadiusX y RadiusY.

RadialGradientBrushes con valores distintos de GradientOrigin, Center, RadiusX y RadiusY.

Valores de RadialGradientBrush

Especificar puntos de degradado parcialmente transparentes o transparentes

Puesto que los puntos de degradado no proporcionan ninguna propiedad de opacidad, debe especificar el canal alfa de los colores mediante la notación hexadecimal de ARGB del marcado o use el método Color.FromScRgb para crear puntos de degradado que sean transparentes o parcialmente transparentes. En las secciones siguientes, se explica cómo crear puntos de degradado parcialmente transparentes en XAML y en código. Para obtener información sobre cómo establecer la opacidad de todo el pincel, vea la sección Especificar la opacidad de un pincel.

Especificar la opacidad del color en "XAML"

En XAML, se utiliza la notación hexadecimal ARGB para especificar la opacidad de los colores individuales. La notación hexadecimal ARGB utiliza la sintaxis siguiente:

#aarrggbb

aa en la línea anterior representa un valor hexadecimal de dos dígitos utilizado para especificar la opacidad del color. rr, gg y bb representan valores hexadecimales de dos dígitos utilizados para especificar, respectivamente, la cantidad de rojo, verde y azul del color. Cada dígito hexadecimal puede tener un valor comprendido entre 0 y 9 o entre A y F. 0 es el valor mínimo y F, el máximo. Un valor alfa de 00 especifica un color completamente transparente, mientras que un valor alfa de FF crea un color totalmente opaco. En el ejemplo siguiente, se utiliza la notación hexadecimal ARGB para especificar dos colores. El primero es parcialmente transparente (tiene un valor alfa de x 20), mientras que el segundo es totalmente opaco.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Especificar la opacidad del color en código

Al utilizar código, el método FromArgb estático permite especificar un valor alfa al crear un color. El método toma cuatro parámetros de tipo Byte. El primer parámetro especifica el canal alfa del color; los otros tres, los valores de rojo, verde y azul del color. Cada valor debe estar comprendido entre 0 y 255, ambos inclusive. Un valor alfa de 0 especifica un color completamente transparente, mientras que un valor alfa de 255, un color totalmente opaco. En el siguiente ejemplo, se usa el método FromArgb para crear dos colores. El primer color es parcialmente transparente (tiene un valor alfa de 32), mientras que el segundo es totalmente opaco.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque. 
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

O bien, puede utilizar el método FromScRgb, que permite usar los valores de ScRGB para crear un color.

Pintar con imágenes, dibujos, elementos visuales y modelos

Las clases ImageBrush, DrawingBrush y VisualBrush permiten pintar un área con imágenes, dibujos o elementos visuales. Para obtener información sobre cómo pintar con imágenes, dibujos y modelos, vea Pintar con imágenes, dibujos y elementos visuales.

Vea también

Conceptos

Pintar con imágenes, dibujos y elementos visuales

Información general sobre la transformación de pinceles

Niveles de representación de gráficos

Referencia

Brush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush