KIRUPA.CHINNATHAMBI

Yesterday, at MIX09, we released a preview version of Expression Blend 3. Expression Blend 3 contains a lot of cool new features, and one new feature that I and a few other Blenders have been involved with is something known as Behaviors.

In this introductory post, I am not going to delve into great detail what behaviors are or how you can write them. Instead, I am going to introduce behaviors by taking a non-trivial example and comparing the workflow for completing a task without using behaviors as well as completing a task using behaviors.

Setting the Stage
After seeing all the demos of Deep Zoom in Silverlight, you realized that you wanted to create your own little Silverlight application that used the Deep Zoom technology to display some of your photos.

Since you are a regular reader of this blog (let’s pretend for a moment that such people exist!), you know enough about Deep Zoom to find your way around. You know that the MultiScaleImage control in Silverlight is what you use to create Deep Zoom content. You also know that you use Deep Zoom Composer to actually take your images and tile them up in the format Deep Zoom understands.

You put all of those pieces together by creating a new project in Blend, drawing out your MultiScaleImage control, and setting your MultiScaleImage control’s source to be the Deep Zoom content you had exported earlier. Pretty simple. When you preview your application, you will see your Deep Zoom content displayed in your browser:

So far so good. You then test your application by performing some common Deep Zoom gestures such as clicking, sliding, and rolling your mousewheel. After a few seconds, you realize that all of your clicking, sliding, and mousewheeling isn’t really doing anything to your Deep Zoom image. Nothing is happening! What is going on?

Here is what is going on. Out of the box, your MultiScaleImage control only provides you with the ability to view Deep Zoom content. Being able to interact with the view so that you can zoom and pan is something that you have to do on your own.

Adding the Deep Zoom Interactions the Hard Way
Let’s first look at the hard way of making your MultiScaleImage control support zooming and panning. You give your MultiScaleImage control a name, jump into the code behind file, and write the code that adds zooming, panning, and mousewheel support.

The code for doing all of that properly is around 600 lines. When I copied the code that we currently use in the Deep Zoom Composer project template to perform the common Deep Zoom interactions and pasted it into Microsoft Word, the pasted content spanned around 7 pages:

This is 7 pages of code you will need to write for something that would provide you with the minimum level of functionality. Unless you had access to someone who is good at writing such code, your ability to create a compelling Silverlight application using Deep Zoom will be limited. Sigh.

Adding the Deep Zoom Interactions the Easy (Fun!) Way
In the preceding paragraphs, I showed you how complex it is to add some simple interactivity to your MultiScaleImage control. With Expression Blend 3, this same task has the potential of being easier…much easier.

Just like before, let’s say you are starting off with a simple Silverlight web application that displays some Deep Zoom content. You want to add the ability to zoom and pan your content, but you certainly don’t want to write or copy and paste hundreds of lines of code.

Instead, you open or create this Deep Zoom project I’ve described in Expression Blend 3. Once your project has been opened, launch the Asset Library and click on the Behaviors tab:

You will see a collection of behaviors displayed. The behavior I want you to focus on is the one on the top-left called DeepZoomBehavior. Drag and drop that behavior onto your MultiScaleImage either via the artboard or the object tree:

Once you have dropped your DeepZoomBehavior onto your MultiScaleImage control, you will see your behavior happily attached to it:

All you have to do now is hit F5 to test your application. Just like before, your Deep Zoom content will display at its initial size. Unlike before, though, interacting with the content using your mouse will allow you to pan and zoom around.

Remember, in this approach, all of this was done without having to write any code.

Wrapping it Up – What just Happened?
What I described is an example of behaviors at work. A behavior is a little reusable piece of interactivity that you can attach to any element. Once an element has been attached with a behavior, the element’s functionality is largely under the behavior’s influence. If you are a Futurama fan, think of a behavior as a brain slug attached to a host element:

( image courtesy of The Infosphere )

In our example, I took the code that I would have normally written to interact with the MultiScaleImage control and placed it into a behavior. The amount of code needed to have my functionality exist is still on the order of 7 pages. What changed is the packaging and use of the code.

If you are not code-savvy, with behaviors, you no longer have to worry about copying and pasting code, fixing namespace names, making sure the proper assembly references exist, etc. All of that work is automatically handled by a behavior written by someone. As a user of behaviors, all you have to do is simply gain access to a library of them.

One good location to start is our recently launched Behaviors category on the Expression Gallery: I have provided a simple DLL (plus project and example) that contains all of the above behaviors you see above. Simply add a reference to the SilverlightBehaviors.dll in Expression Blend 3, and you are set.

Hopefully, this post gave you a good introduction to what is possible using behaviors. In subsequent posts, I will describe in more detail how to write and use behaviors, and I will also link to posts written by friends/colleagues who also worked on the behavior feature for Expression Blend 3.

Cheers!
Kirupa