Silverlight utility tip series: 7. Create a drag-and-drop custom control and obtain the coordinates of the control after dragging. [download the instance source code]

After an element is added to the MouseDragElementBehavior dragged object in Silverlight, the element can be dragged. This behavior greatly facilitates the preparation of the programmer's UI experience. However, after we drag a UI element in a project, we often need to record the Coordinate Position of the element after the drag of the UI element to save it, this allows you to restore custom drag elements when they are opened next time. It is difficult to obtain the X and Y coordinates after the UI element is dragged. This article is obtained after the query of various materials and practices. By loading the DragFinished event of the MouseDragElementBehavior behavior object (this event is triggered after every drag of a pixel completes moving), in this event, we use X of the MouseDragElementBehavior object instance, Y attribute to obtain the specific position of the current UI element.

First, add a Silverlight custom control named Rec. xaml to the new project. Its XAML code is as follows:

    <Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="ti" Width="140" Height="140" RadiusX="5" RadiusY="5" Fill="Blue"></Rectangle>
<sdk:Label Height="28" HorizontalAlignment="Left" Name="label1" VerticalAlignment="Top" Width="120" />
</Grid>

Next, we introduce the System. Windows. Interactivity. dll and Microsoft. Expression. Interactions. dll files.

In the Rec. xaml. cs file, we need to introduce:
Using System. Windows. Interactivity;
Using Microsoft. Expression. Interactivity;
Using Microsoft. Expression. Interactivity. Layout;

At this time, we can use MouseDragElementBehavior and its related methods. The code for pasting Rec. xaml. cs is as follows:

Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Net;
Using System. Windows;
Using System. Windows. Controls;
Using System. Windows. Documents;
Using System. Windows. Input;
Using System. Windows. Media;
Using System. Windows. Media. Animation;
Using System. Windows. Shapes;
Using System. Windows. Interactivity;
Using Microsoft. Expression. Interactivity;
Using Microsoft. Expression. Interactivity. Layout;

Namespace SLMoveRecAndToolTip
{
Public partial class Rec: UserControl
{
Public Rec ()
{
InitializeComponent ();
}

MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior ();
Private bool isDrag;
/// <Summary>
/// Whether to allow dragging and right-clicking
/// </Summary>
Public bool IsDrag
{
Get {return isDrag ;}
Set
{
IsDrag = value;
If (isDrag = true)
{
DragBehavior. Attach (this); // Add this object to a behavior object that can be dragged by the mouse.
DragBehavior. DragFinished + = new MouseEventHandler (dragBehavior_DragFinished );
// Load a Processing Event After the object is successfully moved.
}
Else if (isDrag = false)
{
Try
{
// Set this control to cancel the mobile action and cancel the DragFinished event processing.
DragBehavior. Detach ();
DragBehavior. DragFinished-= new MouseEventHandler (dragBehavior_DragFinished );
}
Catch
{

}
}

}
}
/// <Summary>
/// Events triggered after being dragged
/// </Summary>
/// <Param name = "sender"> </param>
/// <Param name = "e"> </param>
Void dragBehavior_DragFinished (object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior = sender as MouseDragElementBehavior;
This. Tag = dragBehavior. X + "|" + dragBehavior. Y; // this. Tag is set to the corresponding value.
This. label1.Content = "X:" + dragBehavior. X + "--- Y:" + dragBehavior. Y;
// Set the coordinates of the current control to be displayed in label1 After dragging the mouse.
}
}
}

The relevant Code is interpreted in comments. Here I am not talking about it. In MainPage. xaml. cs, we only need to instantiate this object, and then set the IsDrag attribute of this object to true to drag the control. If the value is false, the custom control cannot be dragged.

The source code is as follows:

  Rec rect = new Rec();
            rect.HorizontalAlignment = HorizontalAlignment.Left;
            rect.VerticalAlignment = VerticalAlignment.Top;
            rect.IsDrag = true;
this.LayoutRoot.Children.Add(rect);

This example is developed using VS2010 + Silverlight 4.0. Click slmoverecandtooltip.rar to download the source code.