Introducció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:
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
Mientras que en un teléfono:
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:
Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.
Más información
Introducción
