Como lo había mencionado en un artículo anterior, Silverlight 4 incluye soporte para Estilos Implícitos, los cuales son estilos que pueden aplicar a todos los elementos y/o controles de un mismo tipo, en vez de estar aplicando el estilo de manera explícita elemento por elemento o control por control.

Gracias a esta característica, podemos crear “Temas” para nuestros aplicativos sin la necesidad de utilizar componentes externos (como la clase ImplicitStyleManager, incluida en el Silverlight Toolkit).  La idea detrás de este concepto es tener Diccionarios de Recursos de tipo Mezclados (Merged), que contengan toda la serie de estilos para los controles de la aplicación y posteriormente aplicar uno u otro Diccionario.  En este artículo mostraré este concepto, para poder construir aplicaciones que incluyan diferentes temas para la Interface de Usuario.

La solución

Iniciaremos creando en Visual Studio .NET 2010 un nuevo proyecto de tipo Silverlight Application, aceptando las opciones predeterminadas.  A este proyecto le pondremos Demo.SL4.Temas.

Diccionarios Mezclados

Los Diccionarios Mezclados (o Merged en inglés) permiten declarar recursos en archivos independientes, para posteriormente reutilizar estos archivos en alguna otra aplicación Silverlight o incluso de WPF.  En nuestra aplicación de ejemplo crearemos dos diccionarios: Rojo.xaml y Azul.xaml.  Cada uno de ellos tendrá los Estilos Implícitos convenientes para cada tema (tonalidades rojizas en Rojo.xaml y azules en Azul.xaml).  Podemos hacer esto por medio de Visual Studio .NET 2010 o con Expression Blend 4; pero con este último tenemos más control así que utilizaremos dicha herramienta.  Para abrir Expression Blend 4 directamente desde Visual Studio .NET 2010 hagamos clic-derecho sobre el archivo MainPage.xaml y seleccionemos la opción “Open in Expression Blend…”:

Ya en Expression Blend, agregaremos dos Diccionarios de Recursos por medio del panel de Proyectos (Projects) y su opción de agregar nuevo elementos, seleccionando la plantilla adecuada y estableciendo los nombres que anteriormente indicamos (Rojo.xaml y Azul.xaml).

En MainPage.xaml voy a agregar una serie de controles básicos de Silverlight, los cuales nos servirán de base para crear los Estilos Implícitos en los Diccionarios de Recursos que acabamos de añadir a nuestro proyecto.  En este ejemplo, voy a agregar solo 7 diferentes tipos de controles tal como lo muestra la siguiente figura:

Lo siguiente será la creación de los estilos para cada control.  Esto es sencillo gracias a la opción “Edit Style” del menú Object en Expression Blend:

Para algunos controles, podemos crear un estilo a partir del estilo predeterminado que ya incluyen (opción “Edit a Copy”) o desde cero (opción “Create Empty…”).  El usar uno u otro dependerá de lo que necesitemos según cada proyecto, pero regularmente seleccionaremos la opción de Edit a Copy siempre que esté disponible ya que es la opción más sencilla.

La clave de todo este concepto está en la siguiente caja de diálogo que vemos a continuación:

Como podemos observar, la opción para crear un Estilo Implícito está expresada en la opción “Apply to all” en la ventana.  Asimismo, deberemos seleccionar la opción de guardar el estilo en alguno de los Diccionarios de Recursos que agregamos anteriormente a nuestro proyecto.  Esto lo haremos para cada uno de los estilos de los controles que serán incluidos en cada Diccionario.

Es importante resaltar que al haber creado los dos Diccionarios de Recursos en Expression Blend, ambos estarán ligados a la aplicación, a través de App.xaml.  Esto causará que al querer crear un segundo estilo para el mismo control colisionará con el del primer Diccionario.  Esto es solucionado si simplemente quitamos esta liga temporalmente como lo muestra la siguiente figura:

Gracias a ello, podemos continuar con el siguiente Diccionario de Recursos sin que cause colisión alguna los estilos entre sí.  Al finalizar la definición de todos los estilos quitaremos ambas ligas de App.xaml, ya que cargaremos cada Diccionario de manera dinámica a través de código.

Asignación Dinámica del Tema

Regresemos a Visual Studio .NET 2010.  Debido a que la propiedad Build Action de los Diccionarios de manera predeterminada es Page, necesitamos cambiarlos a Content, para poder acceder a ellos a través de un Uri sencillo:

Posteriormente, definiremos un manejador para el evento Click de los botones disponibles en MainPage.xaml.  En cada manejador implementaremos la funcionalidad de aplicar un tema u otro según el botón seleccionado.  Un ejemplo de código para hacer esto se muestra a continuación:

   1: private void Button_Click(object sender, RoutedEventArgs e)

   2: {

   3:     //Obtiene el nombre del tema relacionado con el botón

   4:     string tema = (sender as Button).Tag.ToString();

   5:  

   6:     //Crea un objeto de tipo ResourceDictionary, referenciando el nombre del Diccionario Mezclado en la aplicación

   7:     var rd = new ResourceDictionary() { Source = new Uri(string.Format("{0}.xaml", tema), UriKind.RelativeOrAbsolute) };

   8:  

   9:     //Borra el Diccionario de Recursos Mezclados para evitar colisiones

  10:     Application.Current.Resources.MergedDictionaries.Clear();

  11:     //Agrega el objeto ResourceDictionary para que aplique todos los Estilos Implícitos automáticamente

  12:     Application.Current.Resources.MergedDictionaries.Add(rd);

  13: }

Como se podrá apreciar en el anterior código, el manejador es usado para ambos botones y cada botón tiene en su propiedad Tag el nombre del tema al que corresponde.  Posteriormente creamos un objeto de tipo ResourceDictionary estableciendo en su propiedad Source el nombre del archivo físico del Diccionario de Recursos en la aplicación, a través del nombre del tema que el botón indica.  Finalmente, lo más importante: agregamos a la colección de Diccionarios de Recursos Mezclados de la Aplicación el objeto ResourceDictionary, y debido a que este contiene la definición de todos los Estilos Implícitos que creamos anteriormente, estos son aplicados de manera inmediata en todos los controles presentes en MainPage.xaml:

Cabe mencionar que también podemos agregar estos Diccionarios Mezclados de manera dinámica a los Recursos del UserControl (MainPage.xaml) y no necesariamente a la Aplicación como tal, dependiendo del nivel de visibilidad que deseemos que tengan.

Resumen

Crear Temas para nuestras aplicaciones en Silverlight 4 es una tarea bastante sencilla gracias al concepto de Estilos Implícitos, incluido a partir de esta versión.  La idea básica atrás de este concepto es tener Diccionarios de Recursos Mezclados que puedan ser cargados de manera dinámica vía código.

Pueden ver la aplicación de ejemplo aquí

Pueden descargar el código fuente aquí