LinearGradientBrush

Introducción:

Cualquier control de XAML puede tener un color de fondo (o una imagen), al igual que el resto de controles, ya sean para WPF (Windows Presentation Foundation) o para las aplicaciones normales.

Pero con WPF (o si lo prefieres con WinFX), puedes definir degradados y otras "monerías".

 

Cómo usar LinearGradientBrush

Para poder darle ese degradado puedes hacerlo con LinearGradientBrush, que es una "propiedad", en realidad es una clase pero se aplica como una propiedad o mejor dicho, un elemento de XAML.
Este elemento lo usarás aplicado a la propiedad Background del control en cuestión.
Por ejemplo, si tienes un botón al que quieres aplicar ese "degradado", puedes hacer lo siguiente:

<Button Name="Button1" Grid.Column="3" Grid.Row="2">
<Button.Background>
    <LinearGradientBrush>
      <GradientStop Color="sc#1, 0.25, 0.5, 1" Offset="0" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.35" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.65" />
      <GradientStop Color="sc#1, 0.45, 0.85, 0.35" Offset="1" />
    </LinearGradientBrush>
</Button.Background>
Añadir</Button>

Esto creará un botón como el de la figura 1:

Figura 1. Botón con LinearGradientBrush

 

Si ese degradado lo quieres aplicar a otro tipo de control, solo tendrás que insertarlo dentro de ese control, y siempre usando el mismo formato, es decir: <control.Background><LinearGradientBrush>...

Los valores de GradientStop pueden ser todos los que creas conveniente, aunque el valor de OffSet debe ir desde 0 a 1, y los que ponga entre esos dos valores, serán degradados "extras" que se añadirán.

Los colores son para el Rojo, Verde y Azul, siendo el valor mínimo el cero y el valor máximo el 1.
Los tres ceros sería el negro y los tres unos el blanco.

En LinearGradientBrush podemos indicar cómo se aplicará el degradado, esto se hace con las propiedades StartPoint y EndPoint. Por defecto los valores para esas dos propiedades son:

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

Pero podemos jugar con ellas para cambiar la forma o aspecto del degradado.
Por ejemplo, si usas este código:

<Button Name="Button2" Grid.Column="3" Grid.Row="3" Margin="4,4,4,4">
<Button.Background>
    <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
      <GradientStop Color="sc#1, 0.25, 0.5, 1" Offset="0" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.35" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.65" />
      <GradientStop Color="sc#1, 0.45, 0.85, 0.35" Offset="1" />
    </LinearGradientBrush>
</Button.Background>
Botón 2</Button>

El degradado será de arriba a abajo, es decir, horizontal, tal como puedes ver en la figura 2.

Figura 2. Degradado horizontal

Por supuesto, si inviertes los valores de StartPoint y EndPoint, el degradado irá al revés.

El siguiente código, que es como el primero, pero con los valores 1,1 y 0,1, producirá el botón de la figura 3.

<Button Name="Button3" Grid.Column="3" Grid.Row="4" Margin="4,4,4,4">
<Button.Background>
    <LinearGradientBrush StartPoint="1,1" EndPoint="0,1">
      <GradientStop Color="sc#1, 0.25, 0.5, 1" Offset="0" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.35" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.65" />
      <GradientStop Color="sc#1, 0.45, 0.85, 0.35" Offset="1" />
    </LinearGradientBrush>
</Button.Background>
Botón 3</Button>

Figura 3. Variación al invertir StartPoint y EndPoint

 

Y si el botón fuera lo suficientemente alto para que se llegara a notar, si simplemente cambias el valor de StartPoint a 1,0, verías que el degradado no es recto, sino que va en ángulo.

Por tanto, jugando tanto con los colores de las propiedades GradientStop como con el punto de inicio y final, tendrás un montón de efectos.

Por supuesto, "calcular" cómo quedará todas esas "posibilidades" es un poco complicado, pero para eso puedes usar algunas de las herramientas de diseño, aunque a día de hoy el Visual Studio Orcas no permite hacer "virguerías", si que te lo permite Expression Blend.

Aunque nunca está de más "juguetear" a mano con el XAMLPad, por ejemplo.

 

 

Bueno, espero que te pueda servir esto que te he explicado, y si no te sirve, a mi si que me servirá, ya que así tendré a mano cómo usar el LinearGradientBrush cuando lo necesite, je, je.

 

Nos vemos.
Guillermo