Cuando creamos una aplicación Silverlight es común que queramos aplicar diferentes Temas a nuestra aplicación para que los colores y efectos sean personalizables. El Silverlight Toolkit de CodePlex nos permite hacer esto de manera sencilla. Para este ejemplo requieres los siguientes prerrequisitos.
· Silverlight 3.0.
· Visual Studio 2008.
· Expression Blend 3.0. Esta herramienta no se require realmente, pero se recomienda utilizar Blend cuando se va a realizar algún diseño de Interfaz de usuario, es más sencillo y más rápido que en Visual estudio para dichas actividades.
Primero que nada es necesario crear una aplicación Silverlight con su respectivo Website.
A continuación, hay que agregar algunos controles a los que se les desea aplicar el tema. Para este ejemplo se agregan algunos TextBox , algunos TextBlocks y un botón. A continuación se muestra el Xaml creado.
La linea más importante es:
Con esta linea estamos indicando al plugin de Silverlight que usaremos la dll Theming.dll que forma parte del Silverlight Toolkit. Esto no funciona si no se agregan las referencias correspondientes, así que hay que agregar la referencia a la dll System.Windows.Controls.Theming.Toolkit.dll.
Para ello, es necesario buscarla en el path C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Themes\Xaml (Toma en cuenta tu versión de SO por si el path pudiera cambiar). Este es el path de instalación por defecto del Silverlight Toolkit en Windows 7 a 32 bits. Luego hay que copiar 2 archivos de Tema (o más si así lo decides) al directorio raíz de la aplicación. Personalmente copié los siguientes:
· System.Windows.Controls.Theming.BubbleCreme.xaml
· System.Windows.Controls.Theming.BureauBlue.xaml
Ahora es necesario utilizar el siguiente código para hacer el cambio de temas:
private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
Uri uri = new Uri(@"SLTheming;component/System.Windows.Controls.Theming.BureauBlue.xaml",
UriKind.Relative);
ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);
ImplicitStyleManager.SetApplyMode(LayoutRoot, ImplicitStylesApplyMode.Auto);
ImplicitStyleManager.Apply(LayoutRoot);
}
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
Uri uri = new Uri(@"SLTheming;component/System.Windows.Controls.Theming.BubbleCreme.xaml", UriKind.Relative);
ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);
ImplicitStyleManager.SetApplyMode(LayoutRoot, ImplicitStylesApplyMode.Auto);
ImplicitStyleManager.Apply(LayoutRoot);
}
Con éste código, solo hay que iniciar la aplicación con el Website correspondiente y presionar el botón para revisar
cómo el Website cambia de esta apariencia:
cómo el Website cambia de esta apariencia:
A esta:
