Triggers are used for changing the style of a WPF control when a certain condition is true.Depending on a condition such as specific value of a property trigger executes which changes the appearance of the control.
There are three types of triggers:
Property Trigger
Property Trigger executes when the controls property becomes equal to a specific value.This trigger is defined using the <Trigger> element.In the following example when the mouse is over the textbox the font is changed to italic.
<Grid> <TextBlock Text="Property Trigger.Hover mouse over me." FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.Style> <Style TargetType="TextBlock"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="Foreground" Value="Blue" /> </Trigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> </Grid>
TextBlock displaying text
The style of TextBlock changes on mouse hover
Data Trigger
A data bound property is watched for changes and when that property has a specific value the Setters defined by the triggers are executed.This trigger is defined by the DataTrigger element.
In the following example we are binding the Text property of the textbox with the Age property defined by the DataContext.
When the Age property becomes equal to 18 the DataTrigger sets the Foreground property as Red.
<TextBox Text="{Binding Age}" x:Name="txtAge">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding Age}" Value="18">
<Setter Property="Foreground" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Event Trigger
Event Triggers executes in response to a control event such as MouseEnter.The trigger is often used to start an animation.
We are defining two brushes and two StoryBoards.These Storyboards are executed on mouse enter and and mouse leave events
<Window.Resources>
<SolidColorBrush x:Key="MouseEnterBrush" Color="Red" />
<SolidColorBrush x:Key="MouseLeaveBrush" Color="White" />
<Storyboard x:Key="MouseEnterStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SimpleText"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource MouseEnterBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseLeaveStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SimpleText"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource MouseLeaveBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
We define the two event triggers for mouse and mouse leave events.Also for the two event triggers we define two Storyboards.
<Grid>
<Grid.Triggers>
<EventTrigger SourceName="SimpleText" RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="{StaticResource MouseEnterStoryboard}" />
</EventTrigger>
<EventTrigger SourceName="SimpleText" RoutedEvent="MouseLeave">
<BeginStoryboard Storyboard="{StaticResource MouseLeaveStoryboard}" />
</EventTrigger>
</Grid.Triggers>
<TextBox Name="SimpleText" Text="Hello world!" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
Leave a Reply