Silverlight & Blend Animation Design Series eight: Drag-and-drop (drag-drop) operation and drag-and-drop behavior (dragbehavior)

The implementation of drag-and-drop functionality is not provided in Silverlight itself, and the drag-and-drop functionality is accomplished with its event support (MouseLeftButtonDown, MouseLeftButtonUp, and MouseMove). In practice, we can encapsulate the drag-and-drop operation as a behavior through the behavior (Behavior) feature, which can achieve the effect of code reuse. In blend, the drag-and-drop behavior is provided directly under the Microsoft.Expression.Interactivity.Layout namespace of Microsoft.Expression.Interactions.dll.

Drag-and-drop operations in Silverlight are typically implemented using the coordinates of an event-driven dynamic anchored object, first to see how to implement drag-and-drop operations in Silverlight programmatically by code, such as the following code block:

private void Onmouseleftbuttondown (object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
MousePosition = E.getposition (null);
Ismousecaptured = true;
Element. CaptureMouse ();
Element. Cursor = Cursors.hand;
}

private void Onmouseleftbuttonup (object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
Ismousecaptured = false;
Element. Releasemousecapture ();
mouseposition.x = MOUSEPOSITION.Y = 0;
Element. Cursor = null;
}

private void OnMouseMove (object sender, MouseEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (ismousecaptured)
{
Double Y = e.getposition (null). Y-MOUSEPOSITION.Y;
Double X = e.getposition (null). x-mouseposition.x;

x = x + (double) element. GetValue (Canvas.leftproperty);
y = y + (double) element. GetValue (Canvas.topproperty);

Element. SetValue (Canvas.leftproperty, X);
Element. SetValue (Canvas.topproperty, Y);

MousePosition = E.getposition (null);
}
}

As defined in the three methods to implement the object drag-and-drop algorithm, the actual application only need to drag and drop moving objects to add MouseLeftButtonDown, MouseLeftButtonUp and MouseMove event processing on the line. The following example code:

Attachedelement.mouseleftbuttondown + = (s, e) = Onmouseleftbuttondown (S, e);
Attachedelement.mouseleftbuttonup + = (s, e) = Onmouseleftbuttonup (S, e);
Attachedelement.mousemove + = (s, e) = OnMouseMove (S, e);

As a general practice, we will encapsulate the implementation of the above related methods as a base class for reuse purposes, but it is not recommended to use the base class to encapsulate drag-and-drop behavior, because Silverlight has an attribute-behaviors dedicated to handling object behavior. The underlying framework for behavior is provided under the System.Windows.Interactivity namespace in Silverlight, and we can extend the behavior freely to achieve our own different needs. After you install blend, you can find the Microsoft.Expression.Interactivity.dll library in the installation directory, which provides some of the more commonly used centralized behavior extensions that open the assets panel in blend through Windows--assets. Select the behavioral asset to see the extended behavior provided in Silverlight 3, such as:

We can encapsulate the implementation of the object drag-and-drop function as a behavior to achieve code reuse, in blend through the "file"-"new" menu items to open the New Object dialog box.

　　　　　　　　

The behavior created by the Blend New Wizard provides a set of behavior templates, such as the following code block:

public class Behavior1:behavior<dependencyobject>
{
Public Behavior1 ()
{
Insert the code required to create the object below this point.

//
The following line of code is used in the command
Establishes a relationship with the function to be called. If you choose
Use the commented out version of MyFunction and mycommand instead of creating your own implementation,
Uncomment the following line and add a reference to Microsoft.Expression.Interactions.
//
The documentation will give you an example of a simple command implementation,
Instead of using Actioncommand and referencing the Interactions assembly, you can use the example.
//
This. mycommand = new Actioncommand (this. MyFunction);
}

protected override void Onattached ()
{
Base. Onattached ();

Insert the code that you want to run when you attach Behavior to an object.
}

protected override void Ondetaching ()
{
Base. Ondetaching ();

Insert code to run when Behavior is removed from the object.
}

/*
Public ICommand MyCommand
{
Get
Private set;
}

private void MyFunction ()
{
Insert code to run when Behavior is removed from the object.
}
*/
}

