[Tips and Tricks] Diccionario de recursos por plataforma en Windows 10

Application-01Introducción

Con la llegada del SDK de Windows 10 Preview tenemos la posibilidad de crear Apps Universales con un único binario que funcione en múltiples plataformas. Es un paso importante pero que conlleva realizar una acción que sera comun, diferenciar entre las diferentes plataformas donde correrá dicho binario para poder adaptar la interfaz de usuario. Con ese objetivo utilizamos entre otras opciones los Adaptive Triggers de los que ya hemos hablado.

Sin embargo, en ocasiones la misma vista en diferentes dispositivos puede que sea totalmente diferente.

En estos casos podemos crear vistas diferentes por familias de dispositivos. Tras añadir una vista de la forma habitual, creamos una carpeta siguiente la siguiente nomenclatura:

  • DeviceFamily-[Family]

Donde Family es la familia del dispotivo para el que deseamos sobrescribir la vista.Dentro de esta carpeta añadimos la vista XAML deseada en esa plataforma.

NOTA: Añadimos la sobreescritura de la vista. Es importante un detalle del fichero añadido, no añadimos code behind. Esta vista utilizará el mismo code behind que la que teníamos previamente.

Lo visto hasta ahora es genial para poder crear con facilidad vistas diferentes, pero…¿y a nivel de recursos y estilos?

Utilizando diccionarios de recursos por plataforma de dispositivos

En diccionarios de recursos, archivos XAML, organizamos los recursos y estilos utilizados por la aplicación. Si deseamos recursos o estilos diferentes por plataformas podemos crear diferentes elementos con etiquetas distintas de modo que utilicemos en cada plataforma uno diferente (utilizando Adaptive Triggers por ejemplo). El problema de la situación anterior es que en la mayoría de casos, los cambios son mínimos y pasamos a agrandar el conjunto de recursos dificultando el mantenimiento de la aplicación.

¿Podemos mejorar esta situación?

Si. Podemos crear diccionarios de recursos compartidos con todo el conjunto de recursos comunes junto a diccionarios de recursos específicos por plataforma con estilos concretos a utilizar en las mismas.

¿Cómo sería?

Vamos a crear un ejemplo simple donde tendremos un rectángulo enlazado a un color. Utilizaremos un color definido en un diccionario de recursos genérico usado en todas las plataformas. Sin embargo, en teléfonos modificaremos el color añadiendo un diccionario de recursos específico para teléfonos donde sobreescribiremos el color.

Comenzamos. Añadimos un diccionario de recursos llamado Colors:

<Color x:Key="AccentColor">DeepSkyBlue</Color>
<SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}" />

Definimos el color a utilizar y registramos el diccionario en los recursos de la aplicación:

<Application.Resources>
     <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="Resources/Colors.xaml" />
          </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
</Application.Resources>

En nuestra interfaz contaremos con un rectángulo relleno con el color definido.

<Rectangle
     Height="200"
     Width="250"
     Fill="{StaticResource AccentBrush}"/>

Hasta aquí, si ejecutamos la aplicación en cualquiera de las plataformas soportadas, el rectángulo se vera azul cielo.

A continuación, vamos a sobreescribir el color del rectángulo en teléfonos. Creamos un nuevo diccionario de recursos de igual nombre pero añadiendo al nombre .DeviceFamily-[Family] donde Family es la familia del dispotivo para el que deseamos sobrescribir el recurso. En nuestro ejemplo se llamará Colors.DeviceFamily-Mobile.xaml:

<Color x:Key="AccentColor">Red</Color>
<SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}" />

Definimos un nuevo color. Si ejecutamos la aplicación en Windows:

Color tomado del recurso por defecto

Color tomado del recurso por defecto

Mientras que en un teléfono:

Color tomado del recurso específico para teléfonos

Color tomado del recurso específico para teléfonos

Sencillo pero versátil, ¿cierto?.

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

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

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

Más información

 

4 pensamientos en “[Tips and Tricks] Diccionario de recursos por plataforma en Windows 10

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