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:

newprojectidialog

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:.

myButton

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:

twoAssemblies

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:

addingReference

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:

image

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:

behaviorsTabAssetLibrary

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:

applyingABehavior

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:

hyperlinkProperties

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:

changingToClickEvent

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 :)

28 Responses to “Using Behaviors : A Quick Walkthrough”

  1. Krilnon Says:

    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.

  2. Roland Tomczak Says:

    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

  3. kirupa Says:

    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 :)

  4. Roland Tomczak Says:

    Yes, thanks, I saw it a few hours after sending my post :)

    I’m starting playing with it ! :-)

  5. shaggygi Says:

    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

  6. Roland Tomczak Says:

    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.

  7. Blend 3 - User Experience Design Says:

    [...] Kirupa Chinnathambi – Using Behaviors : A Quick Walkthrough [...]

  8. G-Land Says:

    I like this article, I really enjoy read this, and thank you about this article. Have to help me about this. very nice :)

  9. Getting Started with Behaviors in Expression Blend 3 « vincenthome’s Tech Clips Says:

    [...] Getting Started with Behaviors in Expression Blend 3 March 25, 2009 — vincenthome   Step by  step walkthrough using Behaviors [...]

  10. mikekidder Says:

    Really cool stuff, so will the entire DLL that includes your behavior wind up in your XAP file?

  11. kirupa Says:

    mike – yes.

    :)

  12. WPF and Silverlight tips and tricks | WPF Dev Says:

    [...] Using Behaviors : A Quick Walkthrough [...]

  13. Jaime Rodriguez : MIX09 recap series part 1, favorite features and announcements Says:

    [...] Check out Kirupa’s walkthrough on behaviors. [...]

  14. MikeA Says:

    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!

  15. kirupa Says:

    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) :P

    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.

    :)

  16. MikeA Says:

    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.

  17. Attached Behavior « Elad’s WPF Blog Says:

    [...] Silverlight 3.0 there is a built in behaviors infrastructure, by using the Behaviors (andor Triggers) attached property which contains a collection of [...]

  18. kirupaBlog - If it isn’t broken, take it apart and fix it! » Blog Archive » Behaviors : Writing Your Own Triggers Says:

    [...] 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 [...]

  19. Simon Says:

    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.

  20. Coffee’s World » Behaviors and Blend Says:

    [...] a quick walkthrough from Kirupa, a comment and some links from Andy Beaulieu, and some commentary from Jose Fajardo about how you [...]

  21. Expression Blend 3のBehaviorサポート - SharpLab. Says:

    [...] 実際の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に同梱されてほしいですね。 [...]

  22. Mike Taulty's Blog : Expression Blend 3: More on Actions, Triggers, Behaviors Says:

    [...] A Quick Walkthrough [...]

  23. Coffee’s World » Behaviors day Says:

    [...] start here on Kirupa’s blog and click around there, he’s got a few good pieces on triggers and [...]

  24. Anders Says:

    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?

  25. Amanda Says:

    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

  26. jagoru Says:

    Не могу сказать, что мне не понравилось. Достаточно интересно и втолне интересно, но тем не менее есть кое какие добавления

  27. Coralclub Says:

    Очень много интересных мнений, но всё же давайте попробуем прийти к единому. Мне кажется, что автор молодец.

  28. Gorast Says:

    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

Leave a Reply