Behaviours in Blend 3

With all the great new features of Expression Blend 3 and Silverlight 3 comes behaviours. Behaviours allow you to take your Silverlight applications to the next level without having to get down and dirty with any coding at all. For example, behaviours  help you quickly and easily illustrate everyday interactions. By simply dragging and dropping  behaviours onto objects, you can perform tasks such as control animations, change states, and even allow your users to grab and drag objects in your application with the mouse.

Behaviours create endless possibilities for UX or UI designers. The ability to create rich interactive prototypes and appliacations without having to rely on developers to bring your interfaces to life.

Let’s take a look at a few.

Control Story Board

This behaviour allows you to stop and start animations. Once applied to an element you select the animation and when/how you want it to react.

First create an animation in your project. Then create a button. This will be the Start Animation button. In the past you would need to dive into Visual Studio (or now Blend 3) and wire up your story board to the button. Not anymore! Just click the assets tab (top left panel if you’re using the default “Design” workspace) and select Behaviours from the list (this can also be found in the assets library from your tool panel). You will then see it populated with a list of available behaviours.  Drag ControlStoryBoardAction from the assets tab to your button. Notice it is now nested under your button in the Object Tree to the left.

Select the behaviour from the tree and in the properties panel displays some options to play with. The EventName should be already set to Click and ControlStoryboardOption should be Play. All you need to do is choose your animation from the drop down and compile your application . Hit the button, and watch your animation shine. No code! How easy is that?

Go to State Action

This action allows you to quickly change states in your application.

This is a seriously handy behaviour. Never again will you need VisualStateManager.GoToState(this, "YourStateName", true);  to control  state changes in your application. Whip up some states in your visual state manager, make some buttons to control the states, and then drag and drop the GoToStateAction from your assets tab onto them. Once again in your properties panel, set which state you would like the selected button to go to, and you’re done!

More Behaviours

So at this point you are probably thinking, wow that’s pretty cool but they can only do basic tasks. This is where behaviours get really cool. Anyone can code a behaviour as long as you have a bit of knowledge about Silverlight coding. This is great for designers who care more about the look and feel rather than writing lines. There is more and more cool behaviours coming out every day, from physics helpers from Andy Beaulieu to multi touch pinch and zoom gestures by Davide Zordan for the touch screen inclined.

Check out the Microsoft Community Expression Gallery  to see some great examples of what’s possible.
Thanks for reading!
 

About the Author

Alex Knight

Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs a Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:
AGKDesign.twitter | xamling.net

#1 Canvas Art on 1.27.2010 at 5:17 AM

This is a seriously handy behaviour. Never again will you need VisualStateManager.GoToState(this, "YourStateName", true); to control state changes in your application. Whip up some states in your visual state manager, make some buttons to control the states, and then drag and drop the GoToStateAction from your assets tab onto them. Once again in your properties panel, set which state you would like the selected button to go to, and you’re done!

Leave a Comment