In a previous post about attached properties, we saw how we can change the background of an UI element by attaching an external property to that element. In this post, we’re going to do the same, but this time using the evolved version: Blend Behaviors.
This is the full code example to show an empty window that changes its background on mouse over and then back to original when the mouse is out of the window. There is no C# code (other then the default code behind that’s automatically generated for each view).
In order to use Blend Behaviors you have to install Blend for Visual Studio SDK for .NET. After that in your xaml file you have to add 2 extra namespaces to have access to the behaviors:
The available behaviors are listed in the Assets panel:
The easiest way to add the behavior is to just drag and drop it over the element that you want to apply it to and then to configure it using the Properties panel:
The nice thing about Blend Behaviors is that you can compose them. There are 2 parts to a behavior: triggers and actions. Here are some of the available triggers:
Let’s change the functionality of the app so when you press F5 then the background will change. For this we just need to change the trigger to a KeyTrigger and keep the same action as before:
We can even change the background using a TimerTrigger after 3000 milliseconds:
As you can see, these behaviors are quite flexible! Besides changing the triggers we can also change the actions. In order to keep this blog post as simple as possible without having to create new view models, commands and files I’ll use a CallMethodAction on the Window:
All this does is that after 3 seconds the window will close - not a very useful functionality, but it perfectly displays Blend Behavior flexibility.
Behaviors from scratch
Considering that you can compose behaviors by choosing from the available triggers and actions (which by the way also include the InvokeCommandAction) you should rarely need to create your own behavior.
However, if you do need to create your own behavior here’s an example on how to do it:
And here’s how to use it in xaml:
Normally you would just subscribe to the MouseEnter and MouseLeave events in the OnAttached method (and unsubscribe in the OnDetaching method), but that way the unsubscribe won’t happen until someone specifically calls Detach or removes the behavior from the parent collection. A better way to do it is to subscribe and unsubscribe to the MouseEnter and MouseLeave events in the Loaded and Unloaded events.
Less code, even more flexibility
A better implementation compared to the previous approach is to create a TriggerAction which will then allow us to hook up to existing triggers (like the EventTrigger with an event declared in xaml):
And the corresponding xaml:
You may have observed that in the previous C# code I have added a few attributes:
These are so if someone else uses the behaviors/actions you’ve written (usually the designer if he also does the UI in Microsoft Blend) then they have an easier time understanding how to use them.
Here’s how the tooltips look like in the Assets panel:
and in the properties panel:
Hopefully this post cleared up what these behaviors are and how to use them. As you saw, these are quite simple and flexible. It’s very easy to use them in Microsoft Blend: you just have to drag and drop behaviors on top of the controls you want to affect and then configure a few things in the Properties panel.