Triggers

Triggers provide dynamic interaction with the UI elements. They enable to implement property changes in XAML (rather than in code behind) in response to some other property changes or event occurences. Triggers are places inside Style.Triggers collection. However, EventTrigger and only event-trigger can be placed directly inside control.triggers collection without using styles.


In WPF there are five types of triggers:

1)      Property Trigger

2)      Multi Trigger

3)      Data Trigger

4)      Multi-data Trigger

5)      Event Trigger

Property Triggers: They get activated when some property changes, for example, IsMouseOver property, Is Focused etc. They have following important properties:

• Property : The property which will trigger action
• Value: Value of the property which should match to trigger action
• Setters: a collection of setters which will get executed when the trigger occurs
• EnterActions: a collection of Action objects which get executed when the trigger becomes active
• Exit Actions: a collection of Action objects which get executed when the trigger becomes inactive

Example:

<!--Property Triggers-->

<Style x:Key="borderStyle">

      <Setter Property="Border.Width" Value="6"/>

      <Setter Property="Border.Background" Value="Yellow"/>

      <Style.Triggers>

           <Trigger Property="Border.IsMouseOver" Value="True">                   

               <Setter Property="Border.Width" Value="8"/>

               <Setter Property="Border.Background" Value="Black"/>                   

            </Trigger>

        </Style.Triggers>

 </Style>

       

<Border Height="360" Canvas.Top="40" Canvas.Left="45" Style="{StaticResource borderStyle}"/>

 In above example, when Button.IsMouseOver property is true, then the width grows to 8 and background changes to Black from Yellow.

Multi Triggers: We can also specify a set of properties which should match their corresponding value for trigger to get activated.

      <Style x:Key="expandStyle">

            <Style.Triggers>               

                <MultiTrigger>

                    <MultiTrigger.Conditions>

                        <Condition Property="Canvas.IsMouseOver" Value="True"/>

                        <Condition Property="Canvas.Width" Value="440"/>

                    </MultiTrigger.Conditions>

                    <MultiTrigger.EnterActions>

…

                    </MultiTrigger.EnterActions>

                </MultiTrigger>                

            </Style.Triggers>

        </Style>

Here, The action collection will fire if Canvas.Width is 440 and the IsMouseOver property is true.

Data Triggers: They are used to monitor the data of a control with its value, and if they match the trigger gets fired. It has a binding property, instead of property property, that indicated the bound property to listen to.

Example:

<!--Data Triggers-->

        <Style TargetType="TextBox">

            <Style.Triggers>

                <DataTrigger Value="WPF" Binding="{Binding Path=Name}">

                    <Setter Property="TextBox.Foreground" Value="Green"/>

                </DataTrigger>

            </Style.Triggers>

        </Style>

<TextBox Name="TextBox1" Width="400" Height="50" FontSize="32" Text="{Binding Path=Name}"/>

The textbox is binded to a datatable in code behind. When the name in textbox is equal to WPF, the foreground color changes to Green (by default its black)

Multi-data Triggers: Ofcourse they mean specifying multiple data properties that need to be matched to corresponding values for trigger to occur.

Event Triggers: Event Triggers, as the name indicates, get activated when an event is fired. Example, Button.Click. They have following properties:

• RoutedEvent: The routed event which needs to get fired so that the trigger executes
• Actions: a collection of actions to be executed when trigger occurs

Example:

     <Style x:Key="buttonStyle">

            <Style.Triggers>

                <EventTrigger RoutedEvent="Button.Click">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimation From="1" To="100" Storyboard.TargetProperty="Width"/>

                                <DoubleAnimation From="1" To="100" Storyboard.TargetProperty="Height"/>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Style.Triggers>

        </Style>

<Button Height="20" Width="80" Content="Click Me" Grid.Row="2" Style="{StaticResource buttonStyle}"/>

You can ignore the Storyboard tags for now, as I will discuss them thoroughly in some future blog. Here, the button size grows from 1 to 100 when button is clicked.

=====================================================================