[Xamarin.Forms] Novedades de la versión 1.3: Estilos

Xamarin LogoNovedades de Xamarin.Forms 1.3

Recientemente Xamarin lanzo la version 1.3 definitiva de Xamarin.Forms con una cantidad de novedades muy sustansiosa. Entre otras novedades contamos con:

  • Soporte para Estilos.
  • Soporte para Behaviors.
  • Soporte para Triggers (DatTriggers y MultiTriggers).
  • Nuevo miembro en las páginas, OnBackButtonPressed para gestionar la pulsación del botón físico atrás.
  • Mejoras en el DependencyService para añadir más flexibilidad a la hora de registrar dependencias.
  • Corrección de bugs.

Del listado podemos sacar varias opciones muy interesantes entre las que destaca el uso de estilos. En este artículo vamos a analizar todas las novedades relacionadas con el uso de estilos en Xamarin.Forms 1.3.

¿Te apuntas?

Estilos

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.

Para analizar todas las novedades en estilos incluidas en Xamarin.Forms 1.3 vamos a crear un nuevo proyecto desde cero:

Nuevo proyecto Xamarin Forms

Nuevo proyecto Xamarin Forms

Tras crear el proyecto procedemos a actualizar a Xamarin.Forms 1.3. Para ello, vamos a gestionar los paquetes NuGet a nivel de solución.

NuGet Xamarin.Forms 1.3

NuGet Xamarin.Forms 1.3

NOTA: Si tenéis problemas al instalar Xamarin. 1.3 aseguráos de contar con la última versión de NuGet. Versiones antiguas de NuGet pueden ocasionar problemas en la instalación. Para asegurar tener la última versión debemos dirigirnos a Herramientas > Extensiones y Actualizaciones -> Instalados. Aqui podremos seleccionar NuGet e instalar la última versión.

Utilizaremos elementos simples para aprender a utilizar controles, en este ejemplo, botones. Podemos modificar la apariencia del control estableciendo directamente propiedades en el control:

<Button
     TextColor="Yellow"
     Text="Sin Estilo" />

El resultado:

Apariencia de nuestro botón

Apariencia de nuestro botón

Realmente es algo bastante sencillo, pero… ¿qué ocurriría si tuviesemos múltiples botones en la Aplicación que deben tener la misma apariencia visual?.

No suena muy óptimo repetir la misma asignación de propiedades una y otra vez, ¿cierto?. En estos casos lo ideal es utilizar estilos. Podemos definir un estilo directamente en un elemento visual:

<Button
     Text="Estilo como recurso del botón">
     <Button.Style>
        <Style TargetType="Button">
          <Setter Property="TextColor" Value="Blue" />
        </Style>
     </Button.Style>
</Button>
Estilo aplicado al botón

Estilo aplicado al botón

El estilo se define con propiedades Setter. Cada propiedad establecidad de tipo Setter puede modificar el valor de una propiedad del elemento indicado en TargetType. Eastablecemos la propiedad en Property y el valor en Value. En nuestro pequeño ejemplo, contamos con un Setter que modifica la propiedad TextColor del elemento de tipo Button.

Continuamos. Si tuviesemos múltiples botones y quisieramos aplicar el mismo estilo, de la forma anterior no logramos reutilizar código. Podemos reutilizar estilos de manera muy simple. Todas las páginas tienen una propiedad Resources. Esta propiedad es de tipo ResourceDictionary, permitiendo contener un diccionario de claves de tipo string y de valor de tipo object.

<ContentPage.Resources>
</ContentPage.Resources>

El estilo definido en los recursos de la página:

<Style x:Key="ButtonStyle" TargetType="Button">
     <Setter Property="HorizontalOptions" Value="Center" />
     <Setter Property="VerticalOptions" Value="Center" />
     <Setter Property="TextColor" Value="Green" />
</Style>

Definimos el estilo como hemos visto previamente con un conjunto n de Setters. Es importante recalcar que establecemos la propiedad Key que nos permite establecer una clave al estilo para poder referenciar al mismo en cualquier elemento de manera fácil y sencilla. Este tipo de estilos reciben el nombre de estilos explícitos.

