Life would be so much simple if we don't care so much


Drag và Drop (kéo thả) trong Silverlight 2

Có rất nhiều câu hỏi quanh vấn đề drag và drop trong silverlight. Mình có thảm khảo trên 1 số blog, web về silverlight của nước ngoài. Đây là ví dụ đơn giản để thực hiện drag và drop 1 item chứa trong 1 canvas:

Mình sử dụng Canvas (MainCanvas) và object cần drag n drop là 1 Rectangle (rect):

<Canvas x:Name=”MainCanvas” Width=”950″ Height=”550″>

<Rectangle x:Name=”rect” Fill=”Blue” HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”50″ Height=”50″>

</Rectangle>

</Canvas>


Bạn có thể tạo 1 object mà bạn cần drag nó bằng chuột: Ta sẽ sử dụng 3 events của mouse như sau:

  • MouseLeftButtonDown
  • MouseMove
  • MouseLeftButtonUp

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

rect.MouseLeftButtonDown += new MouseButtonEventHandler(rect_MouseLeftButtonDown);

rect.MouseLeftButtonUp += new MouseButtonEventHandler(rect_MouseLeftButtonUp);

rect.MouseMove += new MouseEventHandler(rect_MouseMove);

}

Khởi tạo các biến cần thiết để kiểm tra dragging và lưu lại vị trí mouse:

public partial class MainPage : UserControl
{
        private bool _isRectMouseCapture = false;
        private Point clickPosition;
}

Biến _isRectMouseCapture chỉ là biến bool dùng để kiểm tra khi mouse capture tại object. Khi drag item, cần biết vị trí của object bắt đầu drag, đối tượng clickPosition chỉ nhằm tính toán khoảng cách giữa phần trên bên trái của object và vị trí chuột khi mouse đang nắm giữ object.

Trong sự kiện MouseLeftButtonDown, bạn cần capture mouse, lưu vị trí chuột:

void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

// Flag kiem tra mouse capture tren rect

_isRectMouseCapture = true;

// Capture mouse

this.rect.CaptureMouse();

clickPosition = e.GetPosition(rect);

}


Khi mousedown vào object, bật biến _isRectMouseCapture thành true. Gọi phương thức CaptureMouse() để giữ chuột nằm trong vị trí giới hạn bởi object (rect). Sau đó, sử dụng phương thức GetPosition(..) của MouseButtonEventArgs  e để lấy tọa độ mouse liên kết với object (rect).

Trong sự kiện Mousemove, để move object, ta làm như sau

void rect_MouseMove(object sender, MouseEventArgs e)

{

if (_isRectMouseCapture)

{

// Lay vi tri moi cua mouse

Point newPosition = e.GetPosition(MainCanvas);

// Thiet lap value moi: Canvas.left va Canvas.top cho rect

rect.SetValue(Canvas.LeftProperty, newPosition.X – clickPosition.X);

rect.SetValue(Canvas.TopProperty, newPosition.Y – clickPosition.Y);

}

}

Nếu mouse capture tại object, lấy vị trị mới của mouse dùng phương thức GetPosition(…) của MouseEventArgs e, và tính toán thiết lập giá trị mới cho Canvas.LeftCanvas.Top của object rect đối với MainCanvas.

Trường hợp object không chứa trong 1 Canvas thì bạn có thể dùng TranslateTransform.

Trong sự kiện MouseLeftButtonUp, ta release mouse capture trên object và gán _isRectMouseCapture thành false:

void rect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

if (_isRectMouseCapture)

{

_isRectMouseCapture = false;

this.rect.ReleaseMouseCapture();

}

}

Tham khảo :http://www.85turns.com/2008/08/13/drag-and-drop-silverlight-example/

Advertisements

Comments on: "Drag và Drop (kéo thả) trong Silverlight 2" (2)

  1. Bạn ơi ! bài viết của bạn khá hay. Nhưng mình xin đính chính 1 chút, vấn đề Drag and Drop được giới thiệu từ Silverlight 4 nhe bạn.

    Tham Khảo ở đây nhé :
    http://phamnguyen.info/?p=439
    http://phamnguyen.info/?p=726

    • rubylight89 said:

      Uhm. cám ơn ý kiến của bạn. Lúc search thông tin về drag drop thì khi đó mình vẫn dùng sl 2 ^^ Hiện tại sl 4 đã hỗ trợ drag drop ok rồi 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: