TOC

This article has been localized into German by the community.

Styles:

Trigger, DataTrigger und EventTrigger

Bisher arbeiteten wir mit Styles, in dem ein statischer Wert für ein bestimmtes Property gesetzt wurde. Durch die Verwendung von Triggern kann ein Wert eines Properties geändert werden, sobald sich eine Bedingung ändert. Es gibt Trigger in folgenden Varianten: Property Trigger, Event Trigger und Datentrigger. Diese Trigger-Arten erlauben es, die gleiche Funktionalität in der Markup Sprache zu erreichen, für die man sonst Code-Behind brauchen würde. So erreicht man eine Trennung von Style und Code.

Property Trigger

Der am weitesten verbreitete Trigger ist der Property Trigger, der im Markup einfach mit einem <Trigger> Element definiert wird. Es überwacht ein bestimmtes Property eines Steuerelements und wenn der Wert mit einem definierten Wert übereinstimmt, ändert sich die Property. In der Theorie mag das alles kompliziert klingen, aber mit einem Beispiel wird das Ganze einfacher.

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

In diesem Style setzen wir das Foreground Property auf die Farbe blau, damit es wie ein Hyperlink aussieht. Wir fügen einen Trigger hinzu, der das Property IsMouseOver überwacht- - sobald sich das Property auf True ändert, wenden wir zwei Setter an: ändern des Property Foreground auf die Farbe rot und formatieren des Textes auf unterstrichen. Das ist ein sehr gutes Beispiel, um zu zeigen, wie einfach man mit einen Trigger das Design ändern kann, ohne Code-Behind schreiben zu müssen.

Wir definieren einen lokalen Stil für diesen spezifischen TextBlock, aber wie in den vorherigen Artikeln gezeigt, hätte der Stil auch global definiert werden können, wenn wir wollten, dass er auf alle TextBlock-Controls in der Anwendung angewendet wird.

Datentrigger

Datentrigger, dargestellt durch das Element <:DataTrigger>, werden für Eigenschaften verwendet, die nicht unbedingt Abhängigkeiten sind. Sie arbeiten, indem sie eine Bindung zu einer regulären Eigenschaft erstellen, die dann auf Änderungen überwacht wird. Dies eröffnet auch die Möglichkeit, Ihren Trigger an eine Eigenschaft auf einem anderen Control zu binden. Betrachten wir zum Beispiel das folgende Beispiel:

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

In diesem Beispiel haben wir eine CheckBox und einen TextBlock. Mit einem DataTrigger binden wir den TextBlock an die IsChecked-Eigenschaft der CheckBox. Wir liefern dann einen Standardstil, bei dem der Text "Nein" und die Vordergrundfarbe rot ist, und dann, mit einem DataTrigger, einen Stil, bei dem die IsChecked-Eigenschaft der CheckBox auf True geändert wird. In diesem Fall machen wir sie grün mit einem Text, der "Yes!" sagt (wie auf dem Screenshot zu sehen).

Event Trigger

Event Trigger, dargestellt durch das Element <EventTrigger>, werden hauptsächlich verwendet, um eine Animation als Reaktion auf den Aufruf eines Ereignisses auszulösen. Wir haben noch keine Animationen besprochen, aber um zu zeigen, wie ein Ereignis Trigger funktioniert, werden wir sie trotzdem verwenden. Werfen Sie einen Blick auf das Kapitel über Animationen für weitere Details. Hier ist das Beispiel:

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

Das Markup mag etwas mächtig aussehen, aber wenn Sie dieses Beispiel ausführen und sich das Ergebnis ansehen, werden Sie sehen, dass wir tatsächlich eine ziemlich coole Animation durchgeführt haben, die in beide Richtungen geht, in ca. 20 Zeilen XAML. Wie Sie sehen können, benutze ich einen Event Trigger, um zwei Events zu abonnieren: MouseEnter und MouseLeave. Wenn die Maus eintritt, mache ich einen sanften und animierten Übergang zu einer Schriftgröße von 28 Pixeln in 300 Millisekunden. Wenn die Maus den TextBlock verlässt, ändere ich die Schriftgröße wieder auf 18 Pixel, aber ich mache es etwas langsamer, einfach weil es irgendwie cool aussieht.

Zusammenfassung

WPF-Stile machen es einfach, für ein einheitliches Aussehen zu sorgen, und mit Triggern wird dieses Aussehen dynamisch. Styles sind großartig in Ihrer Anwendung, aber sie sind noch besser, wenn sie in Control-Vorlagen usw. verwendet werden. Sie können mehr darüber an anderer Stelle in diesem Tutorial erfahren.

Im nächsten Artikel werden wir uns mit Multi-Triggern befassen, die es uns ermöglichen, Stile basierend auf mehreren Eigenschaften anzuwenden.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!