Archivo

Archive for 24 abril 2010

[WPF] Manejo de Temas de Estilos, Resource Dictionary

abril 24, 2010 4 comentarios

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

[Humor] En Bones también ven a los Simpson :P

Buenas,

hoy viendo un capitulo de Bones, eh notado algo curioso, que se les ha pasado una radiografía de los Simpson :P, para ser exactos de Homero, imagen que seguramente ya muchos conoce, los invito a que echen un vistazo aquí una imagen

image

El capitulo es el numero 7 de la quinta temporada, llamado “The Dwarf in the Dirt”, Saludos!!

Categorías:Humor