To implement a custom behavior by self-expanding this behavior template, The behavior in System.Windows.Interactivity provides the encapsulation of a behavior or command to an object that can be attached to another, and it is important to note that custom behavior defaults to inheritance behavior< Dependencyobject>, using the DependencyObject type of behavior is not accessible to object mouse events, if you want to access the mouse operation of the event, you can use the specific UI component type or directly using the UI element base class UIElement.

The following is an encapsulation of the behavior of the code that implements the drag-and-drop functionality of the object earlier in this article, complete with the following code:

<summary>
Behavior: Encapsulates behaviors and commands for easy attaching to objects.
DependencyObject: cannot implement access mouse action events
UIElement: Accessible mouse events
</summary>
public class Dragbehavior:behavior<uielement>
{
Private UIElement attachedelement;
Private UserControl parent;
private bool ismousecaptured;
Private point mouseposition;

protected override void Onattached ()
{
Attachedelement = this. Associatedobject;
Parent = Application.Current.RootVisual as UserControl;
Attachedelement.mouseleftbuttondown + = (s, e) = Onmouseleftbuttondown (S, e);
Attachedelement.mouseleftbuttonup + = (s, e) = Onmouseleftbuttonup (S, e);
Attachedelement.mousemove + = (s, e) = OnMouseMove (S, e);
}

private void OnMouseMove (object sender, MouseEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (ismousecaptured)
{
Double Y = e.getposition (null). Y-MOUSEPOSITION.Y;
Double X = e.getposition (null). x-mouseposition.x;

x = x + (double) element. GetValue (Canvas.leftproperty);
y = y + (double) element. GetValue (Canvas.topproperty);

Element. SetValue (Canvas.leftproperty, X);
Element. SetValue (Canvas.topproperty, Y);

MousePosition = E.getposition (null);
}
}

private void Onmouseleftbuttonup (object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
Ismousecaptured = false;
Element. Releasemousecapture ();
mouseposition.x = MOUSEPOSITION.Y = 0;
Element. Cursor = null;
}

private void Onmouseleftbuttondown (object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
MousePosition = E.getposition (null);
Ismousecaptured = true;
Element. CaptureMouse ();
Element. Cursor = Cursors.hand;
}

protected override void Ondetaching ()
{
Base. Ondetaching ();
}
}

By encapsulating the object's drag-and-drop functionality for reuse through behavioral characteristics, all of this is accomplished, and the test can compile the project through Ctrol+shift+b and then discover the drag-and-drop behavior of the above custom extensions through the assets panel.

　　　　　　　　

Using the behavior is very simple, open the resources panel in blend, select the behavior you want to use, drag and drop it on the object that you want to use the behavior (the interface object designed in blend). In fact, it also provides drag-and-drop behavior in blend: Mousedragelementbehavior, the direct use of this behavior and the implementation described in this article to achieve the same effect. The following are the XAML encodings that are generated for each of these two behaviors:

<usercontrol
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Xmlns:i= "Clr-namespace:system.windows.interactivity;assembly=system.windows.interactivity"
Xmlns:local= "Clr-namespace:dragbehavior"
Xmlns:il= "Clr-namespace:microsoft.expression.interactivity.layout;assembly=microsoft.expression.interactions"
X:class= "Dragbehavior.maincontrol"
Width= "height=" >
<canvas x:name= "LayoutRoot" background= "White" >
<rectangle fill= "#FFFF0000" "stroke=" #FF000000 "height=" "width=" "canvas.left="-"canvas.top=" >
<i:interaction. Behaviors>
<il:MouseDragElementBehavior/>
</i:interaction. Behaviors>
</Rectangle>
<ellipse fill= "#FF0000FF" "stroke=" #FF000000 "height=" "width=" [canvas.top=] "219" canvas.left= "397" >
<i:interaction. Behaviors>
<local:DragBehavior/>
</i:interaction. Behaviors>
</Ellipse>
</Canvas>
</UserControl>

Silverlight & Blend Animation Design Series eight: Drag-and-drop (Drag-drop) action and drag-and-drop behavior (dragbehavior)