Monday, January 14, 2008

Trigger – EnterActions and ExitActions vs. EventTrigger – Actions

  • What’s the difference between Trigger and EventTrigger?
  • What are EnterActions and ExitActions and how do they compare to Actions?

Triggers
Triggers corresponds to the change of a property such as IsMouseOver, IsPressed (Button), IsSelected (ListBox).

Example:
<
Trigger Property="IsMouseOver" Value="True">
   
<Trigger.Setters>
        <
Setter Property="Foreground" Value="Red" />
   
</Trigger.Setters>
</Trigger>
This trigger will be activated when the IsMouseOver-property becomes true.

EventTriggers
EventTriggers is activated when an event (RoutedEvent) is raised. When the specified routed event is raised a set of Actions are activated.

Example:
<EventTrigger RoutedEvent="Click">
   
<EventTrigger.Actions>
       
<BeginStoryboard>
           
<BeginStoryboard.Storyboard>
               
<Storyboard>
                   
<DoubleAnimation Storyboard.TargetProperty="Width" Duration="0:0:1" From="100" To="400" AutoReverse="true" />
               
</Storyboard>
           
</BeginStoryboard.Storyboard>
       
</BeginStoryboard>
   
</EventTrigger.Actions>
</EventTrigger>
The EventTrigger above will be raised when the button is pressed so that the Click event is raised.

Conclusion: Trigger is something that is activated from property changes and EventTrigger is something that is activated when a RoutedEvent is raised.

 

That’s the basic of Triggers and EventTriggers. But if we look more closely at Trigger we see that it also contains EnterActions and ExitActions. The Trigger example above could be extended to the following:
<Trigger Property="IsMouseOver" Value="True">
   
<!-- Add a trigger when the mouse is entering the button. -->
   
<Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
               
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:1" />
            </Storyboard>
        </
BeginStoryboard>
   
</Trigger.EnterActions>

   
<!-- Add a trigger when the mouse is leaving the button. -->
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity"              
                To
="0.2" Duration="0:0:1" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
    <Trigger.Setters>
        <Setter Property="Foreground" Value="Red" />
    </Trigger.Setters>   
</Trigger>


The condition is that the Trigger should be activated when the IsMouseOver-property is set to true. When this happens the EnterAction will apply and also all the Setters in Trigger.Setters. ExitActions will only be activated when the property is set to false again. The difference between EnterActions/ExitActions and the Setters is the following; If we use Setters the value we set will automatically go back to the value it had before the Trigger kicked in. When we use EnterActions or ExitActions these values will be set permanently.
To be more explicit; If we remove the ExitActions in the code above we will only have EnterActions that will set Opacity to 1.0 (default was set to 0.5 in my code) and also the Setter that will change the Foreground to Red when the mouse is over the button. If we move the mouse away from the button the Foreground will go back to its default value (probably black) but the Opacity will still be 1.0.

The conclusion is that EnterActions and ExitActions we set values permanently and Setters will only set temporary values that will be applied as long as the property condition is fulfilled in the Trigger. We can also note that EventTriggers also have EnterActions and ExitActions but these can not be set (we will get a runtime error).

Also download the example project and source here.

No comments: