Inicio > Ejemplos, WPF > [WPF] Manejo de Temas de Estilos, Resource Dictionary

[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í:

image

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í:

image

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

image

Etiquetas de Technorati: ,,,
Categorías:Ejemplos, WPF
  1. roberto
    agosto 5, 2010 a las 2:08 am

    hola quisiera ver si podrias mandarme el codigo de tu ejemplo a mi correo o resolverme una duda en esta parte del codigo
    string uri = string.Format(“{0}{1}.xaml”, rutaTemas, tema.ToString());
    en rutaTemas como es la ruta para accesar a el diccionario tengo los diccionarios en la carpeta temas pero no se bien como acceder a ellos gracias espero tu respuesta

    • agosto 6, 2010 a las 5:14 pm

      Que tal Roberto…

      ya actualice el link de descarga, puedes bajarte la demo y revisar. Sobre tu duda si es la ruta de los archivos diccionarios.

      Saludos.

  2. roberto
    agosto 9, 2010 a las 7:59 am

    pues no pude bajar el demo se me keda en blanco la pagina pero checare ke tengo mal
    y posteare el resultado😄 gracias de todos modos, lo he hecho de otro modo pero es mucho mas enredoso y este metodo me gusto mas

  3. febrero 22, 2011 a las 1:34 pm

    Genial! justo lo que buscava, muchas gracias😉

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: