Trigger, DataTrigger e EventTrigger

Até agora, trabalhamos com estilos definindo um valor estático para uma propriedade específica. No entanto, usando acionadores, você pode alterar o valor de uma determinada propriedade, uma vez que uma determinada condição seja alterada. Os gatilhos vêm em vários tipos: gatilhos de propriedade, gatilhos de eventos e gatilhos de dados. Eles permitem que você faça coisas que normalmente seriam feitas em code-behind completamente em marcação, o que é parte do processo contínuo de separar estilo e código.

Acionador de propriedade

O acionador mais comum é o acionador de propriedade, que na marcação é simplesmente definido com um & lt; Trigger & gt; elemento. Ele observa uma propriedade específica no controle do proprietário e, quando essa propriedade possui um valor que corresponde ao valor especificado, as propriedades podem ser alteradas. Em teoria, isso pode parecer um pouco complicado, mas na verdade é bem simples quando transformamos a teoria em um exemplo:

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggersSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleTriggersSample" Height="100" Width="300">
    <Grid>
        <TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Blue"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                            <Setter Property="TextDecorations" Value="Underline" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

Nesse estilo, definimos a propriedade Foreground como azul, para torná-la semelhante a um hiperlink. Em seguida, adicionamos um acionador, que ouve a propriedade IsMouseOver . Quando essa propriedade é alterada para True , aplicamos dois setters: Alteramos o Primeiro plano para vermelho e depois fazemos sublinhado. Este é um ótimo exemplo de como é fácil usar triggers para aplicar alterações de design, completamente sem código code-behind.

Nós definimos um estilo local para este TextBlock específico, mas como mostrado nos artigos anteriores, o estilo poderia ter sido definido globalmente também, se quiséssemos que ele se aplicasse a todos os controles TextBlock no aplicativo.

Gatilhos de dados

Acionadores de dados, representados pelo & lt; DataTrigger & gt; elemento, são usados para propriedades que não são necessariamente propriedades de dependência. Eles trabalham criando uma ligação a uma propriedade regular, que é então monitorada para alterações. Isso também se abre para vincular seu gatilho a uma propriedade em um controle diferente. Por exemplo, considere o seguinte exemplo:

<Window x:Class="WpfTutorialSamples.Styles.StyleDataTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleDataTriggerSample" Height="200" Width="200">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox Name="cbSample" Content="Hello, world?" />
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="No" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                            <Setter Property="Text" Value="Yes!" />
                            <Setter Property="Foreground" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

Neste exemplo, temos um CheckBox e um TextBlock . Usando um DataTrigger , ligamos o TextBlock à propriedade IsChecked do CheckBox. Em seguida, fornecemos um estilo padrão, onde o texto é "Não" e a cor do primeiro plano é vermelho e, usando um DataTrigger, fornecemos um estilo para quando a propriedade IsChecked do CheckBox é alterada para True, caso em que fazemos verde com um texto que diz "sim!" (como visto na imagem).

Gatilhos de eventos

Acionadores de eventos, representados pelo & lt; EventTrigger & gt; elemento, são usados principalmente para acionar uma animação, em resposta a um evento sendo chamado. Ainda não discutimos animações, mas para demonstrar como funciona um acionador de evento, vamos usá-lo de qualquer maneira. Dê uma olhada no capítulo sobre animações para mais detalhes. Aqui está o exemplo:

<Window x:Class="WpfTutorialSamples.Styles.StyleEventTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleEventTriggerSample" Height="100" Width="300">
    <Grid>
        <TextBlock Name="lblStyled" Text="Hello, styled world!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

A marcação pode parecer um pouco avassaladora, mas se você executar essa amostra e observar o resultado, verá que realmente fizemos uma animação muito legal, indo para os dois lados, em ~ 20 linhas de XAML. Como você pode ver, eu uso um EventTrigger para assinar dois eventos: MouseEnter e MouseLeave . Quando o mouse entra, faço uma transição suave e animada para um FontSize de 28 pixels em 300 milissegundos. Quando o mouse sai, mudo o FontSize de volta para 18 pixels, mas eu faço isso um pouco mais devagar, só porque parece legal.

Resumo

Os estilos WPF facilitam a obtenção de uma aparência consistente e, com os gatilhos, essa aparência se torna dinâmica. Estilos são ótimos em seu aplicativo, mas eles são ainda melhores quando usados em modelos de controle, etc. Você pode ler mais sobre isso em outro lugar neste tutorial.

No próximo artigo, veremos vários gatilhos, que nos permitem aplicar estilos com base em várias propriedades.