Written by Pham Nguyen

Drag And Drop in Silverlight 4.0

Silverlight 4.0 với rất nhiều tính năng mới và hôm nay mình xin giới thiệu một tính năng tiêu biểu trong Silverlight 4.0 đó là tính năng Drag and Drop .

Drag And Drop là một tính năng mang đến cho người dùng những trãi nghiệm mới thật thú vị…

Quay các thế hệ web trước nếu các bạn muốn Upload một file lên web (Vd: Video, Audio, Image …) thì các bạn phải làm qua nhiều tao tác như Browse đến thư mục chứa file, rồi sau đó chọn file rùi chọn Open … các bạn thấy rằng phải qua rất nhiều công đoạn để Upload một file lên Web.

Với tính năng Drag And Drop trong Silverlight 4.0 giúp các bạn không cần phải làm nhiều thao tác như trên để đưa một file lên Web. Bởi vì Silverlight 4.0 hổ trợ mạnh vấn đề tương tác với Window, do đó các bạn dể dàng Upload các file lên Web bằng cách “kéo thả” các file thì Window vào Web và như thế hệ thống sẽ tự làm các chuyện còn lại, bây giờ bạn chỉ còn Chờ file đã Upload finish.

Để thực hiện thao tác Drag And Drop các bạn phải khai báo thuộc tính AllowDrop thì control (Layout) của bạn mới thực thi được tính năng, các bạn xem đoạn Code sau :

   1: <UserControl x:Class="chapter7.DragnDropDemo"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

   7:

   8:     mc:Ignorable="d"

   9:     d:DesignHeight="300" d:DesignWidth="400">

  10: <Grid x:Name="LayoutRoot" Background="White">

  11:         <Grid.RowDefinitions>

  12:             <RowDefinition Height="110"/>

  13:             <RowDefinition Height="30"/>

  14:             <RowDefinition Height="*"/>

  15:         </Grid.RowDefinitions>

  16:

  17:         <Border Grid.Row="0" BorderThickness="3"

  18:             BorderBrush="DarkBlue" >

  19:             <Canvas x:Name="DropZoneCanvas"

  20:                 Background="Cyan" Height="104" AllowDrop="True"

  21:                 Drop="DropZoneCanvas_Drop"

  22:                 DragOver="DropZoneCanvas_DragOver"

  23:                 DragLeave="DropZoneCanvas_DragLeave" >

  24:                 <TextBlock HorizontalAlignment="Center"

  25:                     FontWeight="Bold" FontSize="14"

  26:                     Canvas.Top="40" Canvas.Left="30" >

  27:                     |Drop images here |</TextBlock>

  28:             </Canvas>

  29:         </Border>

  30:         <TextBlock Grid.Row="1" FontSize="12" Height="26" Margin="8">

  31:             Click on thumbnails for larger size</TextBlock>

  32:         <ScrollViewer Grid.Row="2" Height="450">

  33:             <toolkit:WrapPanel x:Name="ImageBox"

  34:                 Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto"/>

  35:         </ScrollViewer>

  36:     </Grid>

  37: </UserControl>

Ở đoạn Code trên khá rõ ràng, nếu các bạn muốn Control có khả năng Drad And Drop thì phải khai báo AllowDrop = “True”. Về mặt sự kiện thư viên  System.Windows.UIElement hổ trợ 4 loai sự kiện chính Lập Trình Viên như DragEnter, DragLeave, DragOver,Drop .

Tính Năng Của Các Sự Kiện :

DragEnter Sự Kiện này Hoạt động khi Drag đến một mục tiêu đặc trưng cụ thể.
DragLeave Sự Kiện này được kích hoạt khi Leave khỏi Control gốc
DragOver Sự Kiện này được kích hoạt khi trỏ vào Control
Drop Sự Kiện này được kích hoạt khi các bạn Drop những file từ Window vào

Lưu Ý :

  • Các sự kiên trên chỉ thực sự hoạt động khi các bạn khai báo thuộc tính AllowDrop = “True”,
  • Event args class: DragEventHandler => Event mới trong Silverlight 4.0.

Tạo vào xử lý sự kiện:

Về Cách tạo sự kiện ở đoạn Code trên cũng trình bày khá rõ , Đầu tiên bắt buộc ( nếu các bạn muốn Control có thể Drag And Drop) các bạn phải khai báo AllowDrop = “True” , và Sau đó thêm sự kiện trong Code XAML hay trong CodeBehind .

   1: <Canvas x:Name="DropZoneCanvas"

   2:                 Background="Cyan" Height="104" AllowDrop="True"

   3:                 Drop="DropZoneCanvas_Drop"

   4:                 DragOver="DropZoneCanvas_DragOver"

   5:                 DragLeave="DropZoneCanvas_DragLeave" >

   6:                 </Canvas>

Ngoài ra cá bạn có thể thêm và xử lý sự kiện trực tiếp trong Code Behind (tương tư như WPF) :

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;

namespace SilverlightApplication

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            DropZoneCanvas.DragEnter += new DragEventHandler(DropZoneCanvas_DragEnter);

            DropZoneCanvas.Drop += new DragEventHandler(DropZoneCanvas_Drop);

            DropZoneCanvas.DragLeave += new DragEventHandler(DropZoneCanvas_DragLeave);

            DropZoneCanvas.DragOver += new DragEventHandler(DropZoneCanvas_DragOver);

        }

        void DropZoneCanvas_DragOver(object sender, DragEventArgs e)

        {

            // Xu ly su kien DrapOver tai day   

        }

        void DropZoneCanvas_DragLeave(object sender, DragEventArgs e)

        {

            //Xu Ly su kien DragLeave tai day 

        }

        void DropZoneCanvas_DragEnter(object sender, DragEventArgs e)

        {

            //xu ly su kien DragInter tai day   

        }

        void DropZoneCanvas_Drop(object sender, DragEventArgs e)

        {

            //Xu Ly su kien Drop tai day 

        }

    }

}

Leave a comment