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]

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.