A Trigger sets properties or starts actions, such as animation, when a property value changes or when an event is raised. Triggers are used in styles to perform some actions. Triggers create visual effects on controls. By using Triggers we can change the appearance of Framework Elements.
There are three types of Triggers available.
1. Property Trigger
2. Event Trigger
3. Data Trigger
Property Trigger
Property Trigger Executes Collections of Setters or you can say that it sets property values or starts actions when UIElements property value changes.
<Window.Resources>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" Value="0.2" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
In the above code, a Trigger is created for Target type Button. It will set the property “opacity” of a Button when it is pressed. You can set trigger on any Dependency Property of the control.
Now let us apply this style to a Button.
<Button Height="40"
Width="200"
Style="{StaticResource MyButtonStyle}">Seekyourcareer.in
</Button>
So when you press the Button, the Trigger executes.
Here is the Output shown below:
In addition to this Trigger, MultiTrigger allows you to set property values based on multiple conditions.
MultiTrigger
MultiTrigger is used to set action on Multiple Property change. It will executes when all conditions are satisfy within MultiTrigger.Condition
<Style x:Key="MultiTrig" TargetType="Button">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True" />
<Condition Property="Background" Value="Orange" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderThickness" Value="7" />
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
You can now apply this style to a Button.
<Button Height="40"
Width="200"
Content="Seekyourcareer.in"
Background="Orange"
Style="{StaticResource MultiTrig}">
</Button>
Event Trigger
Event Triggers are used to perform action when RoutedEvent of FrameworkElement raised. or in simple language Event Trigger is a Trigger which starts a set of actions based on the occurence of an event.
They are generally used to perform some animation on controls (like: color Animation, DoubleAnimation using KeyFrame etc.)
Here is a simple demonstration.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="50" />
<Setter Property="Margin" Value="20" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="300" Duration="0:0:1.5"
AccelerationRatio="0.10" DecelerationRatio="0.25"
Storyboard.TargetProperty="(Canvas.Width)">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1.5"
AccelerationRatio="0.10" DecelerationRatio="0.25"
Storyboard.TargetProperty="(Canvas.Width)" >
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Rectangle Width="100" Height="60" Fill="BlueViolet"></Rectangle>
</Grid>
</Window>
Output Window is shown below:
Start and end state of rectangle is shown above, it is achieved with animation effect. You can read more about Triggers in MSDN Documentation.
Data Trigger
Data Trigger applies to property values to perform action on Data by creating Binding to the UIElement. It allows to set property value when Binding Data matches specified condition.
Here is a simple demonstration.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<CheckBox Name="chkbox" Content="Are you Developer ?" />
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="False" />
<Setter Property="Foreground" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=chkbox, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="True !" />
<Setter Property="Foreground" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Window>
Output Window is shown below:
In addition to this, MultiDataTrigger is also there.
MultiDataTrigger
MultiDataTrigger is same as DataTrigger. In addition it have multiple conditions, which when evaluates to true then only setters will do the action specified. (Note: that all the conditions should be evaluated to true).
TIPS:
– You use DataTrigger and MultiDataTrigger when the property of your condition is data-bound.
– Style, ControlTemplate, DataTemplate all have Trigger property that can contain a set of triggers.
– Windows Presentation Foundation (WPF) themes are defined by using the styling and templating mechanism that Windows Presentation Foundation (WPF) exposes for customizing the visuals of any element.