Los degradados son una manera muy sencilla de agregar una mejor experiencia visual en tus aplicaciones multiplataforma. Es por ello, que en esta publicación, voy a mostrarte cómo trabajar con degradados lineales y circulares en .NET MAUI.
Contents
Comprendiendo el concepto de degradados
Antes de iniciar con la aplicación de degradados en .NET MAUI, debemos comprender cómo funcionan, para esto, utilizaré la herramienta CSS gradient.
En este sitio podemos ver una visualización de un degradado lineal de forma inicial.
Esto significa que el degradado se extiende de forma lineal desde un extremo con un color hacia el otro extremo con otro color. En total, se están estableciendo 3 colores que forman parte del degradado en el ejemplo.
También puedes ver un par de opciones adicionales en el sitio:
La primera opción, permite que indiquemos si queremos un degradado lineal, o radial, el cual, básicamente se refiere a un degradado basado en círculos desde dentro hacia afuera. De igual forma, se puede establecer un ángulo del degradado en el caso de degradados lineales. Estos conceptos son importantes, ya que nos servirán para saber cómo definir degradados en .NET MAUI.
Por último, los 3 colores que han sido establecidos, los cuales pueden aumentar o disminuir de acuerdo a nuestras necesidades, y que también pueden ser cambiados de color, son llamados Gradient Stops, ya que definen hasta qué punto uno de los colores afectará al degradado. En resumen, y para que lo tengas en cuenta, podemos definir lo siguiente:
- Tipo de degradado: Cómo se verá el degradado, si de forma lineal o radial.
- Ángulo del degradado: Hacia qué dirección apuntará el degradado.
- Gradient Stops: Los colores en el degradado, y su posición en el degradado.
Creando Degradados Lineales en .NET MAUI
Para agregar degradados a una aplicación .NET MAUI, primero debemos especificar la propiedad Background de un elemento View desde el código XAML. Por ejemplo, podríamos definir esta propiedad de un Grid de la siguiente manera, aunque también es posible hacer lo mismo con otros elementos, como por ejemplo, dentro de un Frame:
<Grid BackgroundColor="Navy">
<Grid.Background>
</Grid.Background>
</Grid> Una vez utilizada la propiedad, empecemos especificando un degradado lineal. Para ello, tenemos que definir un elemento del tipo LinearGradientBrush, con un StartPoint igual a 0,0, y un EndPoint igual a 0,0 también:
<Grid BackgroundColor="Navy">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,0">
</LinearGradientBrush>
</Grid.Background>
</Grid> Seguramente en estos momentos, ya te estés preguntando para qué sirven las propiedades StartPoint y EndPoint.
Estas son propiedades que permiten especificar la orientación del degradado lineal, y te lo explico mejor con esta imagen:
En la imagen se representan diferentes puntos que podemos establecer para un degradado, indicando la dirección desde y hacia dónde queremos que vaya el degradado. Si quisiéramos que el degradado iniciara en la esquina superior izquierda, y terminara en la esquina inferior derecha, tendríamos que especificarlo así en el LinearGradientBrush.
Si quisiéramos que el degradado fuera desde arriba hacia abajo, podríamos indicar como StartPoint 0,0 y como EndPoint 0,1, y así sucesivamente.
<Grid BackgroundColor="Navy">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
</LinearGradientBrush>
</Grid.Background>
</Grid> Con esto ya hemos especificado el tipo de degradado a utilizar y la orientación. El tercer paso, es especificar los colores del degradado. Para ello, debemos utilizar la propiedad GradientStopCollection y dentro, definir la cantidad de GrandientStops que necesitemos, de la siguiente forma:
<Grid BackgroundColor="Navy">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStopCollection>
<GradientStop Offset="0" Color="DarkBlue">
<GradientStop Offset="1" Color="LightBlue">
</GradientStopCollection>
</LinearGradientBrush>
</Grid.Background>
</Grid> Cada GradientStop, define un Offset y un color. El Offset se refiere a la ubicación del GradientStop dentro del degradado, y puede tener un valor entre 0 y 1, mientras que el color define el color de la sección del degradado. El código anterior, daría como resultado lo siguiente:
Creando Degradados Radiales en .NET MAUI
Para el caso de la definición de degradados radiales, basta con cambiar el tipo de degradado por RadialGradientBrush.
A diferencia del degradado lineal, no se definen las propiedades StartPoint ni EndPoint, sino que se define la propiedad Center, que establece la posición central del degradado:
<Grid BackgroundColor="Navy">
<Grid.Background>
<RadialGradientBrush Center="0.5,0.5">
<GradientStopCollection>
<GradientStop Offset="0" Color="DarkBlue">
<GradientStop Offset="1" Color="LightBlue">
</GradientStopCollection>
</RadialGradientBrush>
</Grid.Background>
</Grid> La ejecución de la aplicación, con la adición de un color rosa, da como resultado la siguiente pantalla:
Por último, las pantallas que has visto a lo largo de esta publicación, forman parte de una aplicación práctica de mi curso de .NET MAUI, en la que se toma una frase aleatoría y se le aplica un degradado de varios colores generados de forma automática, y en el que podrás aprender mucho más sobre .NET MAUI.
Aprende .NET MAUI creando proyectos
Aprende cómo crear aplicaciones multiplataforma, gracias al poder de .NET MAUI y una serie de proyectos reales.