In WPF, as with many other technologies, there is often more than one way of achieving a particular result. Specific to WPF, there’s one mindset that says that it’s better to use the declarative approach of XAML rather than the imperative approach of code behind.  I’m not going to get into that argument today but with that in mind, I thought I’d look at how you can use an EventTrigger in markup, rather than an event handler in code.

It will be a simple example, really designed only to show the steps.  How you extend these into a real world use is up to you.  This demonstration project uses a TextBox element and animates the background color of the text box when the mouse wheel is rotated. 

The Window looks like this:

When the user uses the mouse wheel, an animation kicks in to change the background color of the text box.  Here’s a screen capture depicting the color at about the halfway point of the animation:

  The visual effect isn’t that important.  What we’re interested in here are the mechanics of creating and using an EventTrigger.  So. let’s look at the markup that does the work.  Firstly, here’s the complete XAML used:

I’ll break this up into chunks and look at each of them in turn, but as an overview what we have here is :

• A WPF Window
• A Style, that’s applied to the textbox
• A Style Triggers collection that contains a single trigger
• An animation that changes the background color of the textbox.

The WPF Window
This is a standard WPF Window.  The UI includes a Grid that contains a textbox.  There’s a Window.Resources collection that contains the style used for the textbox.

The TextBoxWheelStyle
Everything we’re interested in with this demo is contained inside the Style.  I’ve created a simple keyed style that targets textbox.  This assigns values to the Background and Foreground properties.

    6     <Style x:Key="TextBoxWheelStyle" TargetType="TextBox">

    7       <Setter Property="Background" Value="Navy" />

    8       <Setter Property="Foreground" Value="White" />

Style Trigger
The EventTrigger waits for its designated event to fire.  In this case, that event will be a movement of the mouse wheel.  Whenever the application is notified that this routed event is occurring, this notification is passed to the EventTrigger, so that it can react in whatever way you’ve set up.  In this example, the reaction is to run a ColorAnimation that changes the background color.

10         <Style.Triggers>

   11         <EventTrigger RoutedEvent="MouseWheel">

   12           <BeginStoryboard>

   13             <Storyboard >

   14               <ColorAnimation Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)"

   15                               From="Navy" To="White"

   16                               Duration="0:0:0.4"

   17                               AutoReverse="True"/>

   18             </Storyboard>

   19           </BeginStoryboard>

   20         </EventTrigger>

   21       </Style.Triggers>

ColorAnimation
I hand coded this animation, because it’s a fairly basic one.  If your needs are more complex, it’s far easier to use Expression Blend to build the animation.  Key parts of this markup are:

• <BeginStoryboard>  - easily forgotten if you’re hand coding, but essential to include it.
• <TargetProperty> – The syntax can be quite tricky, as in this case.  It would be nice if you could use a simpler “TextBox.Background” type of approach, but unfortunately you have to include the type – SolidColorBrush – and its property (Color).
• AutoReverse – in this case, the scenario is one where you are giving the user an indication that something is happening temporarily (i.e. not making a permanent change to the color) .  In that case, it’s necessary to reset the color back to the default style of Navy at the end of the animation.

Summary
As I said at the start, this isn’t meant to be an earth shattering example of the technology, but if you wanted to know how to code a simple EventTrigger, I hope there’s enough information here to see you through.

Just to finish off, here’s a second example.  This time a border appears when the mouse wheel is used.  Of course, for the mouse wheel related example to be of real use, you’ll need to include markup or code that causes the textbox to scroll through its content while this animation is taking place, but I’ll leave that for a later blog, so as not to confuse the issue.