Triggers in WPF

WPF Triggers

Triggers define a list of setters that are executed if the specified condition is fulfilled. WPF knows three diferent types of triggers

• Property Triggers get active, when a property gets a specified value.
• Event Triggers get active, when a specified event is fired.
• Data Triggers get active, when a binding expression reaches a specified value.

<Style x:Key="styleWithTrigger" TargetType="Rectangle">

    <Setter Property="Fill" Value="LightGreen" />

    <Style.Triggers>

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

           <Setter Property="Fill" Value="Red" />

       </Trigger>

    </Style.Triggers>

</Style>

<Rectangle Style="{StaticResource styleWithTrigger}"></Rectangle>

DataTrigger  

<Window.Resources>

<Style TargetType="Button">

   <Style.Triggers>

       <DataTrigger  Binding="{Binding

                     RelativeSource={RelativeSource Self},

                     Path=Content}" Value="Click Me!">

           <DataTrigger.Setters>

               <Setter  Property="FontSize" Value="20" />

           </DataTrigger.Setters>

       </DataTrigger>

   </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

   <Button Content="Click Me!"

           Height="40" Width="150" Margin="5" />

</StackPanel>

Event Trigger

<Window.Resources>

<Style TargetType="Button">

<Style.Triggers>

   <EventTrigger RoutedEvent="MouseEnter">

       <EventTrigger.Actions>

           <BeginStoryboard>

               <Storyboard>

                   <DoubleAnimation

                       Duration="0:0:0.5"

                       Storyboard.TargetProperty="Width"

                       To="200"  />

               </Storyboard>

           </BeginStoryboard>

       </EventTrigger.Actions>

   </EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

<Button Content="Click Me!"

Height="40" Width="150" Margin="5" />

</StackPanel>

MultiTrigger

This is similar to Trigger but combines multiple conditions and all the condition must met to execute setter collection defined in multitrigger.

<Window.Resources>

<Style TargetType="Button">

   <Style.Triggers>

       <MultiTrigger>

           <MultiTrigger.Conditions>

               <Condition Property="IsDefault" Value="True" />

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

           </MultiTrigger.Conditions>

           <MultiTrigger.Setters>

               <Setter Property="FontSize" Value="20" />

               <Setter Property="FontWeight" Value="Bold" />

               <Setter Property="Foreground" Value="Red" />

           </MultiTrigger.Setters>

       </MultiTrigger>

   </Style.Triggers>

</Style>

</Window.Resources>

<StackPanel>

   <Button Content="Click Me!" IsDefault="True"

           Height="40" Width="150" Margin="5" />

</StackPanel>