Definimos un botón y utilizamos su propiedad Style para acceder al estilo definido.

<Button
     Text="Estilo Explícito"
     Style="{StaticResource ButtonStyle}"/>
<Button
Estilo Explícito

Estilo Explícito

De esta forma podemos definir un conjunto de propiedades en un estilo y en los elementos deseados acceder al mismo. Sin  embargo, si queremos aplicar el mismo estilo a todos los botones no es necesario definir la propiedad Key en el estilo.

<Style TargetType="Button">
     <Setter Property="HorizontalOptions" Value="Center" />
     <Setter Property="VerticalOptions" Value="Center" />
     <Setter Property="TextColor" Value="Red" />
</Style>

Definimos el estilo exactamente igual pero sin propiedad Key. Este estilo recibe el nombre de estilo implícito. Si añadimos botones en la vista:

<Button
     Text="Estilo Implícito" />
Estilo Implícito

Estilo Implícito

Automáticamente sin realizar ninguna acción extra, el estilo implícito se aplica al botón.

NOTA: Importante recordar que si aplicamos una propiedad directamente en un elemento visual, si valor tiene prioridad sobre cualquier otro estilo explícito o implícito.

Estilos heredados

Otra de las características fundamentales que tenemos disponible en Xamarin.Forms 1.3 con los estilos es la herencia de estilos. De esta forma, podemos extender un estilo base añadiendo más opciones o incluso sobreescribiendo algunas de las propiedades establecidas.

Recordamos el estilo utilizado hasta ahora:

<Style TargetType="Button">
     <Setter Property="HorizontalOptions" Value="Center" />
     <Setter Property="VerticalOptions" Value="Center" />
     <Setter Property="TextColor" Value="Red" />
</Style>

Podemos crear un estilo basado en otro utilizando la propiedad BasedOn:

<Style x:Key="InheritedButtonStyle" TargetType="Button" BasedOn="{StaticResource ButtonStyle}">
     <Setter Property="BorderColor" Value="Green" />
     <Setter Property="FontSize" Value="Large" />
</Style>

El estilo anterior define los valores para las propiedades BorderColor y FontSize además de incluir las definiciones de ButtonStyle.

<Button
     Text="Herencia de Estilos"
     Style="{StaticResource InheritedButtonStyle}" />

El resultado:

Herencia de estilos

Herencia de estilos

One more thing…

Nos queda por ver otra posibilidad muy habitual e interesante, definir estilos a nivel de aplicación. En Xamarin.Forms contamos con una nueva clase base Application.

Podemos definir una página con XAML y su code behind asociado definiendo la Aplicación:

<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"                    
x:Class="Xamarin_Styles.App">
 
</Application>

La clase deriva de Application:

public partial class App : Application
{
     public App()
     {
         InitializeComponent();
         MainPage = new NavigationPage(new MainView());
     }
}

Podemos definir recursos a nivel de Aplicación donde crear desde recursos a estilos más complejos a compartir a lo largo de toda la aplicación:

<Application.Resources>  
     <ResourceDictionary>
          <Style
               x:Key="AppButtonStyle"
               TargetType="Button">
               <Setter Property="Rotation" Value="25" />
          </Style>
     </ResourceDictionary>
</Application.Resources>

En nuestra vista principal podemos acceder al estilo definido en App.xaml:

<Style x:Key="InheritedAppButtonStyle" TargetType="Button" BasedOn="{StaticResource AppButtonStyle}">
     <Setter Property="BorderColor" Value="Green" />
     <Setter Property="FontSize" Value="Large" />
</Style>

El botón:

<Button
     Text="Herencia de Estilos desde App"
     Style="{StaticResource InheritedAppButtonStyle}"/>

El resultado final:

Estilos definidos en App

Estilos definidos en App

Podéis descargar el ejemplo completo realizado a continuación:

También tenéis el código fuente disponible e GitHub:

Ver GitHub

Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.

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 )

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