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

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

Pintar un área con un color sólido

Una de las operaciones más comunes en cualquier plataforma es pintar un área con un sólido Color . Para realizar esta tarea, Windows Presentation Foundation (WPF) proporciona la SolidColorBrush clase. En las secciones siguientes se describen las distintas formas de pintar con un 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 su nombre. Por ejemplo, puede establecer un botón Background en "red" o "MediumBlue". Para obtener una lista de otros pinceles de color sólido predefinidos, vea las propiedades estáticas de la Brushes clase. 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 en la paleta de colores de 32 bits; para ello, especifique las cantidades de rojo, verde y azul que se combinarán en un 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 especifica la cantidad de azul. Además, el color se puede especificar como "#aarrggbb", donde aa especifica el valor alfa, o la transparencia, del color. Este enfoque le permite crear colores que sean parcialmente transparentes. En el ejemplo siguiente, el 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 etiquetas de propiedad para describir un SolidColorBrush . Esta sintaxis es más detallada y le permite especificar una configuración adicional, como la opacidad del pincel. En el ejemplo siguiente, las Background propiedades de dos Button elementos se establecen en rojo completamente opaco. El color del primer pincel se describe con un nombre de color predefinido. El color del segundo pincel se describe con una 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 el código

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

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

    Button myButton = new Button();
    myButton.Content = "A Button";
    myButton.Background = Brushes.Red;
    
  • Cree un SolidColorBrush y establezca su Color propiedad mediante una Color estructura. Puede usar un color predefinido de la Colors clase o puede crear Color con el FromArgb método estático.

    En el ejemplo siguiente se muestra cómo establecer la Color propiedad 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 estático FromArgb permite especificar los valores alfa, rojo, verde y azul del color. El intervalo habitual de cada uno de estos valores es 0 a 255. Por ejemplo, un valor alfa de 0 indica que un color es completamente transparente, mientras que un valor de 255 indica que es completamente opaco. Del mismo modo, un valor rojo de 0 indica que un color no tiene rojo, mientras que un valor de 255 indica que un color tiene la cantidad máxima posible de rojo. En el ejemplo siguiente, el color de un pincel se describe al especificar los valores alfa, rojo, verde y azul.

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

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color =
    Color.FromArgb(
        255, // Specifies the transparency of the color.
        255, // Specifies the amount of red.
        0, // specifies the amount of green.
        0); // Specifies the amount of blue.

myButton.Background = mySolidColorBrush;

Para más formas de especificar el color, vea el Color tema de referencia.

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 usarlos para crear impresiones de luz y sombra, lo da a los controles una sensación tridimensional. También puede usarlos para simular vidrio, cromo, agua y otras superficies lisas. WPF proporciona dos tipos de pinceles de degradado: LinearGradientBrush y RadialGradientBrush .

Degradados lineales

LinearGradientBrushDibuja un área con un degradado definido a lo largo de una línea, el eje de degradado. Los colores del degradado y su ubicación se especifican a lo largo del eje de degradado mediante GradientStop objetos. También puede modificar el eje de degradado, lo que le permite crear degradados horizontales y verticales e invertir la dirección de degradado. El eje de degradado se describe en la sección siguiente. De manera 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 degradado siguiente:

Degradado lineal diagonal

Nota

En los ejemplos de degradado de este tema se usa el sistema de coordenadas predeterminado para establecer puntos de inicio y extremos. El sistema de coordenadas predeterminado está relacionado con un rectángulo de selección: 0 indica 0 por ciento del rectángulo de selección, mientras que 1 indica el 100 por ciento del mismo. Puede cambiar este sistema de coordenadas estableciendo la MappingMode propiedad en el valor Absolute . Un sistema de coordenadas absoluto no está relacionado con un rectángulo de selección. Los valores se interpretan directamente en el espacio local.

GradientStopEs el bloque de creación básico de un pincel de degradado. Un delimitador de degradado especifica un Color a Offset lo largo del eje de degradado.

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

  • La propiedad del delimitador de degradado Offset especifica la posición del color del delimitador de degradado en el eje de degradado. El desplazamiento es un Double que va de 0 a 1. Cuanto más se acerque a 0 el valor de desplazamiento de un delimitador de degradado, más cerca del inicio del degradado está el color. Cuanto más se acerque a 1 el valor de desplazamiento del degradado, más cerca del final del degradado está el color.

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

Delimitadores de degradado en un degradado lineal

El primer delimitador de degradado especifica el color amarillo con un desplazamiento de 0.0. El segundo delimitador de degradado especifica el color rojo con un desplazamiento de 0.25. Los puntos entre estos dos delimitadores cambian gradualmente de amarillo a rojo a medida que se mueve de izquierda a derecha a lo largo del eje de degradado. El tercer delimitador de degradado especifica el color azul con un desplazamiento de 0.75. Los puntos entre el segundo y el tercer delimitador de degradado cambian gradualmente de rojo a azul. El cuarto delimitador de degradado especifica el color verde lima con un desplazamiento de 1.0. Los puntos entre el tercer y el cuarto delimitador de degradado cambian gradualmente de azul a verde lima.

