VISUAL PROGRAMMING

CSC444/CSC412
WPF Triggers

1
Topics to Cover
• WPF – Triggers
• Types of Triggers

2
WPF - Triggers
• Triggers in WPF are response of some action, i.e. the setter Properties
changes with some condition.
• A Trigger is applied as part of Styles only difference being, in a Style
the Setter properties are static where as in Trigger the setter's
properties changes with condition.
• When this condition becomes false Trigger returns to its original
value.
• Triggers are mostly helpful in dynamically changing the appearance of
controls, animation etc.
• Internally trigger uses the concept of Dependency Properties.
3
Types of Triggers
• Triggers are used to change the value of any given property, when
certain conditions are satisfied.
• There are three types of triggers −
• Property Triggers
• Data Triggers
• Event Triggers

4
Property Triggers
• This is most common type of trigger. With the property trigger, if the
condition is true, the corresponding Setter elements are executed to
set one or more element properties. When the condition becomes
false, the property values revert to their pre-triggered values.
• In property triggers, when a change occurs in one property, it will
bring either an immediate or an animated change in another
property. For example, you can use a property trigger to change the
appearance of a button when the mouse hovers over the button.

5
WPF - Triggers

6
WPF - Triggers

7
Data Triggers
• A data trigger performs some actions when the bound data satisfies
some conditions.
• Data triggers, represented by the <DataTrigger> element
<DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path =
IsChecked}" Value = "true">
<Setter Property = "TextBlock.Foreground" Value = "Red"/>
<Setter Property = "TextBlock.Cursor" Value = "Hand" />
</DataTrigger>

8
WPF – Data Triggers

9
Event Triggers
• An event trigger performs some actions when a specific event is fired. It is usually used to accomplish
some animation on control
• Event triggers, represented by the <EventTrigger> element
<Button.Triggers>
<EventTrigger RoutedEvent = "Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty ="Width" Duration = "0:0:3">
<LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
<LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
<LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
</DoubleAnimationUsingKeyFrames>
10