Introduction to Behaviors - Page 2 by
kirupa | 25 July 2009
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
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
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
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.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isnâ€™t busy writing about himself in 3rd person, he is practicing social distancingâ€¦even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.