Cómo utilizar degradados en .NET MAUI

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.

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.

 

Degradados en .NET MAUI

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:

gradientes en .net maui

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:

degradados en .net maui

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:

Degradados .NET MAUI

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:

Degradados radiales .net maui

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.

net maui bot

Máster en .NET MAUI

Conviértete en un experto en el uso de .NET MAUI para crear aplicaciones para Android, Windows y iOS, con nuestro máster desde cero.

Deja un comentario

Tu dirección de correo electrónico no será publicada.