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.
En ocasiones, se desarrollan diferentes aplicaciones para la misma empresa o marca comercial. Hablamos de aplicaciones totalmente diferentes pero que sin duda, van a compartir algunos elementos visuales específicos como colores, logos e incluso algunos estilos visuales (forma de botones, etc.).
¿Cómo lograr reutilizar estilos entre diferentes aplicaciones Xamarin.Forms?
ResourceDictionary
Los recursos XAML son objetos que podemos reutilizar más de una vez. Hablamos desde un sencillo color o tamaño de fuente, a el uso de estilos. Los diccionarios de recursos o ResourceDictionaries permiten definir una zona donde definir recursos.
Podemos definir recursos a nivel de elemento visual, a nivel de página e incluso a nivel de Aplicación.
¿Cómo definimos recursos en otra librería?.
Buscamos tener una librería con recursos, estilos y/o converters que sea compartida entre diferentes aplicaciones:
Librería
- Aplicación 1
- Aplicación 2
Creando una librería
Comenzamos creando una librería portable (PCL). En Visual Studio, nuevo proyecto de tipo PCL:
Añadimos el paquete NuGet de Xamarin.Forms. Y a continuación, añadimos una página de tipo ContentPage:
Renombramos ContentPage por ResourceDictionary en la página recien creada.
Todo listo!.
Bastará con añadir recursos, estilos o converters. Ejemplo:
<Style x:Key="SharedButtonStyle" TargetType="Button"> <Setter Property="BackgroundColor" Value="Red" /> <Setter Property="Rotation" Value="45" /> </Style>
Utilizando la librería
Para utilizar la librería desde una aplicación Xamarin.Forms, comenzamos añadiendo la referencia a la librería desde la aplicación:
Añadida la referencia, llega el paso de mayor importancia. A nivel de Aplicación, tenemos la posibilidad de añadir recursos en un diccionario de recursos:
<Application.Resources> <ResourceDictionary> </ResourceDictionary> </Application.Resources>
Vamos a utilizar la propiedad MergedWith para añadir a los estilos de la aplicación, los estilos de la librería:
<Application xmlns:styles="clr-namespace:Styles;assembly=Styles"> <Application.Resources> <ResourceDictionary MergedWith="styles:ButtonStyles"> </ResourceDictionary> </Application.Resources> </Application>
El resultado:
Realizamos una combinación de estilos a nivel de elemento visual, página, Aplicación e incluso desde otra librería (último botón). Tenéis el código fuente del ejemplo utilizado disponible en GitHub:
Recuerda, cualquier tipo de duda o sugerencia es bienvenida en los comentario del artículo.
Más información
- Documentación Xamarin: Resource Dictionaries
- Artículo relacionado: [Xamarin.Forms] Novedades de la versión 1.3: Estilos