WPF Triggers – DataTrigger – EventTrigger – MultiTrigger – MultiDataTrigger

WPF Triggers can be classified as Trigger, DataTrigger, EventTrigger, MultiTrigger and MultiDataTrigger. Triggers changes properties based on change in value of other properties. The WPF styling and templating model allows you to specify triggers within your Style, ControlTemplate, and DataTemplate. TriggerBase is the base class for objects that allow you to apply changes when a certain property value becomes true, or when an event occurs.

wpf-triggers-datatrigger-eventtrigger-multitrigger-heirarchy

wpf-triggers-datatrigger-eventtrigger-multitrigger-heirarchy

WPF defines properties such as  IsMouseOver that correspond to user actions such as mouse hovers over a UIElement. WPF styles change property values based on such properties and triggers over them within markup. Once trigger condition is not satisfied then property value changes back. This will happen if property is dependency property as it will provide change notification. For example IsPressed on Button and IsSelected on ListBoxItem.

WPF Trigger must have following specified to have meaning and correctness:

1. Property : Property on which the trigger is set

2. Value: Value of property on which the trigger will be set.

If one or both of the properties are not set, an exception is thrown. The Setters property of a Trigger object can only consist of Setter objects. Adding a Setter child to a Trigger object implicitly adds it to the SetterBaseCollection for the Trigger object. EventSetter objects are not supported; only Style.Setters supports EventSetter objects.

wpf-triggers-datatrigger-eventtrigger-multitrigger

wpf-triggers-datatrigger-eventtrigger-multitrigger

Following types of triggers are provided by WPF for various purposes:

1. Trigger: Apply changes based on the value of a property

<Style x:Key=”Triggers” TargetType=”Button”>
<Style.Triggers>
<Trigger Property=”IsPressed” Value=”true”>
<Setter Property = “Foreground” Value=”Red”/>
</Trigger>
</Style.Triggers>
</Style>

2. MultiTrigger : Apply change based states of multiple properties

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property=”HasItems” Value=”false” />
<Condition Property=”Width” Value=”Auto” />
</MultiTrigger.Conditions>
<Setter Property=”MinWidth” Value=”120″/>
</MultiTrigger>

3. EventTrigger: Apply changes based on event

<Style TargetType=”Rectangle”>
<Setter Property=”Width” Value=”50″ />
<Style.Triggers>
<EventTrigger RoutedEvent=”MouseEnter”>
<BeginStoryboard>
<Storyboard>
<!– Do you animation here –>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>

4. DataTrigger: Apply changes based on Data of bound property

<Style TargetType=”ListBoxItem”>
<Style.Triggers>
<DataTrigger Binding=”{Binding Path=State}” Value=”Closed”>
<Setter Property=”Foreground” Value=”Red” />
</DataTrigger>
</Style.Triggers>
</Style>

5. MultiDataTrigger: Apply changes based on Multiple Data of bound properties

<Style TargetType=”ListBoxItem”>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding=”{Binding Path=Name}” Value=”Mumbai” />
<Condition Binding=”{Binding Path=State}” Value=”MH” />
</MultiDataTrigger.Conditions>
<Setter Property=”Background” Value=”Red” />
</MultiDataTrigger>
</Style.Triggers>
</Style>

Leave a Reply

Your email address will not be published. Required fields are marked *