Introducción
En toda aplicación móvil la apariencia visual es vital. Cada vez es mayor el esfuerzo depositado a la hora de crear aplicaciones atractivas a la par que intuitivas y en muchos casos conseguir una imagen única que diferencia a la Aplicación del resto es prioritario. Por este motivo, debemos de contar con opciones sencillas de poder personalizar los distintos elementos que componen la interfaz.
Los estilos permitir definir múltiples propiedades visuales de elementos de la interfaz de forma reutilizable.
Hasta ahora, podíamos utilizar C# o XAML para definir estilos. También tenemos la posibilidad de utilizar diferentes diccionarios de recursos entre otras opciones. Ahora, con la llegada de la última versión nightly de Xamarin.Forms, se incluye soporte a definir los estilos utilizando CSS.
NOTA: Puedes ver el conjunto de opciones soportadas en esta Pull Request de Stephane Delcroix.
En este artículo, vamos a conocer las opciones disponibles utilizando CSS para definir estilos.
Estilos utilizando CSS
Vamos a crear un nuevo proyecto Xamarin.Forms utilizando una librería NET Standard. Tras crear el proyecto, actualizamos Xamarin.Forms a su última versión nightly disponible (2.6.0.52014-nightly al momento de escribir este artículo).
NOTA: Para tener acceso a las versiones nightly de Xamarin.Forms es necesario añadir https://www.myget.org/F/xamarinforms-ci/api/v2 como origen de paquetes.
Crear un Stylesheet
Los estilos los aplicaremos utilizando CSS, para ello debemos crear archivo/s CSS. Puedes crear estos archivos en la librería NET Standard en cualquier localización aunque la recomendación sería mantener todos los estilos manteniendo una estructura de carpetas que ayude a mantener el proyecto con facilidad. En nuestro ejemplo, creamos una carpeta llamada Styles y dentro un archivo MainView.css donde aplicaremos los estilos a utilizar en la vista principal de la aplicación.
Es importante recordar que se debe establecer la propiedad Build Action del archivo CSS a EmbeddedResource.
Tras crear el archivo, desde la ContentPage:
<ContentPage.Resources> <StyleSheet Source="../Styles/MainView.css" /> </ContentPage.Resources>
De esta forma, podemos acceder a los estilos CSS desde la ContentPage.
Opciones soportadas (selectores y propiedades)
Los selectores en CSS son imprescindibles para poder aplicar los estilos. El selector es quien determina a que elemento hay que aplicar el estilo.
Los mismos selectores utilizados en CSS se utilizan en este caso en Xamarin.Forms salvo una excepción, ^base , que solo aplica en Xamarin.Forms.
| Selector | Ejemplo | Descripción |
|---|---|---|
.class |
.header |
Selecciona todos los elementos con la propiedad StyleClass que contiene ‘header’. |
#id |
#email |
Selecciona todos los elementos con StyleId establecido a email. |
* |
* |
Secciona todos los elementos. |
element |
label |
Selecciona todos los elementos de tipo Label. |
^base |
^contentpage |
Selecciona todos los elementos con ContentPage como clase base, esto incluye a la propia ContentPage. Este selector no esta presente en la especificación CSS y solo aplica a Xamarin.Forms. |
element,element |
label,button |
Selecciona todos los Buttons y todos los Labels. |
element element |
stacklayout label |
Selecciona todos los Labels dentro de un StackLayout. |
element>element |
stacklayout>label |
Selecciona todos los Labels con un StackLayout como padre directo. |
element+element |
label+entry |
Selecciona todos los Entries que están directamente tras un Label. |
element~element |
label~entry |
Selecciona todos los Entries precedidos por un Label. |
Se pueden realizar combinaciones de diferentes selectores lo que nos otorga grandes posibilidades de forma muy simple. Ejemplo:
StackLayout > ContentView > label.email
El resto de selectores que no aparecen en la tabla no estan soportados por ahora (Ejemplo: @media o @supports).
Pasamos a ver el listado de propiedades soportadas:
| Propiedad | Aplica a |
|---|---|
background-color |
VisualElement |
background-image |
Page |
border-color |
Button, Frame |
border-width |
Button |
color |
Button, DatePicker, Editor, Entry, Label, Picker,
|
direction |
VisualElement |
font-family |
Button, DatePicker, Editor, Entry, Label, Picker,
|
font-size |
Button, DatePicker, Editor, Entry, Label, Picker,
|
font-style |
Button, DatePicker, Editor, Entry, Label, Picker,
|
height |
VisualElement |
margin |
View |
margin-left |
View |
margin-top |
View |
margin-right |
View |
margin-bottom |
View |
min-height |
VisualElement |
min-width |
VisualElement |
opacity |
VisualElement |
padding |
Layout, Page |
padding-left |
Layout, Page |
padding-top |
Layout, Page |
padding-right |
Layout, Page |
padding-bottom |
Layout, Page |
text-align |
Entry, EntryCell, Label, SearchBar |
visibility |
VisualElement |
width |
VisualElement |
Se soportan diferentes formatos de colores (RGB, RGBA, Hex, HSL, etc) y propiedades de Thickness con el mismo formato que en XAML.
Aplicando estilos en XAML
Tras ver el conjunto de selectores y propiedades soportadas, podemos aplicar estilos.
El estilo:
.CSSButton {
background-color: #11313F;
color: white;
font-size: 16;
height: 60;
border: 0;
}
Utilizar el estilo:
<Button
Text="CSS Style Button"
StyleClass="CSSButton" />
Con StyleClass buscamos el estilo definido por un selector de tipo .class.
Ejemplo disponible en GitHub:
Es importante recordar que, la posibilidad de aplicar estilos utilizando CSS es un añadido. No llega para reemplazar la posibilidad de estilos con XAML (en estos momentos, aplicar estilos con XAML o C# cuenta con más características).
El aplicar estilos con CSS cuenta con ciertos beneficios como la flexibilidad aportada por los selectores además de reducir la verbosidad de XAML. Además, hoy día, la mayoría de herramientas de diseño (como Sketch) cuentan con la posibilidad de facilitar los estilos en CSS.
¿Qué te parece esta nueva característica?. Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.
Más información
- XamarinHelp: CSS In Xamarin.Forms
- Blog de David Ortinau: Styling Xamarin.Forms with CSS