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
Javier Suárez | Blog 