Roberto Sánchez - Programador/Desarrollador .NET

Estilos.

WPF destaca por su gran versatilidad y potencial para la personalización del aspecto visual de las aplicacione. Hasta ahora hemos aprendido un poco de código XAML, pero casi siempre haciendo uso de los controles con la mayoría de sus propiedades con valores por defecto. Sin embargo, podemos aplicar estilos a los controles para personalizar su apariencia, transformándolos en casi tidos sus aspectos y permitiéndonos una personalización a nuestra manera. Si tienes conocimietnos de HTML, piensa en ello de la siguiente manera: el código HTML y los archivos de estilos CSS, que son los que proporcionan una personalizacíón a gusto del programador. En WPF podríamos hacer la misma similitud entre el código XAML y otros archivos XAML que actuarán como contenedores de los estilos de los controles.

En tu proyecto crea un nuevo elemento, un diccionario de recursos y llámalo 'stylesDictionary.xaml'. Al abrirlo encontrarás lo siguiente:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApp1">

</ResourceDictionary>

Podemos prescindir de la tercera línea:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</ResourceDictionary>

Ahora estamos listos para definir estilos que aplicaremos a los controles. Prueba lo siquiente en el diccionario de recursos y en la ventana, respectivamente:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="styleWindow" TargetType="{x:Type Window}">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="Height" Value="200"/>
        <Setter Property="Width" Value="300"/>
    </Style>
    <Style x:Key="styleButton" TargetType="{x:Type Button}">
        <Setter Property="BorderBrush" Value="Blue"/>
        <Setter Property="Background" Value="Azure"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Width" Value="150"/>
    </Style>
</ResourceDictionary>
<Window x:Name="mainWindow"
        x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        Style="{DynamicResource ResourceKey=styleWindow">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="stylesDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Button Content="Botón no personalizado"/>
        <Button Style="{StaticResource ResourceKey=styleButton}" Content="Botón personalizado"/>
    </StackPanel>
</Window>

Mediante el uso de extensiones de marcado hemos apuntado los estilos de la ventana y del botón a unas claves que están definidas en el archivo de recursos. En este archivo de recursos, dentro de cada clave (específica cada una de las dos de un tipo de control) hemos definido los valores de las propiedades que hemos deseado personalizar.

Fácil y sencillo, como la vida misma, ¿verdad? Pues quédate bien con esto, pues es importantísimo el uso de archivos de diccionarios de recursos que van a almacenar todos nuestros estilos de cada uno de los controles. Varios controles pueden tener cada uno su clave de estilos, o bien varios controles de una misma clase pueden apuntar a la misma clave de recursos, según convenga.

Una recomendación: establece las propiedades de los controles siempre que se pueda en archivos de diccionarios de recursos, nunca en el XAML de la ventana, y así lograrás una limpieza de código fuente importantísima que agradecerás cuando el archivo XAML tenga cientos de líneas de código.