Trigger, DataTrigger & EventTrigger

Do tej pory pracowaliśmy ze stylami używając ich własności statycznych. Używając natomiast wyzwalaczy (triggers) możemy zmieniać właściwości zależnie od warunków. Wyzwalacze występują w następujących typach : wyzwalacz właściwości (Trigger), zdarzenia (EventTrigger) i danych (DataTrigger). Pozwalają one na robienie rzeczy, które normalnie musiałyby być zdefiniowane w kodzie. Takie podejście jest kolejnym krokiem rozdzielenia stylu od kodu.

Wyzwalacz właściwości - property trigger

Najbardziej powszechnym wyzwalaczem jest wyzwalacz właściwości. Definiuje się go za pomocą elementu <Trigger>. Obserwuje on określoną właściwość w kontrolce i kiedy ta właściwość ma wartość, która pasuje do określonej wartości to zmienia właściwości kontrolki. W teorii może się to wydawać skomplikowane, ale przykład powinien wszystko wyjaśnić:

<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>

W tym stylu ustawiliśmy właściwość Foreground na kolor niebieski, aby wyglądała jak hyperlink. Dodaliśmy rówież wyzwalacz, który sprawdza właściwość IsMouseOver, w momencie kiedy jej wartość będzie True zostanie zmieniony Foreground na czerwony i tekst będzie podkreślony. Jest to świetny przykład jak łatwo możemy zmieniać wygląd kontrolek przy użyciu wyzwalaczy i bez pisania kodu.

Zdefiniowaliśmy tu styl lokalnie dla konkretnego TextBlock, ale jak pokazano w poprzednim artykule, styl może być również zdefiniowany globalnie, jeżeli chcesz go używać do wszystkich kontrolek TextBlock w aplikacji.

Wyzwalacz danych (Data triggers)

Wyzwalacze danych, definiowane przez element <DataTrigger> są używane dla właściwości które nie koniecznie są właściwościami zależnymi. Ich działanie polega na wiązaniu do zwykłej właściwości, która ma być sprawdzana pod kątem zmian. Umożliwia to również powiązanie wyzwalacza z właściwościami innej kontrolki. Spójrzmy na następny przykład:

<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>

W tym przykładzie mamy CheckBox i TextBlock. Używając DataTrigger łączymy TextBlock z właściwością IsChecked kontrolki CheckBox. Domyślnie ustwaiamy za pomocą stylu tekst na No w czerwonym kolorze, a następnie monitorujemy wałaściwość IsChecked kontrolki CheckBox za pomocą DataTrigger. Po zmianie własności isChecked na True zmienia się styl TextBox - kolor tekstu na zielony i tekst na Yes! (jak widać na powyżej).

Wyzwalacz zdarzeń (EventTrigger)

Wyzwalacz zdarzeń jest definiowany przez <EventTrigger> i najczęściej używany do wyzwaalania animacji w odpowiedzi na wywołanie zdarzenia. Do tej pory nie mówiliśmy jeszcze o animacjach, ale użyjemy ich tutaj w celu demonstracji jak wyzwalacz zdarzeń działa. Spójrz do rozdziału o animacjach aby dowiedzieć się więcej szczegółów. Oto przykład:

<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>

Może to wyglądać nieco przytłaczająco, ale jeżeli uruchomisz ten przykład to zobaczysz że w około 20 liniach udało się uzyskać całkiem fajną animację działającą w obie strony. Użyłem tu EventTrigger do dwóch zdarzeń MouseEnter i MouseLeave. Kiedy mysz wchodzi nad tekst właściwość FontSize zmienia się na 28 płynnie w ciągu 300ms. Kiedy mysz opuści tekst wraca on płynnie FontSize równego 18 nieco wolniej (800ms), bo tak po prostu wygląda całkiem fajnie.

Podsumowanie

Style WPF ułatwiają tworzenie spójnych pod względem wyglądu aplikacji i w połączeniu z wyzwalaczami wygląd ten jest dynamiczny. Jest to świetne rozwiązanie dla twoich aplikacji, jednak zastosowanie ich w szablonach kontrolek jest jeszcze lepsze. Możesz o tym przeczytać w innym miejscu tego poradnika.

W następnym artykule przyjrzymy się multi wyzwalaczom, które pozwalają na zastosowanie stylów bazujących na wielu właściwościach.