With Expression Blend 3, we now have support for behaviors. Behaviors makes creating really interactive applications extremely easy by encapsulating some of the common interactions!
Allowing element to be dragged on a canvas is now just one click away!
1. Create a new WPF application (Using VS or Blend)
2. Add reference to Microsoft.Expression.Interactivity (C:\Program Files\Microsoft Expression\Blend 3 Preview\Libraries\WPF)
NOTE: I am sure that in future versions of Expression Blend, the behaviors will be included but for now you either have to create your own or download the sample behaviors from http://gallery.expression.microsoft.com (Their is a WPF & Silverlight version)
3. Add the DragBehaviour to your application
public class DragBehavior : Behavior<UIElement>
{
private bool isDragging = false;
private UIElement attachedElement;
private Window parent;
Point lastPosition;
TranslateTransform translatePosition;
protected override void OnAttached()
{
attachedElement = this.AssociatedObject;
parent = Application.Current.MainWindow;
attachedElement.MouseLeftButtonDown += new MouseButtonEventHandler(MouseIsDown);
attachedElement.MouseLeftButtonUp += new MouseButtonEventHandler(MouseIsUp);
attachedElement.MouseMove += new MouseEventHandler(MouseIsMoving);
}
void MouseIsMoving(object sender, MouseEventArgs e)
{
if (isDragging)
{
Point currentPosition = e.GetPosition(parent);
double dX = currentPosition.X - lastPosition.X;
double dY = currentPosition.Y - lastPosition.Y;
this.lastPosition = currentPosition;
Transform oldTransform = attachedElement.RenderTransform;
TransformGroup rt = new TransformGroup();
TranslateTransform newPos = new TranslateTransform();
newPos.X = dX;
newPos.Y = dY;
translatePosition = newPos;
if (oldTransform != null)
{
rt.Children.Add(oldTransform);
}
rt.Children.Add(newPos);
MatrixTransform mt = new MatrixTransform();
mt.Matrix = rt.Value;
attachedElement.RenderTransform = mt;
}
}
void MouseIsUp(object sender, MouseButtonEventArgs e)
{
isDragging = false;
attachedElement.ReleaseMouseCapture();
}
void MouseIsDown(object sender, MouseButtonEventArgs e)
{
isDragging = true;
lastPosition = e.GetPosition(parent);
attachedElement.CaptureMouse();
}
}
4. Open the project in Expression Blend 3 and expand the Assets Library.
Their should be a DragBehavior under the behaviors tab, Drag the DragBehavior onto the element (on the design surface) you want to be drag-able (Confusing sentence)
5. This should add the following to your XAML
<Rectangle Width="55" Height="55">
<e:Interaction.Behaviors>
<local:DragBehavior/>
</e:Interaction.Behaviors>
</Rectangle>
Caveat: The default namespace added by expression blend is wrong… I had to change it to the following
xmlns:e="clr-namespace:Microsoft.Expression.Interactivity;assembly=Microsoft.Expression.Interactivity"
And that is it… Run this application and you should be able to drag the rectangle on the canvas
The sample pack from Microsoft has the following behaviors
- DragBehavior
- RandomMovementBehavior
- TextBoxAutoSelectBehavior
For more information, watch session C22M - Creating Interactivity with Microsoft Expression Blend (By Peter Blois)
http://videos.visitmix.com/MIX09/C27M
UPDATE: Also read this article on the Expression Blend teams blog
If you found this useful or interesting, please 