XAML - Trigger
Grundsätzlich können Sie mit einem Trigger Eigenschaftswerte ändern oder Aktionen basierend auf dem Wert einer Eigenschaft ausführen. Grundsätzlich können Sie das Erscheinungsbild und / oder Verhalten Ihres Steuerelements dynamisch ändern, ohne ein neues erstellen zu müssen.
Trigger werden verwendet, um den Wert einer bestimmten Eigenschaft zu ändern, wenn bestimmte Bedingungen erfüllt sind. Trigger werden normalerweise in einem Stil oder im Stammverzeichnis eines Dokuments definiert, die auf dieses bestimmte Steuerelement angewendet werden. Es gibt drei Arten von Auslösern:
- Eigenschaftsauslöser
- Datenauslöser
- Ereignisauslöser
Eigenschaftsauslöser
Wenn bei Eigenschaftsauslösern eine Änderung an einer Eigenschaft auftritt, wird entweder eine sofortige oder eine animierte Änderung an einer anderen Eigenschaft vorgenommen. Sie können beispielsweise einen Eigenschaftsauslöser verwenden, wenn Sie das Erscheinungsbild der Schaltfläche ändern möchten, wenn sich die Maus über der Schaltfläche befindet.
Beispiel
Das folgende Beispiel zeigt, wie Sie die Vordergrundfarbe einer Schaltfläche ändern, wenn die Maus in ihren Bereich eintritt.
<Window x:Class = "XAMLPropertyTriggers.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "MainWindow" Height = "350" Width = "604">
<Window.Resources>
<Style x:Key = "TriggerStyle" TargetType = "Button">
<Setter Property = "Foreground" Value = "Blue" />
<Style.Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter Property = "Foreground" Value = "Green" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}"
Content = "Trigger"/>
</Grid>
</Window>
Wenn Sie den obigen Code kompilieren und ausführen, wird die folgende Ausgabe erzeugt:
Wenn die Maus den Bereich der Schaltfläche betritt, ändert sich die Vordergrundfarbe in Grün.
Datenauslöser
Ein Datenauslöser führt eine Aktion aus, wenn die gebundenen Daten eine bestimmte Bedingung erfüllen. Schauen wir uns den folgenden XAML-Code an, in dem ein Kontrollkästchen und ein Textblock mit einigen Eigenschaften erstellt werden. Wenn das Kontrollkästchen aktiviert ist, wird die Vordergrundfarbe in Rot geändert.
<Window x:Class = "XAMLDataTrigger.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "Data Trigger" Height = "350" Width = "604">
<StackPanel HorizontalAlignment = "Center">
<CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/>
<TextBlock Name = "txtblock" VerticalAlignment = "Center"
Text = "Event Trigger" FontSize = "24" Margin = "20">
<TextBlock.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}"
Value = "true">
<Setter Property = "TextBlock.Foreground" Value = "Red"/>
<Setter Property = "TextBlock.Cursor" Value = "Hand" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Window>
Wenn Sie den obigen Code kompilieren und ausführen, wird die folgende Ausgabe erzeugt:
Wenn das Kontrollkästchen aktiviert ist, ändert sich die Vordergrundfarbe des Textblocks in Rot.
Ereignisauslöser
Ein Ereignisauslöser führt eine Aktion aus, wenn ein bestimmtes Ereignis ausgelöst wird. Es wird normalerweise verwendet, um einige Animationen wie DoubleAnimation, ColorAnimation usw. auszuführen. Der folgende Codeblock erstellt eine einfache Schaltfläche. Wenn das Klickereignis ausgelöst wird, werden Breite und Höhe der Schaltfläche erweitert.
<Window x:Class = "XAMLEventTrigger.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "MainWindow" Height = "350" Width = "604">
<Grid>
<Button Content = "Click Me" Width = "60" Height = "30">
<Button.Triggers>
<EventTrigger RoutedEvent = "Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4">
<LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
<LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
<LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
<LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4">
<LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/>
<LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/>
<LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/>
<LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Window>
Wenn Sie den obigen Code kompilieren und ausführen, wird die folgende Ausgabe erzeugt:
Klicken Sie nun auf die Schaltfläche und Sie werden feststellen, dass sie sich in beiden Dimensionen ausdehnt.