Using Behaviors : A Quick Walkthrough
March 19th, 2009 | 28 Comments
In my previous post, I provided a brief introduction to Behaviors and how they can be used to simplify tasks that were once complicated. My post was deliberately vague on details, so this post will start a series of posts on using behaviors as well as writing your own behaviors. Let’s first look at using behaviors from the point of view of a casual user.
1. Download and Install Expression Blend 3 Preview
First, if you haven’t done so already, download and install Expression Blend 3 Preview. The download takes a bit of time, but the installation should be a breeze.
2. Create a new Silverlight 3 Project
Once you have Expression Blend 3 installed, launch it and create a new Silverlight 3 Application + Web Site via the New Project dialog:
Give your project a descriptive name if you want, but it is certainly not mandatory!
3. Draw out a Button
With your project created, draw out a small button and give it the text “Click Me:.
You can change your button’s text by selecting it and modifying the Content property in the Properties Inspector.
4. Downloading Some Behaviors
You now have a simple app with a button that says Click Me. Too bad clicking on the button doesn’t do anything right now. Let’s change that. What you are going to do is download some sample behaviors I have already created.
Go to the following link and download the behaviors archive to your hard drive: http://gallery.expression.microsoft.com/SampleSLBehaviors
Once you have downloaded the archive, extract the files to a location you can easily access. There will be a SilverlightPreviewBehaviors folder with a References and Project Files folder. Inside your References folder, there will be two files – Microsoft.Expression.Interactivity.dll and SLPreviewBehaviors.dll:
5. Adding a Reference to Behaviors
Now that you have downloaded and extracted some behaviors, it’s time to get Blend to recognize it. Go back to your Blend project, find the Project pane, right-click on your References folder, and select the Add Reference menu item:
The Add Reference dialog will appear. Browse to the location of your earlier extracted Assembly folder and select the Microsoft.Expression.Interactivity.dll and SLPreviewBehaviors.dll. Once you have selected these DLLs, click Open to add references to these DLLs to your project.
You’ll know you have succeeded when your References folder in the Project contains the names of the two DLLs you added:
Note:
We have an easier way of doing this step, but I (or another Blender) will describe that at a later date.
6. Applying a Behavior
With the references added, Blend now is aware of what is contained inside the two DLLs. Launch your Asset Library and navigate to the Behaviors tab. You will see a list of behaviors that you can pick and choose from:
The behavior I want you to use is called HyperlinkAction. Drag and drop your HyperlinkAction from the Asset Library and drop it onto the button on your artboard:
Once you have dropped your behavior onto the element, you will notice that your behavior now has focus with properties of the behavior displayed in the Properties Inspector.
7. Modifying Behavior Properties
Right now, your properties inspector will be displaying all of the properties your HyperlinkAction exposes:
Because HyerlinkAction is the Action variant of a Behavior, the Properties Inspector displays the Trigger properties first followed by any custom properties this behavior exposes. I will explain what the “Action variant of a Behavior” actually means in the future.
The first category you will see is Trigger. A trigger determines what exactly will cause your behavior to fire. In our case, the trigger we are using is EventTrigger, and it will fire when the Loaded event is fired. We probably want this behavior to fire when someone actually Clicks on the button, so click on the EventName drop-down and select Click from the list:
Your behavior will now only trigger when the button is clicked because you changed your EventTrigger’s event to be Click.
The final thing you can change is the URL that we launch when you click. You can change the TargetURL property to something else other than the default value of http://www.live.com.
8. Running your App
The final (and probably the easiest!) step is actually running your app. Simply hit F5. Once your Silverlight application loads in your browser, click on the button you created and attached a behavior to. When you click on the button, the URL you specified earlier will launch. That’s it!
Conclusion
One of our goals with behaviors is to make it very easy for someone to find a behavior and use them in their project. The second goal is to be able to modify the properties of a behavior easily by reusing one’s existing knowledge of the properties inspector. Hopefully, as you can see, finding a behavior from our gallery and using them in a project should be pretty straightforward. At the very least, I hope it is easier than you wiring up the event handler and writing some code yourself 
Cheers!
Kirupa
March 19th, 2009 at 10:58 pm
These triggers really remind me of the map editor in Age of Empires (which is a good thing!). I was able to figure out how to use those when I was 8-or-so years old, so hopefully they will make things a lot easier for non-programmers.
It looks like there will be a fair amount of customizability in individual triggers, which is a relief, since I can imagine that everyone would want their effects to be pixel-perfect.
March 20th, 2009 at 10:49 am
Great news !!! The attached behavior pattern is very useful in WPF. Now, it seems to be perfectly integrated within Blend !
I’ve tried your Silverlight sample, but.. Is there already a way to use this with WPF ? I guess that we’d only need the equivalent of Microsoft.Expression.Interactivity.dll for WPF ?
Thanks,
Roland Tomczak
March 20th, 2009 at 4:37 pm
Kril – yep, triggers are entirely extensible. While I primarily only have examples using the EventTrigger, you can have triggers that work with collisions, time ticks, etc.
Roland – if you look in the Libraries folder of your Expression Blend 3 Preview folder in Program Files, you will see the equivalent WPF version of the DLL in a folder named WPF
March 20th, 2009 at 11:24 pm
Yes, thanks, I saw it a few hours after sending my post
I’m starting playing with it !
March 21st, 2009 at 3:03 pm
I added the Microsoft.Expression.Interactivity.dll ( Under WPF directory ) to my Blend project and do not see the behaviours in control box. Am I doing something wrong? Thanks
March 22nd, 2009 at 1:40 am
There’re not default behaviors included in this DLL. It just defines the base classes to create your own. But you could recompile the sample ones, given by Kirupa. They works just fine.
Just one issue : You’ll have to define an empty class with “Microsoft.EXpression.Interactivity.Layout” as namespace.
March 24th, 2009 at 3:11 am
[...] Kirupa Chinnathambi – Using Behaviors : A Quick Walkthrough [...]
March 24th, 2009 at 10:45 am
I like this article, I really enjoy read this, and thank you about this article. Have to help me about this. very nice
March 25th, 2009 at 5:13 pm
[...] Getting Started with Behaviors in Expression Blend 3 March 25, 2009 — vincenthome Step by step walkthrough using Behaviors [...]
March 26th, 2009 at 10:49 am
Really cool stuff, so will the entire DLL that includes your behavior wind up in your XAP file?
March 26th, 2009 at 8:44 pm
mike – yes.
March 27th, 2009 at 4:30 pm
[...] Using Behaviors : A Quick Walkthrough [...]
March 30th, 2009 at 8:56 am
[...] Check out Kirupa’s walkthrough on behaviors. [...]
March 31st, 2009 at 6:59 am
Just curious if you work for Microsoft? If so, I will weight the information here more heavily…. Microsoft standard practice seems to be to scatter great info like this randomly across the web on individual team members blogs and leave us poor peons scambling to figure out what info is official and reliable and what is not.
Other than that, this is a great post. Thanks for taking the time to write it up!
March 31st, 2009 at 11:13 am
Mike – yes, I do work for Microsoft (http://blog.kirupa.com/?page_id=2). On the Expression Blend team actually. More specifically, on Behaviors (among a few other things)
I agree with you on how we scatter information without consolidating them in a proper location. There will be a more comprehensive resource for all of this in the near future as we more properly integrate behaviors as part of the Expression Blend UI and Help.
March 31st, 2009 at 12:59 pm
Thanks for your quick reply on your affiliation! Centralization would be appreciated…mostly because it helps me as a consumer of the data to judge it. When I see an msdn blog address I know what I’m getting is at least somewhat MS official info.
April 2nd, 2009 at 1:04 am
[...] Silverlight 3.0 there is a built in behaviors infrastructure, by using the Behaviors (andor Triggers) attached property which contains a collection of [...]
April 9th, 2009 at 10:30 pm
[...] my previous posts, I briefly discussed what behaviors are and how to use them. Let’s now talk about writing your own behaviors. Behaviors is a catch-all word that describes [...]
April 10th, 2009 at 4:12 am
Hi,
I played a little with Silverlight behaviors. One thing that is cruely missing is the possibility to bind behavior properties to it’s target DataContext properties.
I had the problem with a “NavigationButton”, where I would have liked to bind the NavigateUri and the TargetFrame properties from ViewModel / other ui elements.
April 20th, 2009 at 7:47 am
[...] a quick walkthrough from Kirupa, a comment and some links from Andy Beaulieu, and some commentary from Jose Fajardo about how you [...]
April 21st, 2009 at 12:39 am
[...] 実際のExpression Blendの操作については大西さんによるAkira Onishi’s weblog : Expression Blend 3: Behaviorを使ったコーディングレスでのSilverlight 3アプリのインタラクションデザインというエントリに詳しいのですが、一点補足しますと、Expression Blend 3 PreviewでBehaviorを使うに当たっては、Behaviorを定義したアセンブリを自分で参照に加える必要があります。kirupaBlog – If it isn’t broken, take it apart and fix it! » Blog Archive » Using Behaviors : A …というエントリにある通り、Sample Silverlight 3 Behaviors辺りから適切なのを探してMicrosoft.Expression.Interactivity.dllと、ビヘイビアのdllを参照に加えて下さい。そうしないと、[Asset Library]の[Behaviors]の項には何も表示されません。製品版ではMSお手製ビヘイビアのアセンブリもFCLに同梱されるか、Silverlight Extentionに同梱されてほしいですね。 [...]
May 8th, 2009 at 6:18 am
[...] A Quick Walkthrough [...]
May 11th, 2009 at 8:20 am
[...] start here on Kirupa’s blog and click around there, he’s got a few good pieces on triggers and [...]
May 25th, 2009 at 10:04 am
Hello,
Do you know how to create an action or a behavior to call a method in the ViewModel (which is the DataContext)? I’m trying to use the InvokeCommandAction with the MVVM pattern, but I’m not sure how to make it work, yet. Any ideas?
September 8th, 2009 at 1:18 pm
Can you update your instructions? I downloaded the behaviors you reference, and it says the DLL’s are in a References and Project Files folder, but they are not. They are in \Bin\Debug
September 26th, 2009 at 6:05 am
Не могу сказать, что мне не понравилось. Достаточно интересно и втолне интересно, но тем не менее есть кое какие добавления
October 7th, 2009 at 1:02 pm
Очень много интересных мнений, но всё же давайте попробуем прийти к единому. Мне кажется, что автор молодец.
November 4th, 2009 at 5:08 am
I dont understand why my SL3 dont look like yours?
After I drag the HyperlinkAction to my button the only things I get in Properties are Trigger and Common Properties.
And another thing. I was watching some video tutorials and I see that is very easy to add Trigger. I use SL3 and I dont even see Triggers and Interaction when I click my button in SL3. Is this changed from SL2? Something like AC2 and AC3 in Flash? Do I have to add Triggers only by code?
Thanks