[Tips and Tricks] Temas personalizados en Windows Phone

Introducción

Al crear aplicaciones, un punto importante en el proceso creativo es la elección de colores y estilos de la misma. En determinadas ocasiones estaremos creando algo nuevo y la selección será bajo nuestro criterio mientras que en otras ocasiones estaremos realizando una aplicación para una marca ya establecida en cuyo caso debemos crear una aplicación que se adapte al esquema de colores ya seleccionados por la marca.

Problema

Si por marca decidimos que los colores adecuados para nuestra aplicación siempre serán el naranja junto al fondo claro por ejemplo, puede ser que no siempre el usuario obtenga el resultado que nosotros esperamos. El usuario puede cambiar el tema del sistema afectando a fondos, bordes y colores de fuentes de múltiples controles y por lo tanto a nuestra aplicación.

¿Solución?

Como suele ser habitual tenemos varias opciones para resolver el problema. La primera de ellas consiste en crearnos un conjunto de estilos sobreescribiendo los establecidos por defecto. Podemos dirigirnos a la ruta:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Design

Seleccionamos el tema Light o Dark según se adapte más a nuestras necesidades y partiendo de esa base crear nuestro propio estilo que añadiremos como recurso. Esta solución aunque válida requiere un esfuerzo elevado.

Tenemos una segunda opción que nos permite resolver en problema con un par de líneas. Interesante, ¿verdad?.

Utilizaremos para ello una librería creada por Jeff Wilcox llamada Windows Phone Theme Manager. Tenéis la librería disponible como paquete NuGet y también acceso al código fuente desde GitHub.

Ya sea obteniendo el paquete desde NuGet o desde GitHub, su uso es simple, en el constructor de la aplicación:

/// <summary>
/// Constructor.
/// </summary>
public App()
{
     // Global handler for uncaught exceptions.
     UnhandledException += Application_UnhandledException;

     // Standard Silverlight initialization
     InitializeComponent();

     // Phone-specific initialization
     InitializePhoneApplication();

     //More code here...
}

Añadiremos la siguiente línea para forzar el tema claro:

ThemeManager.ToLightTheme();

O el tema oscuro:

ThemeManager.ToDarkTheme();

NOTA: Si forzamos un tema ha de hacerse una única vez y desde el constructor de App.cs tras las llamadas de inicialización.

O incluso podemos utilizar temas personalizados con suma facilidad. Añadimos un conjunto de recursos (ThemeResource.xaml) con todos los estilos personalizados que necesitemos al proyecto. Para tener acceso  los recursos, en App.xaml los añadimos al MergeDictionary. Una vez realizado, utilizarlo sería tan sencillo como:

// Obtenemos el tema
var rd = App.Current.Resources.MergedDictionaries.First();

// Establecemos el tema
ThemeManager.SetCustomTheme(rd, Theme.Light);

De esta forma tan simple podemos forzar a nuestra aplicación a utilizar siempre el tema claro o el oscuro. O incluso utilizar un conjunto de estilos junto al tema claro u oscuro.

Más información

• Blog de Jeff Wilcox: PhoneThemeManager: allow your app to have the Light, Dark, or Inverted theme with 1 line of code
• NuGet: Windows Phone Theme Manager
• GitHub: Theme Manager