Silverlight drag-n-drop behaviors and custom controls

Behaviors, Triggers, and Actions don’t seem to have the spotlight yet, which in my opinion I would rather work with these then wire up serveral mouse events in the XAML. Not only is it more intuitive, but cleaner and modular. I’m going to show you how easy it is to create a Behavior for custom controls in Silverlight. You don’t need to know how to make a custom control to create a Behavior, but if you had the experience of creating a custom control, you understand how and where to wire up the events.

I have multiple FrameworkElements in my custom control. So, I would need to wire up the events to the entire control. First create your custom control or you can use a simple FrameworkElement. Here is a great post on how to create a custom control. After you create the custom control. Create a new Silverlight Class Library for the behavior. Create a new class that extends Behavior<UIElement>.

public class DragInDropBehavior : Behavior<UIElement>

The next step in our DragInDropBehavior class is to attach and detach event handlers. Override these methods.

protected override void OnAttached()
{
base.OnAttached();
this.AssociatedObject.MouseLeftButtonDown += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
this.AssociatedObject.MouseLeftButtonUp += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
this.AssociatedObject.MouseMove += new MouseButtonEventHandler(AssociatedObject_MouseMove);
}
protected override void OnDetaching()
{
base.OnAttached();
this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
}

Notice the syntax is different for attaching and detaching events. Both will work. The syntax for attaching the events in the OnAttached() method is generated by Visual Studio and the methods are automatically generated. The AssociatedObject is the custom control, but you will see how this works later. Next we will implement the methods.

First create 2 private variables.

private Point mouseClickPosition;
private bool _isDragging;

The mouseClickPosition is the current position where the left mouse button was clicked.

void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (_isDragging)
{
this.AssociatedObject.ReleaseMouseCapture();
this._isDragging = false;
}
}

void AssociatedObject_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
this._isDragging = true;
this.mouseClickPosition = e.GetPosition(this.AssociatedObject);
this.AssociatedObject.CaptureMouse();
}



void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
{
if (_isDragging)
{
Point point = e.GetPosition(null);
AssociatedObject.SetValue(Canvas.TopProperty, point.Y - this.mouseClickPosition.Y);
AssociatedObject.SetValue(Canvas.LeftProperty, point.X - this.mouseClickPosition.X);
{
}


Notice we passed in null in the GetPosition method. This will find the mouse’s position relative to the canvas.

Now all we need to do is add our custom control and behavior to the XAML. Make sure you update your references to the new SilverLight Class library containing the Behavior. Also, install the Expression Blend SDK and add a reference to the System.Windows.Interactivity assembly.

In the XAML, add this code and namespaces.
xmlns:i=”clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity”

xmlns:behavior=”clr-namespace:CustomBehaviors;assembly=CustomBehaviors”

xmlns:custom=”clr-namespace:CustomControl;assembly=CustomControl”

Now we can use our custom behavior and control.

<custom:MyControl x:Name="myControl">
<i:Interaction.Behaviors>
<behavior:DragInDropBehavior>
</behavior:DragInSnapBehavior>
</i:Interaction.Behaviors>
</custom:MyControl>


As you can see the AssociateObject is the custom:MyControl. If there is a tight coupling between the action and the behavior, use behaviors. Otherwise, use Triggers and Actions.

Advertisement

~ by shirl9141 on January 16, 2010.