El eje de degradado

Tal como se mencionó anteriormente, los delimitadores de degradado de un pincel de degradado lineal están ubicados a lo largo de una línea, el eje de degradado. Puede cambiar la orientación y el tamaño de la línea mediante las StartPoint propiedades y del pincel EndPoint . Manipulando el y el pincel StartPoint EndPoint , puede crear degradados horizontales y verticales, invertir la dirección del degradado, condensar la distribución del degradado, etc.

De forma predeterminada, los pinceles de degradado lineal StartPoint y EndPoint son relativos al área que se está pintando. El punto (0,0) representa la esquina superior izquierda del área que se pinta, mientras que (1,1) representa la esquina inferior derecha de la misma. El valor predeterminado StartPoint de LinearGradientBrush es (0,0) y su valor predeterminado EndPoint es (1,1), que crea un degradado diagonal que comienza en la esquina superior izquierda y se extiende hasta la esquina inferior derecha del área que se está pintando. En la ilustración siguiente se muestra el eje de degradado de un pincel de degradado lineal con default StartPoint y EndPoint .

Eje de degradado para un degradado lineal diagonal

En el ejemplo siguiente se muestra cómo crear un degradado horizontal especificando el y el del pincel StartPoint EndPoint . Observe que los delimitadores de degradado son los mismos que en los ejemplos anteriores. con solo cambiar 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 creó. El eje de degradado está marcado con una línea discontinua, mientras que los delimitadores de degradado están marcados 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 creó. El eje de degradado está marcado con una línea discontinua, mientras que los delimitadores de degradado están marcados con círculos.

Eje de degradado para un degradado vertical

Degradados radiales

Como LinearGradientBrush , pinta un RadialGradientBrush área con colores que se combinan a lo largo de un eje. En los ejemplos anteriores se mostró que el eje de un pincel de degradado lineal es una línea recta. El eje de un pincel de degradado radial está definido con un círculo; sus colores "se irradian" hacia afuera 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 que se creó en el ejemplo anterior. Se resaltan los delimitadores de degradado del pincel. Tenga en cuenta que, a pesar de que los resultados son distintos, los delimitadores de degradado de este ejemplo son idénticos a los de los ejemplos de pincel de degradado lineal anteriores.

Delimitadores de degradado en un degradado radial

GradientOriginEspecifica el punto inicial del eje de degradado de un pincel de degradado radial. El eje de degradado irradia desde el origen del degradado al círculo del degradado. El círculo de degradado de un pincel se define mediante sus Center RadiusX propiedades, y RadiusY .

En la ilustración siguiente se muestran varios degradados radiales con GradientOrigin valores diferentes,, Center RadiusX y RadiusY .

Configuración de RadialGradientBrush RadialGradientBrushes con distintos valores de GradientOrigin, Center, RadiusX y RADIUS.

Especificación de delimitadores de degradado transparentes o parcialmente transparentes

Dado que los delimitadores de degradado no proporcionan una propiedad Opacity, debe especificar el canal alfa de los colores mediante la notación hexadecimal ARGB en el marcado o utilizar el Color.FromScRgb método para crear delimitadores de degradado que son transparentes o parcialmente transparentes. En las secciones siguientes se explica cómo crear delimitadores de degradado parcialmente transparentes en XAML y en el código.

Especificación de la opacidad del color en "XAML"

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

# aa rrggbb

El valor aa de la línea anterior representa un valor hexadecimal de dos dígitos que se usa para especificar la opacidad del color. Cada uno de los valores rr, gg y bb representa un valor hexadecimal de dos dígitos que se usa para especificar la cantidad de rojo, verde y azul en el color. Cada dígito hexadecimal debe tener un valor entre 0 t 9 y entre A y F. 0 es el valor menor y F, el mayor. Un valor alfa de 00 especifica un color completamente transparente, mientras que un valor alfa de FF crea un color completamente opaco. En el ejemplo siguiente, la notación ARGB hexadecimal se usa para especificar dos colores. El primero es parcialmente transparente (tiene un valor alfa de x20), mientras que el segundo es completamente 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>

Especificación de la opacidad del color en el código

Cuando se usa código, el FromArgb método 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, mientras que los otros tres especifican los valores rojo, verde y azul del color. Cada valor debe estar comprendido entre 0 y 255, ambos inclusive. Un valor alfa de 0 especifica que el color es completamente transparente, mientras que un valor alfa de 255 especifica que el color es completamente opaco. En el ejemplo siguiente, el FromArgb método se utiliza para generar dos colores. El primer color es parcialmente transparente (tiene un valor alfa de 32), mientras que el segundo es completamente 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;

Como alternativa, puede utilizar el FromScRgb método, que le permite usar valores ScRGB para crear un color.

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

ImageBrushDrawingBrush VisualBrush las clases, y permiten pintar un área con imágenes, dibujos u objetos visuales. Para información sobre cómo pintar con imágenes, dibujos y patrones, consulte el artículo Pintar con imágenes, dibujos y elementos visuales.

Consulte también