Cómo indicar el color de fondo con degradado de los elementos de XAML por medio de LinearGradientBrush.
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".
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