Introduction to WPF styles

Si vienes del mundo de desarrollo web, usando HTML y CSS, pronto te darás cuenta de que XAML es muy parecido a HTML: Usando etiquetas definirás una capa estructural de tu aplicación. Incluso puedes cambiar la apariencia de los elementos usando propiedades como Foreground, FontSize y demás, del mismo modo que puedes dar estilo de forma local a las etiquetas HTML.

Pero, ¿qué sucede cuando desea usar exactamente el mismo tamaño y color de fuente en tres controles TextBlock diferentes? Puedes copiar / pegar las propiedades deseadas a cada uno de ellos, pero ¿qué sucede cuando tres controles se convierten en 50 controles, distribuidos en varias ventanas? ¿Y qué sucede cuando te das cuenta de que la fuente el tamaño debe ser 14 en lugar de 12?

WPF introduce estilo, que es para XAML lo que CSS es para HTML. Usando estilos, puede agrupar un conjunto de propiedades y asignarlas a controles específicos o a todos controles de un tipo específico, y al igual que en CSS, un estilo puede heredar de otro estilo.

Ejemplo de estilo básico.

Hablaremos mucho más sobre todos los detalles, pero para este capítulo de introducción, quiero mostrarles un ejemplo muy básico sobre cómo usar el estilo:

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

Para los recursos de mi StackPanel, defino un Estilo . Uso la propiedad TargetType para decirle a WPF que este estilo debe aplicarse a TODOS los controles TextBlock dentro del alcance (StackPanel), y luego agrego dos elementos Setter al estilo. Los elementos Setter se usan para establecer propiedades para los controles de destino, en este caso las propiedades Primer plano y FontSize . La Propiedad le dice a WPF a qué propiedad queremos apuntar, y la propiedad Value define el valor deseado.

Observe que el último TextBlock es azul en lugar de gris. Lo hice para mostrarle que, si bien un control puede obtener un estilo de un estilo designado, usted es completamente libre de anular esto localmente en el control: los valores definidos directamente en el control siempre tendrán prioridad sobre los valores de estilo.

Resumen

Los estilos WPF hacen que sea muy fácil crear una apariencia específica y luego usarla para varios controles, y aunque este primer ejemplo fue muy local, te mostraré cómo crear estilos globales en los próximos capítulos.