Introduction :
A WPF trigger changes one or more properties of a control in response to an action when a pre-defined condition is met. For example, we can use a Trigger on IsMouseOver event to change the font of the control. Triggers allow you to do things in markup which are generally done in code behind thus helping in separating style and code.
Types of Triggers :
There are five types of triggers supported by WPF:
1) Property Trigger
2) Data Trigger
3) Event Trigger
4) MultiTrigger
5) MultiDataTrigger
1) Property Trigger
A property trigger gets executed when the value for a property matches a pre-set value following which style setters are invoked to change the visual elements associated with the control.There are three conditions that should be met to create a property trigger within a style.
a) The property whose change in value will trigger the functionality should have a name.
b) We need to set the triggering condition i.e define two values in the property and value properties of a trigger object, available within the style's triggers collection.
c) Define list of style setters which will be applied when the trigger is activated.
<Window.Resources>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="FontSize" Value="300" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="Click" Height="60" Width="120" Margin="4" />
</StackPanel>
As per above code snippet the moment the IsMouseOver property value becomes true the defined setter action inside trigger will get executed.
2) Data Trigger
Data triggers are similar to property trigger in the sense that they update user interface when a trigger is fired. However the key difference is that the target value is found using data binding making these type of triggers much more powerful.
<Window.Resources>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding
RelativeSource={RelativeSource Self},
Path=Content}" Value="Click">
<DataTrigger.Setters>
<Setter Property="FontSize" Value="30" />
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="Click"
Height="60" Width="180" Margin="6" />
</StackPanel>
As per above code, Data trigger checks value of Content property of Button ("Click") and if value matches then it will execute setter block of data trigger. Data triggers is a perfect choice when data binding is being used in scenarios such as the MVVM design pattern.
3) Event Trigger
Event trigger is typically used for acting in response to events being raised . With the use of these triggers any routed event can be responded with an action or group of actions. Event Trigger are generally used for animation purpose.
<Window.Resources>
<Style TargetType="Button">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.6"
Storyboard.TargetProperty="Width"
To="250" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.6"
Storyboard.TargetProperty="Width"
To="200" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="Click"Height="40" Width="150" Margin="5" />
</StackPanel>
In the above code snippet we define MouseEnter and MouseLeave event trigger. Hence on the occurrence of these events the EventTriggerAction will get executed changing the width of the button. So on MouseEnter the width of button will set to 250 and on MouseLeave it will revert back to 200.
4) MultiTrigger
A standard property trigger works by monitoring a single property hence limiting its usage. MultiTrigger overcome this limitation by providing a collection of property values to be matched and the control only gets updated if all conditions are satisfied.
<Style x:Key="MulitTriggerButtonStyle" TargetType="Button">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True" />
<Condition Property="Background" Value="Red" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderThickness" Value="4" />
<Setter Property="BorderBrush" Value="Blue" />
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
In the above code snippet we have applied two conditions i.e IsPressed and Background on Button which should be met before setters get applied.
5) MultiDataTrigger
MultiDataTrigger is similar to a Data Trigger however the key difference is that we can use it for triggering changes when two or more bindings return the correct value.
Style TargetType="{x:Type Button}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<!-- This binding refers to the actual WPF element. -->
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True"/>
<Condition Binding="{Binding Path=Role}" Value="Admin"/>
</MultiDataTrigger.Conditions>
<Setter Property="Button.Background" Value="Orange" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
In above code, the collection of setters applies property value when following two conditions are satisfied ( MouseOver and Admin Role)
0 Comment(s)