Introdução ao Styles

Se você vem do mundo do desenvolvimento web, usando HTML e CSS, você logo vai perceber que o XAML é muito parecido com o HTML: Usando tags, você define o layout estrutural da sua aplicação. Você pode até fazer com que seus elementos tenham determinada forma, usando propriedades in-line como Foreground, FontSize e assim por diantes, assim como você pode estilizar localmente seus tags HTML.

Mas o que acontece quando você quer usar o mesmo tamanho de fonte e cor em três controles TextBlock diferentes? Você pode copiar e colar as propriedades desejadas para cada um deles, mas o que acontece se forem 50 controles, espalhados por várias janelas? E se você de repente perceber que o tamanho da fonte precisa ser modificar de 14 para 12?

WPF introduz o style, que está para o XAML assim como o CSS está para HTML. Usando styles, você pode definir um grupo de propriedades e atribui-las a controles específicos ou a todos os controles de um tipo específico, e assim como no CSS, um style pode ser herdado de outro.

Exemplo de estilo básico

Vamos falar bastante sobre todos os detalhes, mas para esse capítulo introdutório, eu gostaria de te mostrar um exemplo bem básico de como usar styles:

<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 os recursos do meu StackPanel, eu defino um Style. Eu uso a propriedade TargetType para dizer ao WPF que este style deve ser ser aplicado a TODOS os controles TextBlock nesse escopo (o StackPanel), e então eu adiciono dois elementos Setter ao style. Os elementos Setter são usados para definir propriedades específicas para os controles alvo, neste caso as propriedades Foreground e FontSize. A propriedade Property diz ao WPF em qual propriedade gostaríamos de mirar, e a propriedade Value define o valor desejado.

Observe que o último TextBlock é azul em vez de cinza. Eu fiz isso para mostrar a você que, enquanto um controle pode obter estilo de um estilo designado, você está completamente livre para substituir isso localmente no controle - os valores definidos diretamente no controle sempre terão precedência sobre os valores de estilo.

Resumo

Os estilos WPF facilitam muito a criação de uma aparência específica e, em seguida, a utilizam para vários controles. Embora esse primeiro exemplo seja muito local, mostrarei a você como criar estilos globais nos próximos capítulos.