Cómo aplicar Toolkit Themes en nuestra aplicación

Thursday, April 23, 2009

Si uno no es un diseñador, hay veces que se puede complicar darle un buen look a nuestra aplicación. Para resolver este problema y poder darle un toque más interesante, podemos utilizar los temas que viene en Silverlight Toolkit.

El primer paso es instalar Silverlight Toolkit, para lo cual hay que ir aquí.

Asegúrense de descargar la Toolkit que corresponde a la versión de Silverlight que tengan instalada en su máquina.

Luego, creamos nuestra aplicación Silverlight desde Visual Studio y arrastramos de la barra de controles el tema al editor XAML, donde Visual Studio nos pone ya las referencias a la librería y nos crea el objeto para empezar a utilizarlo.

De esta manera vamos a ver como Visual Studio nos creó dos referencias, una al tema en sí y otra a System.Windows.Controls.Theming.Toolkit.

Además nos agrega en el XAML las referencias a la librería.

Agregaremos un contenedor dentro del tema, donde pondremos todos los controles necesarios.

     
<expressionLight:ExpressionLightTheme>
    
    <Border BorderThickness="3">
    
        <StackPanel>
    
            <TextBlock Text="PRUEBA DE TEXTO"/>
    
            <CheckBox Content="CheckBox" Margin="5" 
    
                      IsChecked="true" />
    
            <Button HorizontalAlignment="Left" Content="Boton" 
    
                    Width="150" Margin="5"/>
    
            <RadioButton Content="Opcion1" Margin="5" />
    
            <RadioButton Content="Opcion2" Margin="5" />
    
            <RadioButton Content="Opcion3" Margin="5" />
    
            <TextBox Text="VALOR" Margin="5"  />
    
        </StackPanel>
    
    </Border>
    
</expressionLight:ExpressionLightTheme>
    
<rainierOrange:RainierOrangeTheme>
    
    <Border BorderThickness="3">
    
        <StackPanel>
    
            <TextBlock Text="PRUEBA DE TEXTO" />
    
            <CheckBox Content="CheckBox" Margin="5" 
    
                      IsChecked="true" />
    
            <Button HorizontalAlignment="Left" Content="Boton" 
    
                    Width="150" Margin="5"/>
    
            <RadioButton Content="Opcion1" Margin="5" />
    
            <RadioButton Content="Opcion2" Margin="5" />
    
            <RadioButton Content="Opcion3" Margin="5" />
    
            <TextBox Text="VALOR" Margin="5"  />
    
        </StackPanel>
    
    </Border>
    
</rainierOrange:RainierOrangeTheme>

Ahora si nosotros vemos que hay alguna propiedad que nos gustaría cambiar solamente debemos definirla en el control. En el siguiente ejemplo modificamos el color del Texto de blanco a rojo.

    
<expressionLight:ExpressionLightTheme>
    
    <Border BorderThickness="3">
    
        <StackPanel>
    
            <TextBlock Text="PRUEBA DE TEXTO" Foreground="Red" />
    
            <CheckBox Content="CheckBox" Margin="5" 
    
                      IsChecked="true" />
    
            <Button HorizontalAlignment="Left" Content="Boton" 
    
                    Width="150" Margin="5"/>
    
            <RadioButton Content="Opcion1" Margin="5" />
    
            <RadioButton Content="Opcion2" Margin="5" />
    
            <RadioButton Content="Opcion3" Margin="5" />
    
            <TextBox Text="VALOR" Margin="5"  />
    
        </StackPanel>
    
    </Border>
    
</expressionLight:ExpressionLightTheme>
    
<rainierOrange:RainierOrangeTheme>
    
    <Border BorderThickness="3">
    
        <StackPanel>
    
            <TextBlock Text="PRUEBA DE TEXTO" />
    
            <CheckBox Content="CheckBox" Margin="5" 
    
                      IsChecked="true" />
    
            <Button HorizontalAlignment="Left" Content="Boton" 
    
                    Width="150" Margin="5"/>
    
            <RadioButton Content="Opcion1" Margin="5" />
    
            <RadioButton Content="Opcion2" Margin="5" />
    
            <RadioButton Content="Opcion3" Margin="5" />
    
            <TextBox Text="VALOR" Margin="5"  />
    
        </StackPanel>
    
    </Border>
    
</rainierOrange:RainierOrangeTheme>

También se puede customizar un tema por completo utilizando Visual Studio o Expression Blend.

1 Comment