Silverlight 4 Nuevas Características – Drag & Drop

Una de las nuevas funcionalidades que nos traerá Silverlight 4 es la característica Drag & Drop. Hoy en día los usuarios entienden como algo natural las acciones de Drag & Drop. Ahora cualquier control que derive de UIElement viene con los eventos DragEnter, DragLeave, DragOver y Drop, ya no tenemos que crearnos nuestro manejador de drag & drop con los eventos MouseLeftButtonDown, MouseMove y MouseLeftButtonUp, lo cual era un engorro y nada elegante.

Una de las acciones mas clásicas que se pueden realizar en Silverlight con Drag & Drop es arrastrar una imagen de nuestro explorador de ficheros a un elemento de nuestra aplicación Web, es una acción mas natural que lo que teníamos que hacer antes. Vamos a ver con un ejemplo como se realizaría

A un objeto Canvas vamos a permitir realizar al usuario que arrastre un archivo de imagen y esta se visualice en el Canvas

 

   1:  <Canvas x:Name="DropCanvas" AllowDrop="True" Drop="DropCanvas_Drop" >

Con esto ya permitimos que se pueda realizar el Drop y tenemos el evento, solo nos falta tratarlo

   1:  private void DropCanvas_Drop(object sender, DragEventArgs e)
   2:  {
   3:      IDataObject dataObject = e.Data;
   4:      Point dropPoint = e.GetPosition(DropCanvas);
   5:      if (dataObject.GetDataPresent(DataFormats.FileDrop))
   6:      {
   7:          FileInfo[] files = (FileInfo[])dataObject.GetData(DataFormats.FileDrop);
   8:          
   9:          if (files.Length > 0)
  10:          {
  11:              if (files[0].Extension == ".jpg")
  12:              {
  13:                  
  14:                  System.Windows.Media.Imaging.BitmapImage bitmapImage = 
  15:                      new System.Windows.Media.Imaging.BitmapImage();
  16:                  bitmapImage.SetSource(files[0].OpenRead());
  17:                  Image newImage = new Image();
  18:                  newImage.Source = bitmapImage;
  19:                  newImage.Width = 200;
  20:                  newImage.Height = 200;
  21:   
  22:                  newImage.SetValue(Canvas.TopProperty, dropPoint.Y);
  23:                  newImage.SetValue(Canvas.LeftProperty, dropPoint.X);
  24:   
  25:                  newImage.Stretch = Stretch.Uniform;
  26:                  DropCanvas.Children.Add(newImage);
  27:              }
  28:          }
  29:      }
  30:  }
  31:   

 

Como podéis ver muy sencillo

2 comentarios en “Silverlight 4 Nuevas Características – Drag & Drop”

  1. Hola muy bueno este pequeño tutorial de silverlight, tengo una duda no se si me puedas ayudar con ella.

    Quiero crear una aplicacion que cree albunes de fotos para mi uso y me gustaria que tengo las propiedades de drag and drop para arrastrar imagenes y luego pueda ordenarlas y crear carpetas dentro de mi aplicacion…

    mi correo es shaka430@hotmail.com me gustaria que me ayudaras. muchas gracias de antemano.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *