What are the different triggers in WPF?

A Trigger is typically used in a Style or ControlTemplate. It triggers on properties of whatever is being templated, and sets other properties of the control (or of specific template elements). For example, you would use a Trigger on IsMouseOver to respond to the mouse being over the control, and the setters might update a brush to show a "hot" effect.

Why use Triggers?

Triggers are used in styles to perform actions when a property value changes or when an event fires. Triggers create visual effects on controls. By using Triggers we can change the appearance of Framework Elements.

How many types of triggers are there in WPF?

There are five types of triggers supported by WPF; they are:

  1. Property Trigger
  2. Data Trigger
  3. MultiTrigger
  4. MultiDataTrigger
  5. Event Trigger

Property Trigger

The simplest form of a trigger is a property trigger; it watches for a dependency property to have a certain value. For example, if we wanted to light up a button in yellow as the user moves the mouse over it, we can do that by watching for the IsMouseOver property to have a value of "True".

Property Trigger Executes Collections of Setters, when UIElements property value changes.

To create a property trigger on any controls, you have to set trigger in style of the control.

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Opacity" Value="0.5" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

In the above code, Trigger is created on Button. It will set Opacity to 0.5 when the button's IsPressed property changes. You can set a trigger on any Dependency Property of the control. e.g.

 <Style x:Key="NormalStyle">
            <Setter Property="Control.FontSize" Value="20"></Setter>
            <Setter Property="Control.HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="Control.Margin" Value="10"></Setter>
            <Setter Property="Control.Foreground" Value="Black"></Setter>
            <Style.Triggers>
                <Trigger Property="Control.IsMouseOver" Value="true">
                    <Setter Property="Control.FontStyle" Value="Italic"></Setter>
                    <Setter Property="Control.Foreground" Value="Red"></Setter>
                    <Setter Property="Control.Background" Value="Yellow"></Setter>
                </Trigger>
                <Trigger Property="Button.IsPressed" Value="true">
                    <Setter Property="Control.Foreground" Value="Green"></Setter>
                    <Setter Property="Control.Background" Value="Blue"></Setter>
                </Trigger>              
            </Style.Triggers>
        </Style>

MultiTrigger

MultiTrigger is used to set an action on Multiple Property change. It will execute when all conditions are satisfied within MulitTrigger.Condition.

<Style x:Key="MulitTriggerButtonStyle" TargetType="Button">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsPressed" Value="True" />
                <Condition Property="Background" Value="BlanchedAlmond" />
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter Property="Foreground" Value="Blue" />
                <Setter Property="BorderThickness" Value="5" />
                <Setter Property="BorderBrush" Value="Blue" />
            </MultiTrigger.Setters>
        </MultiTrigger>
    </Style.Triggers>
</Style>

Event Trigger

Event Trigger is used to perform an action when RoutedEvent of FrameworkElement is raised.Event Trigger is generally used to perform some animation on a control (like colorAnimation, doubleAnumation using KeyFrame, etc.)  

Let's first understand Storyboard and Animation.

Animations:  

An animation can provide user interface more attractive with look and feel. We can also create visual effects on the control, Animation can be any type like:

 change background color of the control  rotate screen in 90 degree angle  move object from one location to another  Change Opacity (FadeIn/FadeOut) of the circle. 

Animation is used with Property of the UIElement. WPF provides different types of animation used with properties, like: 

ColorAnimation : used to animate/change the color property (SolidColorBrush, LinearGradientBrush) of the UIElement over specific Duration. It has two properties :

From(source) and To(target) 

<Border Name="border1" Width="100" Height="30"
    BorderBrush="Black" BorderThickness="1">
    <Border.Background>
        <SolidColorBrush x:Name="MyBorder" Color="LightBlue" />
    </Border.Background>
    <Border.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <BeginStoryboard>
               <Storyboard>
                <ColorAnimation Duration="0:0:1"
                    Storyboard.TargetName="MyBorder"
                    Storyboard.TargetProperty="Color" To="Gray" />
               </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Border.Triggers>
 </Border>

Example 2:

