[WPF Series]-Basic series Trigger, DataTrigger & EventTrigger

So far, we worked with the styles by setting a static value for a specific property. However, using triggers, you can change the value of a given property, once a certain condition changes. Triggers come in multiple Flavors:property Triggers, event Triggers and data Triggers. They allow you to does stuff that would normally are done with code-behind completely in markup instead, which are all a part of The ongoing process of separating style and code.

Property Trigger

The most common trigger are the property trigger, which in markup are simply defined with a <Trigger> element. It watches a specific property on the owner control and when that property has a value that matches the specified value, p Roperties can change. In theory the might sound a bit complicated, but it's actually quite simple once we turn theory to an example:

Download sample

<window x:class= "WpfTutorialSamples.Styles.StyleTriggersSample"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Title= "Styletriggerssample" height= "width=" >
<Grid>
<textblock text= "Hello, styled world!" fontsize= horizontalalignment= "center" verticalalignment= "Center" >
<TextBlock.Style>
<style targettype= "TextBlock" >
<setter property= "Foreground" value= "Blue" ></Setter>
<Style.Triggers>
<trigger property= "IsMouseOver" value= "True" >
<setter property= "Foreground" value= "Red"/>
<setter property= "textdecorations" value= "Underline"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Window>

In this style, we set the Foreground property to blue and to make it look like a hyperlink. We then add a trigger, which listens to theismouseover property-once This property changes to True, we Apply the setters:we change of the Foreground to red and then We make it underlined. This was a great example on how easy it was to use triggers to apply design changes, completely without any Code-behind code .

We define a local style for this specific TextBlock, but as shown in the previous articles, the style could has been glob Ally defined as well, if we wanted it to apply to all TextBlock controls in the application.

Data triggers

Data triggers, represented by the <DataTrigger> element, is used for properties that is not necessarily dependency Properties. They work was creating a binding to a regular property, which was then monitored for changes. This also opens up for the binding your trigger to a property on a different control. For instance, consider the following example:

Download sample

<window x:class= "WpfTutorialSamples.Styles.StyleDataTriggerSample"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Title= "Styledatatriggersample" height= "width=" >
<stackpanel horizontalalignment= "center" verticalalignment= "Center" >
<checkbox name= "Cbsample" content= "Hello, world?"/>
<textblock horizontalalignment= "Center" margin= "0,20,0,0" fontsize= ">"
<TextBlock.Style>
<style targettype= "TextBlock" >
<setter property= "Text" value= "No"/>
<setter property= "Foreground" value= "Red"/>
<Style.Triggers>
<datatrigger binding= "{Binding elementname=cbsample, path=ischecked}" value= "True" >
<setter property= "Text" value= "yes!"/>
<setter property= "Foreground" value= "Green"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Window>

In this example, we have a CheckBox and a TextBlock. Using a DataTrigger, we bind the TextBlock to the IsCheckedproperty of the CheckBox. We then supply a default style, where the text is ' No ' and the foreground color is red, and then, using a datatrigger, we Supply a style for when-the IsChecked property of the CheckBox are changed to True, in which case we do it green with a T Ext saying "yes!" (as seen on the screenshot).

Event triggers

Event triggers, represented by the <EventTrigger> element, is mostly used to trigger an animation, in response to a N event being called. We haven ' t discussed animations yet, but to demonstrate what an event trigger works, we'll use them anyway. There is a look at the chapter about animations for more details. Here ' s The example:

Download sample

<window x:class= "WpfTutorialSamples.Styles.StyleEventTriggerSample"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Title= "Styleeventtriggersample" height= "width=" >
<Grid>
<textblock name= "lblstyled" text= "Hello, styled world!" fontsize= horizontalalignment= "center" verticalalignment= "Center" >
<TextBlock.Style>
<style targettype= "TextBlock" >
<Style.Triggers>
<eventtrigger routedevent= "MouseEnter" >
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<doubleanimation duration= "0:0:0.300" storyboard.targetproperty= "FontSize" to= "/>"
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<eventtrigger routedevent= "MouseLeave" >
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<doubleanimation duration= "0:0:0.800" storyboard.targetproperty= "FontSize" to= "/>"
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Window>

The markup might look a bit overwhelming, but if you run this sample and look at the result, you'll see that we ' ve actuall Y accomplished a pretty cool animation, going both ways, in lines of XAML. As can see, I use a eventtrigger to subscribe to the events: MouseEnter and mouseleave. When the mouse enters, I make a smooth and animated transition to a FontSize of-pixels in milliseconds. When the mouse leaves, I-Change the FontSize-back-to-pixels but I do it a bit slower, just because it looks kind of coo L.

Summary

WPF Styles make it easy-to-get a consistent look, and with triggers, this look becomes dynamic. Styles is great in your application, but they ' re even better when used in control templates etc. You can read more about that elsewhere in this tutorial.

In the next article, we'll look at multi triggers, which allow us to apply styles based on multiple properties.

References from Trigger, DataTrigger & EventTrigger

[WPF Series]-Basic series Trigger, DataTrigger & EventTrigger