Reader Level:
ARTICLE

Working With WPF Trigger or Triggers in WPF

Posted by Kailash Chandra Behera Articles | WPF August 21, 2013
This article introduces and illustrates the use of Triggers in WPF.
  • 1
  • 0
  • 11686

Introduction

This article introduces and illustrates the use of Triggers in WPF. This article covers the following topics:

  1. What's Triggers in WPF?

  2. Why use Triggers?

  3. How many types of of triggers are in WPF?

  4. Examples of all the Triggers in WPF

What is Trigger

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 do use Trigger?

Triggers are used in styles to perform actions on a change of any property value or 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 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, that 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".

Data Trigger

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.

For example, you could set a DataTrigger on "{Binding Value}" or "{Binding ElementName=MyTextBox, Path=IsChecked}". You can even use Converters with DataTriggers, such as:

<DataTrigger
Binding="{Binding SomeInt, Converter={StaticResource IsGreaterThanZero}}"
Value="True">

MultiTrigger

A MultiTrigger is used to set an action on multiple property changes. It will execute when all conditions are satisfied.

For example, suppose we want to change the background color of a TextBox on mouse move, focus and lost focus, for that you can use a MultiTrigger.
 

<Window x:Class

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MultiTRiggerDEmo" Height="300" Width="300" Loaded="Window_Loaded">

  <Window.Resources>

    <Style x:Key="MultTrigg" TargetType="{x:Type TextBox}" ="">

      <Style.Triggers>

        <MultiTrigger>

          <MultiTrigger.Conditions>

            <Condition Property="IsFocused" Value="True">

              </Condition>

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

                </Condition>

              </MultiTrigger.Conditions>

          <MultiTrigger.Setters>

            <Setter Property="Background" Value="yellow" >

              </Setter>

            </MultiTrigger.Setters>

        </MultiTrigger>

      </Style.Triggers>

      </Style>

    </Window.Resources>

  <StackPanel>

    <TextBox Style="{StaticResource MultTrigg}"></TextBox>

  </StackPanel>

  </Window>

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.

Event Trigger

EventTrigger is used to trigger actions in response to events.

For example: suppose there is a need to fire a command on the click of button or on the select event of a Combobox and select a row of a grid view in WPF. You can then use an EventTrigger.

Code Example

In the illustration I have used an event trigger on the item selection of a list box.

<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>

Similarly you can use it in the button, combobox GridView and so on.

Summary

In this article we have discussed Triggers, the types of Triggers and their examples. If you have any query or if this solves your problem or it helped you then please comment.

COMMENT USING

Trending up