[Xamarin.Forms] Brushes

Introducción

Con la llegada de Xamarin.Forms 4.8 llega una funcionalidad altamente esperada, la posibilidad de usar Brushes o lo que es lo mismo, gradientes. En este artículo, vamos a conocer las nuevas posibilidades que tenemos usando brushes.

Brushes

Podemos usar un Brush para pintar el interior y el contorno (en algunos casos) de las vistas, Layouts y formas que componen la interfaz de usuario.

Para usar un gradiente en el fondo de cualquier View, podemos usar la propiedad Fill que espera un valor de tipo Brush. Tenemos las siguientes opciones:

  • SolidColorBrush
  • LinearGradientBrush
  • RadialGradientBrush

SolidColorBrush

SolidColorBrush pinta un área con un único color, como por ejemplo rojo o azul. Se trata del Brush más básico. Desde código XAML podemos usar SolidColorBrush de diferentes maneras:

  • Creando un objeto de tipo SolidColorBrush.
  • Usando una cadena que de formato al color que define al Brush (Ejemplo, color hexadecimal).

Veamos ejemplos:

<Grid
     Background="#FF9988"/>

En el ejemplo anterior, gracias a un TypeConverter podemos definir el Brush de forma sencilla, de forma similar a establecer un color de fondo.

<SolidColodBrush x:Key="MyBrush" Color="#FF9988" />


<Grid
     Background="{StaticResource MyBrush}"/>

LinearGradientBrush

LinearGradientBrush pinta un área con un degradado que se define a lo largo de una línea. Esta línea es el eje de degradado. Los colores del degradado y su ubicación en el eje de degradado se especifican con objetos de tipo GradientStop.

NOTA: Por defecto, el eje de degradado va de la esquina superior izquierda a la esquina inferior derecha, es decir, se crea un degradado en diagonal.

Cada GradientStop especifica el Color que se utiliza en el eje hasta cierto Offset. El color se puede establecer usando un nombre de color predefinido o mediante valores mientras que la propiedad Offset especifica la posición de cada GradientStop en el eje de degradado. Un objeto Offset es de tipo double con valores entre 0 y 1. Un Offset con un valor de 0 sitúa el GradientStop al principio del eje de degradado; es decir, cercano a su StartPoint. Por otro lado, un Offset con un valor de 1 sitúa el GradientStop en su EndPoint.

Para cambiar la dirección del degradado usamos las propiedades StartPoint y EndPoint. Podemos crear degradados horizontales o verticales, invertir el sentido de degradado, etc.

Veamos un ejemplo:

<LinearGradientBrush 
     StartPoint="0, 0" EndPoint="1, 0">
     <LinearGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0.1" />
          <GradientStop Color="Pink" Offset="1.0" />
     </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

El resultado:

LinearGradientBrush

RadialGradientBrush

Dibuja un degradado radial definido por las propiedades Center, RadiusX y RadiusY. El origen del degradado se establece usando la propiedad Center.

NOTA: Los colores del degradado se inician en el centro de la elipse y terminan en el radio.

Al igual que usando LinearGradientBrush, los colores del degradado radial se definen creando una colección de GradientStops.

Veamos un ejemplo:

<RadialGradientBrush 
     Center="0.5, 0.5">
     <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0.1" />
          <GradientStop Color="Pink" Offset="1.0" />
     </RadialGradientBrush.GradientStops>
</RadialGradientBrush>

El resultado:

RadialGradientBrush

Gradientes en todas partes!

VisualElement cuenta ahora con una nueva propiedad Background esperando un objeto de tipo Brush. ¿Qué quiere decir esto?. Significa que cualquier View en Xamarin.Forms, es decir, en los controles, layouts e incluso páginas podemos usar gradientes ahora.

E incluso en NavigationPage o TabbedPage:

Gradientes en todas partes!

O usando Shapes:

Gradientes en Shapes

NOTA: Puedes notar que al usar Shapes se pueden usar brushes no solo para rellenar la figura, también para definir el contorno.

Usando CSS

Podemos definir brushes en código XAML y C#, pero en Xamarin.Forms también podemos configurar la apariencia de la aplicación usando CSS. Llega también el soporte a brushes usando CSS.

Veamos un ejemplo:

.linearGradientStyleWithCss90deg {
background: linear-gradient(90deg, rgb(255, 0, 0) 0%,rgb(255, 153, 51) 60%);
}

.linearGradientStyleWithCss180deg {
background: linear-gradient(180deg, rgb(255, 0, 0) 0%,rgb(255, 153, 51) 60%);
}

.linearGradientStyleWithCss270deg {
background: linear-gradient(270deg, rgb(255, 0, 0) 0%,rgb(255, 153, 51) 60%);
}

.radialGradientStyleWithCss {
background: radial-gradient(circle, rgb(255, 0, 0) 25%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 75%);
}

.radialGradientStyleWithCssLeft {
background: radial-gradient(circle at left, rgb(255, 0, 0) 25%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 75%);
}

.radialGradientStyleWithCssRight {
background: radial-gradient(circle at right, rgb(255, 0, 0) 25%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 75%);
}

El resultado:

Usando CSS

En las últimas versiones de Xamarin.Forms hemos ido recibiendo algunas novedades relacionadas puramente con las posibilidades a la hora de crear interfaces de usuario personalizadas. Funcionalidad como shapes, poder hacer clip de vistas o brushes permiten un número mayor de posibilidades para personalizar la interfaz de usuario y también a la hora de crear controles personalizados.

¿Qué te parecen estas novedades?. Recuerda, puedes dejar tu duda o pregunta en los comentarios de la entrada.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s