WPF: Working with Event Triggers

While an ordinary trigger waits for a property change to occur, an event trigger waits for a specific event to be fired. You might assume that at this point you use setters to change the element, but that’s not the case. Instead, an event trigger requires that you supply a series of actions that modify the control. These actions are used to apply an animation.

Here I am taking a very simple example to explain  how can we use event triggers, Suppose I have a button and a textblock on my window. I want the controls to be grown up when mouse enters and reset as mouse leaves




For this we will require to write an event trigger for Mouse Enter and an event trigger for mouse leave event for both the controls. On mouse enter event the trigger will increase the size of control and on mouse leave It will decrease and reset the size of control to the original one. XAML code for the demo is written below

XAML Code

<StackPanel>

   <TextBlock Text="Demo" x:Name="EventDemoText" FontSize="12">

       <TextBlock.Style>

          <Style>

             <Style.Triggers>

                 <EventTrigger RoutedEvent="Mouse.MouseEnter">

                     <EventTrigger.Actions>

                         <BeginStoryboard>

                            <Storyboard>

                               <DoubleAnimation Duration="0:0:0.2"
                                  Storyboard.TargetProperty="FontSize" To="18" />

  </Storyboard>

     </BeginStoryboard>

          </EventTrigger.Actions>

             </EventTrigger>

                 <EventTrigger RoutedEvent="Mouse.MouseLeave">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                           <Storyboard>

                              <DoubleAnimation Duration="0:0:0.2"
                               Storyboard.TargetProperty="FontSize" To="12" />

     </Storyboard>

         </BeginStoryboard>

                     </EventTrigger.Actions>

                 </EventTrigger>

              </Style.Triggers>

            </Style>

         </TextBlock.Style>

       </TextBlock>

       <Button Content="Event trigger demo" MouseEnter="Button_MouseEnter">

         <Button.Style>

           <Style>

             <Style.Triggers>

               <EventTrigger RoutedEvent="Mouse.MouseEnter">

                  <EventTrigger.Actions>

                     <BeginStoryboard>

                        <Storyboard>

                          <DoubleAnimation Duration="0:0:0.2"
                           Storyboard.TargetProperty="FontSize" To="18" />

                         </Storyboard>

                      </BeginStoryboard>

                   </EventTrigger.Actions>

                </EventTrigger>

                <EventTrigger RoutedEvent="Mouse.MouseLeave">

                  <EventTrigger.Actions>

                     <BeginStoryboard>

                       <Storyboard>

                         <DoubleAnimation Duration="0:0:0.2"
                          Storyboard.TargetProperty="FontSize" To="12" />

                        </Storyboard>

                     </BeginStoryboard>

                   </EventTrigger.Actions>

                 </EventTrigger>

                </Style.Triggers>

              </Style>

           </Button.Style>

       </Button>

</StackPanel>

Output