[WPF] Manejo de Temas de Estilos, Resource Dictionary

Buenas,

Aquí con un post sobre como majear los estilos en una aplicación de WPF. Les platico el escenario, Imaginen que ya terminamos una aplicación que ya funciona y todo, pero queremos que el Layout se vea mejor, ustedes saben eso de la UX (User Experience), entonces pensamos en agregar la opción de que cambie el Estilo de nuestra aplicación (cómo lo que se hace en ASP.NET :P). Bueno ps aquí un pequeño post de como hacer esto.

1.- Creamos una nueva aplicación de WPF, y agregamos este código en la Ventana Principal.

<Grid x:Name="host">
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,96,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
        
        <Menu Height="23" HorizontalAlignment="Left" Margin="12,0,0,0" Name="menu1" VerticalAlignment="Top" Width="80" >
            <MenuItem Header="Diseño" >
                <MenuItem Header="Temas">
                    <MenuItem Header="Azul" Tag="Azul" Click="Selected_Theme" />
                    <MenuItem Header="Rojo" Tag="Rojo" Click="Selected_Theme" />
                    <MenuItem Header="Verde" Tag="Verde" Click="Selected_Theme" />
                </MenuItem>
            </MenuItem>
        </Menu>
    </Grid>

2.- Luego  agregamos una carpeta que se llame “Temas” en donde colocaremos los diccionarios de recursos para nuestros temas. Dentro de esta carpeta vamos a agregar los respectivos diccionarios, en este caso Azul.xaml, Rojo.xaml y Verde.xaml.

Este es el código para recurso.

Azul.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="Azul" TargetType="{x:Type Control}">
        <Setter Property="Background" Value="Blue" />
    </Style>
</ResourceDictionary>

Rojo.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="Rojo" TargetType="{x:Type Control}">
        <Setter Property="Background" Value="Red" />
    </Style>
</ResourceDictionary>

Verde.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Style x:Key="Verde" TargetType="{x:Type Control}">
        <Setter Property="Background" Value="Green" />
    </Style>
    
</ResourceDictionary>

Como se pueden dar cuenta solo estoy cambiando la propiedad Background, eso solo como ejemplo, porque en la practica estos archivos llevan un montón de código que se genera por lo regular con Expression Blend 😀

Los archivos quedan así:

Ahora en el evento de Click de los elementos del menú, colocamos el siguiente código:

private void Selected_Theme(object sender, RoutedEventArgs e)
{
    MenuItem menu = sender as MenuItem;
    string tema = menu.Tag as string;            
    AplicaEstilo(tema);
}

Y por ultimo el método de de AplicarEstilo, que tiene este código:

private void AplicaEstilo(string tema)
{

    string uri = string.Format("{0}{1}.xaml", rutaTemas, tema.ToString());

    Collection<ResourceDictionary> stylesDiccionario = new Collection<ResourceDictionary>();

    IEnumerable controles = LogicalTreeHelper.GetChildren(this.host);
    
    ResourceDictionary diccionario = new ResourceDictionary();
    diccionario.Source = new Uri(uri, UriKind.RelativeOrAbsolute);
    Style nuevo = diccionario[tema] as Style;

    
    
    foreach (object c in controles)
    {
        if (c is Control)
        {
            ((Control)c).Style = nuevo;
        }
    }            

}

 

Cabe mencionar, que en el foreach solo aplico a los elementos que heredan de Controls, ya que la propiedad background no aplica en todos los elementos. Pero vaya si ejecutamos la aplicación funciona más o menos así:

Aquí el código fuente, que por cierto esta en VS 2010 :p

Etiquetas de Technorati: WPF,ResourceDictionary,Style,Estilos