Event trigger

Event triggers are generally used to perform actions when the routed events of the associated FrameworkElement arises. This is mainly used in animations to control the look when a certain UI event raises.

In the following example, we have a Textblock control. By default, its size is set to 30 with an opacity level of 20%. It has two events, MouseEnter and MouseLeave, associated with it. Now, on mouse hover we need to specify an animation to grow the font size to 50 and the opacity to 100%. Similarly, on mouse leave, we need to bring it back to the initial state.

Here, the event trigger will help you to perform the same within the XAML page:

<TextBlock Text="Hover here" FontSize="30" Opacity="0.2"  
  HorizontalAlignment="Center"  
  VerticalAlignment="Center"> 
  <TextBlock.Style> 
    <Style TargetType="TextBlock"> 
      <Style.Triggers> 
        <EventTrigger RoutedEvent="MouseEnter"> 
          <EventTrigger.Actions> 
             <BeginStoryboard> 
               <Storyboard> 
                 <DoubleAnimation Duration="0:0:0.500"
Storyboard.TargetProperty="FontSize" To="50" /> <DoubleAnimation Duration="0:0:0.500"
Storyboard.TargetProperty="Opacity" To="1.0"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.500"
Storyboard.TargetProperty="FontSize" To="30" /> <DoubleAnimation Duration="0:0:0.500"
Storyboard.TargetProperty="Opacity" To="0.2"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock>

When you run the sample, by default, the text will be visible with a 20% opacity level. Now, if you hover the mouse on the text, you will see a smoothing animation to gradually change the size of the font and the opacity level.

When you leave your mouse out of the text, it will smoothly return to the initial state. Here, the Duration property of the animation has the responsibility for the smoothing effect:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.133.228