basically, a trigger enables you to change property values or take actions based on the value of a property. so, it basically allows you to dynamically change the appearance and/or behavior of your control without having to create a new one.

triggers are used to change the value of any given property, when certain conditions are satisfied. triggers are usually defined in a style or in the root of a document which are applied to that specific control. there are three types of triggers −

• property triggers
• data triggers
• event triggers

property triggers

in property triggers, when a change occurs in one property, it will bring either an immediate or an animated change in another property. for example, you can use a property trigger if you want to change the button appearance when the mouse is over the button.

example

the following example demonstrates how to change the foreground color of a button when the mouse enters its region.

<window x:class = "xamlpropertytriggers.mainwindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   title = "mainwindow" height = "350" width = "604">
	
   <window.resources>
      <style x:key = "triggerstyle" targettype = "button">
         <setter property = "foreground" value = "blue" />
         <style.triggers>
            <trigger property = "ismouseover" value = "true">
               <setter property = "foreground" value = "green" />
            </trigger> 
         </style.triggers>
      </style>
   </window.resources>
	
   <grid>
      <button width = "100" height = "70" style = "{staticresource triggerstyle}" 
         content = "trigger"/>
   </grid>
	
</window>

when you compile and execute the above code, it will produce the following output −

when the mouse enters the region of button, the foreground color will change to green.

data triggers

a data trigger performs some action when the bound data satisfies some condition. let’s have a look at the following xaml code in which a checkbox and a text block are created with some properties. when the checkbox is checked, it will change the foreground color to red.

<window x:class = "xamldatatrigger.mainwindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   title = "data trigger" height = "350" width = "604">
	
   <stackpanel horizontalalignment = "center">
      <checkbox x:name = "redcolorcheckbox" content = "set red as foreground color" margin = "20"/>
		
      <textblock name = "txtblock" verticalalignment = "center" 
         text = "event trigger" fontsize = "24" margin = "20">
         <textblock.style>
            <style>
               <style.triggers>
                  <datatrigger binding = "{binding elementname = redcolorcheckbox, path = ischecked}" 
                     value = "true">
                     <setter property = "textblock.foreground" value = "red"/>
                     <setter property = "textblock.cursor" value = "hand" />
                  </datatrigger>
               </style.triggers>
            </style>
         </textblock.style>
      </textblock>
   </stackpanel>
	
</window>		

when you compile and execute the above code, it will produce the following output −

when the checkbox is checked, the foreground color of the text block will change to red.

event triggers

an event trigger performs some action when a specific event is fired. it is usually used to accomplish some animation such doubleanimation, coloranimation, etc. the following code block creates a simple button. when the click event is fired, it will expand the width and height of the button.

<window x:class = "xamleventtrigger.mainwindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   title = "mainwindow" height = "350" width = "604">
	
   <grid>
      <button content = "click me" width = "60" height = "30">
         <button.triggers>
            <eventtrigger routedevent = "button.click">
               <eventtrigger.actions>
                  <beginstoryboard>
                     <storyboard>
                     
                        <doubleanimationusingkeyframes storyboard.targetproperty = "width" duration = "0:0:4">
                           <lineardoublekeyframe value = "60" keytime = "0:0:0"/>
                           <lineardoublekeyframe value = "120" keytime = "0:0:1"/>
                           <lineardoublekeyframe value = "200" keytime = "0:0:2"/>
                           <lineardoublekeyframe value = "300" keytime = "0:0:3"/>
                        </doubleanimationusingkeyframes>
							
                        <doubleanimationusingkeyframes storyboard.targetproperty = "height" duration = "0:0:4">
                           <lineardoublekeyframe value = "30" keytime = "0:0:0"/>
                           <lineardoublekeyframe value = "40" keytime = "0:0:1"/>
                           <lineardoublekeyframe value = "80" keytime = "0:0:2"/>
                           <lineardoublekeyframe value = "150" keytime = "0:0:3"/>
                        </doubleanimationusingkeyframes>
							
                     </storyboard>
                  </beginstoryboard>
               </eventtrigger.actions>
            </eventtrigger>
         </button.triggers>
      </button>
   </grid>
</window>

when you compile and execute the above code, it will produce the following output −

now, click on the button and you will observe that it will start expanding in both dimensions.