Introduction to Behaviors - Page 2
       by kirupa  |  25 July 2009

In the previous page, you learned a little about the motivation for why we need to have easier ways of adding interactivity. In this page, let's look at how behaviors help with solving that problem.

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 and pasted that code it into Microsoft Word, the pasted content spanned around 7 pages:

[ that's a lot of code to write or copy/paste ]

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. This is where behaviors come in.

You may be going, while I don't have to write this code, I can easily copy and paste them from the internet. That is true, and that is significantly easier than writing the code yourself. Even though it is easier, there are still things that you need to do to make any involved code you paste work for a Silverlight or WPF application. At the very minimium, you need to add the hooks in XAML to bind the event to event handlers, adjust namespaces, and just do routing fiddling to make sure what you pasted fully works with your particular application.

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 the behaviors we introduced as part of 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 continue with the project I described earlier. Instead of fiddling with code, launch the Asset Library and click on the Behaviors tab:

[ a small list of behaviors that you can use ]

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:

[ to apply a behavior, drag and drop it onto an element ]

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

[ once your behavior is applied, it will be nested under the element you applied it to ]

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. Even the mouse wheel works.

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:

( 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. You simply had to drag and drop this behavior onto an element. Because behaviors are self-contained and really project agnostic, you don't have to do any of the post-copy maintainence work you would normally perform when copying and pasting code from an external source.

So, there you have it. To summarize, behaviors are nothing more than code snippets packaged in a way that makes them easilly reusable. This means that you can drag and drop them on any element, modify some properties, and in the end, have the behavior influence what the element does. To tie up the problem we started with, behaviors enable you to add interactivity without writing code.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2