23.5 Trigger

Werte, die wir bisher an einen Style gebunden hatten, waren immer statisch. Der Wert wurde gesetzt und konnte nicht mehr verändert werden. Häufig möchte man aber zur Laufzeit Aktionen ausführen, wenn bestimmte Bedingungen erfüllt sind. Die Lösung hierfür bieten Trigger. Trigger werden häufig für die Reaktion auf Ereignisse, Eigenschaftsänderungen usw. verwendet.

Jedes Trigger-Objekt basiert auf einer Klasse, die von TriggerBase abgeleitet ist. Es gibt insgesamt fünf Klassen, die von TriggerBase abgeleitet sind. Sie können sie Tabelle 23.1 entnehmen.

Trigger werden oft zusammen mit den Styles eingesetzt, können aber auch der Eigenschaft Triggers einer Komponente direkt zugewiesen werden. Eine Komponente kann auch mit mehreren Triggern verbunden werden, um auf verschiedene Zustandsänderungen unterschiedlich zu reagieren.

23.5.1 Eigenschaftstrigger

Eigenschaftstrigger werden in einem Style definiert. Sie müssen entweder mit x:Key dem Style einen Identifier geben oder mit TargetType den Typ des Zielelements angeben. Das ist genauso wie bei jeder anderen Style-Definition.

Ein Style-Objekt verfügt über eine Auflistung aller definierten Trigger. Die Referenz darauf liefert die Eigenschaft Triggers. Innerhalb eines Trigger-Objekts wird mit der Eigenschaft Property die zu prüfende Abhängigkeitseigenschaft genannt, mit Value der Wert, gegen den geprüft werden soll. Hat die Elementeigenschaft den unter Value eingetragenen Wert, gilt die Bedingung als erfüllt, und die Darstellung des Elements verändert sich nach den Angaben, die unter Setter angegeben sind. Da bei einer erfüllten Bedingung häufig mehrere Setter-Objekte definiert werden, hat ein Trigger-Objekt eine Auflistung von Setter-Objekten, die über die Eigenschaft Setters aufgerufen wird.

In Tabelle 23.2 sind alle spezifischen Eigenschaften eines Eigenschaftstriggers aufgeführt.

Damit sieht die Grundstruktur eines Trigger-Objekts wie im folgenden Listing gezeigt aus:

<Style>
  <Style.Triggers>
    <Trigger Property="..." Value="...">
      <Trigger.Setters>
        <Setter .../>
        <Setter .../>
      </Trigger.Setters>
    </Trigger>
  </Style.Triggers>
</Style>

Listing 23.22 Grundstruktur eines »Trigger«-Objekts

Sehen wir uns zunächst die Trigger an einem konkreten Beispiel an. In dem Beispiel ändert sich die Darstellung von zwei TextBox-Elementen in Abhängigkeit davon, ob sich der Mauszeiger über dem betreffenden Element befindet oder das Element sogar fokussiert wird. Dazu sind sogar zwei Trigger notwendig.

// Beispiel: ..\Kapitel 23\TriggerSample
<Window ...
     Name="form" Title="TriggerSample" Height="189" Width="304">
  <Window.Resources>
    <Style TargetType="{x:Type TextBox}">
      <Setter Property="Height" Value="25" />
      <Setter Property="Width" 
              Value="{Binding ElementName=form, Path=Width}" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="FontSize" Value="14" />
      <Setter Property="Control.Background" Value="AntiqueWhite" />
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Trigger.Setters>
            <Setter Property="Control.Background" Value="Cyan" />
          </Trigger.Setters>
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
          <Trigger.Setters>
            <Setter Property="Background" Value="MidnightBlue" />
            <Setter Property="Foreground" Value="White" />
          </Trigger.Setters>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  [...]
  <StackPanel>
    <TextBox Width="Auto"></TextBox>
    <TextBox Width="Auto"></TextBox>
  </StackPanel>
</Window>

Listing 23.23 Der XAML-Code des Beispielprogramms »TriggerSample«

Abbildung 23.6 Ausgabe des Beispielprogramms »TriggerSample«

In diesem Zusammenhang ist es wichtig zu wissen, dass WPF-Elemente Eigenschaften anbieten, aus denen der Zustand ausgelesen werden kann. Dazu gehören unter anderem auch die beiden Eigenschaften IsMouseOver und IsFocused der TextBox, die beide mit einem booleschen Wert den entsprechenden Elementzustand beschreiben. Beide Properties sind für die Trigger unseres Beispielprogramms wichtig, denn mit ihnen werden die Prüfbedingungen formuliert.

Ein Trigger nimmt Änderungen an einer oder mehreren Komponenten vor. Ändern sich die Bedingungen erneut, werden die Änderungen wieder rückgängig gemacht. Verlässt in unserem Beispiel der Mauszeiger den Bereich einer TextBox, kehrt diese in ihren Ausgangszustand zurück.

MultiTrigger

Das Auslösen eines Triggers muss nicht zwangsläufig nur von einer Bedingung abhängen. WPF stellt mit MultiTrigger ein Element zur Verfügung, das es uns erlaubt, mehrere Bedingungen zu formulieren, die alle gleichzeitig erfüllt sein müssen, damit der Trigger gefeuert wird. Das Element MultiTrigger beschreibt eine Collection, in der alle Bedingungen erfasst werden. Die Eigenschaft MultiTrigger.Conditions liefert die Referenz auf die Collection, die einzelnen Bedingungen werden durch Condition-Elemente beschrieben.