<TextBlock Visibility="Collapsed" Style="{StaticResource CDCStandardTextBlockStyle}" Name="TxtBlockTerminatingHeading" Text="{Binding NotifyOnTargetUpdated=True}" Foreground="Red" TextWrapping="Wrap" Margin="10,10,10,0">
 <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Binding.TargetUpdated">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard BeginTime="00:00:00" RepeatBehavior="Forever" 
Storyboard.TargetName="TxtBlockTerminatingHeading" 
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
                                    <ColorAnimation From="Red" To="#f0f0f0" 
Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>

Example 3:

<ListBox Name="employeeListBox" ItemsSource="{Binding 
empList}" Grid.Row="0" SelectedItem="{Binding SelectedIndex}">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
          <i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding 
ElementName=employeeListBox, Path=SelectedValue}"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </ListBox>

DataTrigger

DataTriggers are Triggers that watch a bound value instead of a Dependency Property. They allow you to watch a bound expression, and will react when that binding evaluates equal to your value. As the name suggests, DataTrigger applies property value to perform action on Data that Binding to the UIElement. DataTrigger allows to set property value when Binding Data matches specified condition. For example:

<DataTemplate>
    <Grid Margin="0 5 0 0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Image x:Name="viewImage"
            Grid.Row="0" Width="100"             
            Height="60" HorizontalAlignment="Center"            
            Source="{Binding Picture}" Stretch="Fill" />            
        <TextBlock x:Name="viewText"
            Grid.Row="1" Margin="0 5 0 0"            
            HorizontalAlignment="Center"
            FontWeight="Black" Foreground="Green"            
            Text="{Binding Title}" />
    </Grid>
    <DataTemplate.Triggers>
       <DataTrigger Binding="{Binding Path=Picture}" Value="{x:Null}">
        <Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png" />
        <Setter TargetName="viewText" Property="Text" Value="No Image Available" />
        <Setter TargetName="viewText" Property="Foreground" Value="Red" />
       </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>
<Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=textBox1, Path=Text.Length}" 
Value="0">
                    <Setter Property="IsEnabled" Value="False"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>

MultiDataTrigger

MultiTrigger and MultiDataTrigger are the same, except they allow you to specify multiple conditions (properties or bindings respectively) and take effect only when all conditions are satisfied.

<DataTemplate.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding Path=Picture}" Value="{x:Null}" />
            <Condition Binding="{Binding Path=Title}" Value="Waterfall" />
        </MultiDataTrigger.Conditions>
        <MultiDataTrigger.Setters>
           <Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png"/>
           <Setter TargetName="viewImage" Property="Opacity" Value="0.5" />
           <Setter TargetName="viewText" Property="Background" Value="Brown" />
        </MultiDataTrigger.Setters>
    </MultiDataTrigger>
</DataTemplate.Triggers>

A Trigger is typically used in a Style or ControlTemplate. It triggers on properties of the thing being templated, and sets other properties of the control (or of specific template elements). For example, you would use a Trigger on IsMouseOver to respond to the mouse being over the control, and the setters might update a brush to show a "hot" effect.

A DataTrigger triggers on a data binding rather than on a control property. It is typically used in a DataTemplate. For example, you could use a DataTrigger to change the colour of an element in the DataTemplate if the AlertLevel property was equal to ZomgWereAllGoingToDie. DataTriggers can also be useful in control templates if you want to trigger on a "converted" control property (i.e. use an IValueConverter in the trigger test). For example, you could use a DataTrigger to turn a TextBox's Foreground red if the Text property, considered as a number, was negative, by using a DataTrigger with a suitable IValueConverter and a RelativeSource of Self or TemplatedParent.

MultiTrigger and MultiDataTrigger are the same, except they allow you to specify multiple conditions (properties or bindings respectively) and take effect only when all conditions are satisfied.

Finally, EventTrigger is used to trigger actions in response to events (as opposed to changing one piece of state in response to another piece of state). For example, you could use an EventTrigger to respond to the MouseEnter event. EventTriggers are typically used to execute storyboards, for example to perform an animation when the event occurs.

Tags:

.Net

Triggers

Wpf

Recent Posts