[Xamarin.Forms] Estilos con CSS

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).

Xamarin.Forms Nightly

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 ButtonFrame
border-width Button
color ButtonDatePickerEditorEntryLabelPicker

SearchBarTimePicker

direction VisualElement
font-family ButtonDatePickerEditorEntryLabelPicker,

SearchBarTimePickerSpan

font-size ButtonDatePickerEditorEntryLabelPicker

SearchBarTimePickerSpan

font-style ButtonDatePickerEditorEntryLabelPicker

SearchBarTimePickerSpan

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 LayoutPage
padding-left LayoutPage
padding-top LayoutPage
padding-right LayoutPage
padding-bottom LayoutPage
text-align EntryEntryCellLabelSearchBar
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.

El resultado

Ejemplo disponible en GitHub:

Ver 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

Anuncios

4 pensamientos en “[Xamarin.Forms] Estilos con CSS

  1. Pingback: Xamarin Forms - Personalizando seu app com CSS - Robson Amorim

  2. Hola Javier,

    Graciad por tus aportaciones.
    Una pregunta ¿se puede cambiar el styleclass de un boton por ejemplo en tiempo de ejecucion?

    Gracias

  3. Pingback: Xamarin Forms - Personalizando seu app com CSS | Lambda3

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 )

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 )

Google+ photo

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

Conectando a %s