Im folgenden Beispiel enthält das Window eine TextBox-Komponente mit einem Textinhalt. Wenn die TextBox leer ist und sich gleichzeitig der Mauszeiger über der TextBox befindet, wird deren Hintergrund in Rot dargestellt.

// Beispiel: ..\Kapitel 23\MultiTriggerSample
<Window ...>
  <Window.Resources>
    <Style TargetType="{x:Type TextBox}">
      <Style.Triggers>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsMouseOver" Value="true" />
            <Condition Property="Text" Value="" />
          </MultiTrigger.Conditions>
          <Setter Property="TextBox.Background" Value="Red" />
        </MultiTrigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel>
    <TextBox Margin="10" Width="Auto">
      Windows Presentation Foundation WPF
    </TextBox>
  </StackPanel>
</Window>

Listing 23.24 Multitrigger einer TextBox

23.5.2 Datentrigger

Datentrigger sind vom Typ DataTrigger. Sie ähneln den im letzten Abschnitt besprochenen Eigenschaftstriggern. Der Unterschied zwischen diesen beiden ist, dass Datentrigger nicht den Wert einer Abhängigkeitseigenschaft (also die Eigenschaft Property eines Trigger-Objekts) verwenden, sondern den Wert aus einer Datenbindung beziehen. Damit wird es auch möglich, auf die Änderung einer beliebigen Eigenschaft zu reagieren, also auch einer herkömmlichen CLR-Eigenschaft. Die Klasse DataTrigger definiert nur drei spezifische Eigenschaften, die Sie Tabelle 23.3 entnehmen können.

Um einen Datentrigger zu definieren, muss ein DataTrigger zur Collection Style.Triggers hinzugefügt werden. Da Datentrigger auch mit Eigenschaften umgehen können, die nicht zu den Abhängigkeitseigenschaften gezählt werden, wird anstelle der Eigenschaft Property (die bekanntlich die Angabe einer Abhängigkeitseigenschaft erfordert) die Eigenschaft Binding angegeben.

Das folgende Beispiel zeigt den Einsatz eines Datentriggers. Im Fenster ist eine TextBox enthalten. Wird zur Laufzeit die Zeichenfolge »Weg damit« eingetragen, wird die TextBox deaktiviert.

// Beispiel: ..\Kapitel 23\DataTriggerSample
<Window ...>
  <Window.Resources>
    <Style TargetType="{x:Type TextBox}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding 
                     RelativeSource={RelativeSource Self}, Path=Text}" 
                     Value="Weg damit">
          <Setter Property="IsEnabled" Value="False" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel>
    <TextBox Margin="10" Width="Auto" FontSize="16" 
             Background="AntiqueWhite" />
  </StackPanel>
</Window>

Listing 23.25 Definition eines DataTriggers

23.5.3 Ereignistrigger

Ereignistrigger werden durch Ereignisse vom Typ RoutedEvent ausgelöst. Anstelle des Aufrufs eines Ereignishandlers können Ereignistrigger Animationen starten. Allerdings sollten Sie unter dem Begriff »Animation« nicht nur grafische Spielereien verstehen. Auch Tabellen, die sich aktualisierende Daten in Diagrammen optisch ansprechend anzeigen, gehören zu der Gruppe der Animationen.

Sehen wir uns zuerst an, wie Ereignistrigger in XAML definiert werden:

<Style TargetType="{x:Type Button}">
  <Style.Triggers>
    <EventTrigger RoutedEvent="...">
      <EventTrigger.Actions>
        [...]
      </EventTrigger.Actions>
    </EventTrigger>
  </Style.Triggers>
</Style>

Listing 23.26 Struktur eines EventTriggers

Ereignistrigger werden in einem Style-Element oder alternativ direkt in einer Komponente definiert. Das EventTrigger-Element beschreibt den Ereignistrigger. Als Attribut muss RoutedEvent angegeben sein. Hier wird das Ereignis angegeben, das den Trigger auslöst. Darunter wird ein EventTrigger.Actions-Element angegeben, in dem die Aktionen festgelegt werden, die beim Auslösen des Triggers ausgeführt werden sollen.

Das folgende Beispiel demonstriert den Einsatz eines einfachen Ereignistriggers. Getriggert wird das Ereignis MouseEnter. Zur Laufzeit bewirkt das Ziehen der Maus über die Schaltfläche, dass diese zunächst unsichtbar wird, denn die Eigenschaft Opacity wird innerhalb der Animation zuerst auf 0 gesetzt. Bis zur vollen Wiederherstellung der Sichtbarkeit sind 10 Sekunden festgelegt.

// Beispiel: ..\Kapitel 23\EventTriggerSample
<Window ...>
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Style.Triggers>
      <EventTrigger RoutedEvent="MouseEnter">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation From="0" To="1" Duration="0:0:10" 
                   Storyboard.TargetProperty="(Opacity)" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Style.Triggers>
  </Style>
    </Window.Resources>
  <Grid>
    <Button>Button1</Button>
  </Grid>
</Window>

Listing 23.27 Ein EventTrigger in Aktion

Mit den Komponenten BeginStoryBoard und StopStoryBoard werden die Aktionen gestartet und beendet. Eine StoryBoard-Komponente müssen Sie sich als einen Container vorstellen, in dem die Animation über eine Zeitlinie hinweg abläuft.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.