== Triggers ==
=== Property Trigger ===

Example of a trigger that kicks in when MouseOver event occurs:
<code xml>
<Button Background="AliceBlue">
  <Button.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Button.Background" Value="Yellow" />
    </Trigger>
  </Button.Triggers>
</Button>
</code>
=== Event Trigger ===

''Button'' click triggers ''Border'' animation.  Basically, the button click event will trigger a named and defined action (here an animation). In turn, another control (here a Border) will use the action which gets triggered by button.

Here is the button definition:
<code xml>
<Button Name="btnsidePatient">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
                            Storyboard.TargetName="transPanelSlideRight"
                            Storyboard.TargetProperty="(TranslateTransform.X)" 
                            From="-200" To="0" Duration="0:0:0.5" AutoReverse="False"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
        
        <StackPanel>
            <Image Source="/images/icons/icon-patient.png" Height="30" />
            <TextBlock HorizontalAlignment="Center">Patient</TextBlock>
        </StackPanel>
    </Button>
</code>

Border (in Popup) that gets animated:
<code xml>
<!--Popup menu for Patient-->
<Popup x:Name="popmnuPatient" Placement="Mouse" AllowsTransparency="True" 
       PopupAnimation="Fade"  VerticalOffset="0" 
       MouseLeave="popmnu_MouseLeave">
   <Border CornerRadius="10" Margin="0,0,10,10"  BorderBrush="DarkGray" BorderThickness="2" Background="White">
      <Border.RenderTransform>
         <TranslateTransform x:Name="transPanelSlideRight" />
      </Border.RenderTransform>
      <Grid>
      ...
      </Grid>
   </Border>
</Popup>
</code>   

=== Data Trigger ===