WPF Body Behavior


Recently after looking at the Remix 09 videos that was held in Sydney, I learned about heaps of interesting new features in Silverlight 3. One of these is Behaviors. Behaviors are self-contained, reusable snippets of code that implements certain functionality, and can be attached to UI elements. Think of it as plug-in. It’s been created by the Expression Blend team, and lives in the Microsoft.Expression.Interactivity namespace. There are some nice samples available from the Expression Gallery, some of them are really cool. I took a particular interest in the BodyBehavior, which morphs a UI element into a physics-aware entity. It becomes a solid entity and can interact with other entities via collisions, bouncing and gravity, etc.

I took the BodyBehavior and whipped us a quick application. It’s a self-contained wall with these BodyBehavior-enabled shapes and you can drag and drop them, and see how they interact with one another. It’s relatively fun 🙂

Physics

There’s a lot of supporting code around the BodyBehavior class, which allows us to get the physics effect, and I’ve taken a long look at it. Unfortunately it’s going take even longer time for me to digest the code, it’s rather complex stuff there. By to create simple behaviors, all you need is to subclass the Behavior or Behavior<T> class and off you go. Anyways, to make use of the Bodybehavior, you write your Xaml like so.

xmlns:Custom="http://schemas.microsoft.com/expression/2009/interactivity"
xmlns:Expression_Samples_Physics_Behaviors="clr-namespace:Expression.Samples.Physics.Behaviors;assembly=Expression.Samples.Physics.Behaviors"
<Ellipse Width="30" Height="30" Style="{StaticResource ShapeStyle}">
 <Custom:Interaction.Behaviors>
   <Expression_Samples_Physics_Behaviors:BodyBehavior CanRotate="true" Restitution="0.5" />
   <Expression_Samples_Physics_Behaviors:MouseDragJoint/>
 </Custom:Interaction.Behaviors>
</Ellipse>
 

To create the walls, I just drew rectangles around the 4 sides, and set their BodyBehavior‘s IsStatic Property to True. That prevents the entity from moving and affected by gravity. The MouseDragJoint behavior allows us to drag the UI elements around the screen. You might also want to set a gravity behavior in the UI element that contains your Ellipse. In this case, I set that context around a Grid, and the Xaml looks like so.

<Grid>
 <Custom:Interaction.Behaviors>
   <Expression_Samples_Physics_Behaviors:PhysicsContextBehavior Gravity="20"/>
 </Custom:Interaction.Behaviors>
 <!--Ellipse here-->
</Grid>

This new Behavior feature comes with Blend 3 (at the time of this post, Blend 3 is at Preview phase), so you can download Blend 3 Preview for free. The Microsoft.Expression.Interactivity.dll is available in C:\Program Files\Microsoft Expression\Blend 3 Preview\Libraries\WPF folder after you installed it. Alternatively, you can look for it on the web.

One problem I had was a compilation error, which says that it cannot find “Microsoft.Expression.Interactivity.Layout” path. I’m not sure why this error occurs, but to resolve it, all you have to do is create an empty class and set it’s namespace to Microsoft.Expression.Interactivity.Layout.

Download this sample code here.

Here are some great resources. Enjoy!!

Overview of Behaviors

Zoom Magnification Behavior

Glass Effect  Behavior

Expression Gallery

Share this post:
Advertisements
Posted in WPF. Tags: . Leave a Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: