Working with Behaviors

Working with Behaviors

Posted by Alex on March 5th, 2012

A behavior is simply an encapsulation of logic. It is something you attach to an element, and this “attachment” in turn causes the element to behavior differently, for instance, becomes interactive.Behaviors give designers more flexibility in designing interactive UIs without the need to write any code. When using Expression Blend, a designer no longer needs to wait for a developer to write code for things like drag&drop, or input validation functionality, etc. because Blend comes prepackaged with all sorts of built-in behaviors. Blend (Expression Blend 4) comes with the following groups of built-in behaviors:

1. Animation behaviors
2. Data behaviors
3. Navigation behaviors
4. Triggers
5. Visual state behaviors
6. Conditional behaviors.

A lot of these built-in behaviors do not require any additional work to function and are very simple to use. Some however, require additional work like creating and modifying conditions in the Properties panel, and this can be a requirement in cases where you’re using conditional behaviors to link an action to an event when a comparison evaluates to true.

Behaviors are located in the Assets panel under the Behaviors category. For instance the following behaviors are exposed in a Windows Phone project:

Let’s create a simple demo app that uses one of

the built-in behaviors.

• Start Expression Blend (Start –>All Programs–>Microsoft Expression–>Microsoft Expression Blend 4).
• Create a new project (File–>New Project, or from the Welcome screen, click New Project).
• On the New Project dialog box under Project Types, click to select WPF as the project type then select WPF Application.
• Under Name, give the project a name, for instance “MoveAround”
• Next choose a Location or go with the default, also select C# as the development language.
• Click OK to create the project.
• From the Tools panel, double click the Rectangle control to insert it onto the artboard.
• From the Tools panel, double click the TextBlock control to insert it onto the artboard.

                Note: You can style the two elements whichever way you like!

                   

• On the Assets panel, click Behaviors, then click and drag the MouseDragElementBehaviorto the rectangle control you just added above. Repeat the same step for the TextBlockcontrol.

Note: You can drag and drop the MouseDragElementBehavior on the two controls either directly on the artboard or by using the Object and Timeline panel.

Note: It’s important to point out that the MouseDragElementBehavior doesn’t work for controls that handle MouseClick events (for example: Button, Textbox, and ListBox controls etc.); however, you can still add this functionality by making that control a child of a control that can be dragged.

• On the Project menu, click Build Project.

 Note: You can also use keyboard shortcut Ctrl+Shift+B to build the project.

• On the Project menu, click Run Project or use keyboard shortcuts: F5, Ctrl+F5.
• On your running app, click and drag the elements around.

Conclusion

As you can see with just a few steps and without writing any code you’re able to drag elements in your app!  That’s it for now, and I hope someone will find this short tutorial helpful!