The Silverlight Focus Point

more options...

Product Spotlight

(1 votes)

Silverlight Drag, Drop, Import and Export

4 comments / posted by Michael Washington on Jul 21, 2008

Note: This article is submitted by Michael Washington for Silverlight Contest: Write and Win.Thanks a lot, Michael! Hello All, Please drop a comment if you like it.

The example is based on an earlier drag and drop code sample that was based on an example created by Keith Mahoney. In his example he shows how to drag and drop various types of elements into various types of Panels. In this example we only cover dragging and dropping an element onto a Canvas. We also cover importing and exporting content from one user control into another.

View Sample | Download Source Code

When you view the sample you see three movable windows (you grab the colored bar on the top of the window to drag it) with three boxes in the first window.

The "Drag Me" box can only be dragged inside the window, but the blank box and the "Drag Me Outside" box can be dragged anywhere on the screen.

To determine the different behavior of the boxes, the word "[draggable]" is added to the Tag property of the element that will be draggable outside the window. When an element with that Tag is detected, the element is removed from the Canvas it is currently on and placed on the root Canvas of the application while it is being dragged.

When the element is dropped a HitTest is performed to see if the mouse is currently in the bounds of a Canvas element that is in one of the windows. If it is in the bounds, the element is removed from the root Canvas and placed onto the Canvas that is in the respective window.

If the boxes are dragged inside another window, they will remain in the window and move with that window when that window is moved.

The window labeled "Drop Items Here" implements a "ImportContent" interface that allows content to be possibly imported and parsed rather than simply added to the window. When the blank box is dragged onto the window labeled "Drop Items Here", the box is simply added to the window.

However, when the box labeled "Drag Me Outside and Export Me" is dragged onto the window labeled "Drop Items Here", the TextBlocks in the box are parsed and their content is added to the TextBlock in the window.

The Code

The solution file contains a Silverlight project and a web project to display the Silverlight project output. The following describes the files in the SilverlightDragAndDrop project:

Page.xaml - This is the main control that is displayed by the web project. This control creates windows using the SilverlightWindowControl control and inserts the contents of the SilverlightCanvas controls. It also create handlers to handle the drag and drop of the elements and calls the ImportContent method if it exists on the panel an element is being dropped on.
SilverlightCanvas1.xaml - This control implements an ImportContent interface and a TextBox to display any imported content.
SilverlightCanvas2.xaml - This control simply contains a blank Canvas that elements can be placed on.
SilverlightObjects.xaml - This control contains three elements that can be dragged and dropped.
SilverlightWindowControl.xaml - This control is used by the Page.xaml control to create the windows the other controls are placed into.
Interfaces.cs - This contains an interface called ImportContent that the SilverlightCanvas1.xaml control implements to import content.

Creating the Windows

The Page.xaml control creates the three windows and a list of panels that elements can possibly be dragged onto. It will perform a HitTest to determine if an element is being dragged onto one of the panels.

public Page()
{
    InitializeComponent();
 
    // Window #1 - Contains objects
    SilverlightWindowControl objSilverlightWindowControl = new SilverlightWindowControl(50);
    // Pass an instance of this control to the child control. This will allow the child to 
    // wire-up mouse events to the parent. 
    SilverlightObjects SilverlightObjects = new SilverlightObjects(this);
    objSilverlightWindowControl.Window.Content = SilverlightObjects;
    Canvas.SetLeft(objSilverlightWindowControl, (double)50);
    Canvas.SetTop(objSilverlightWindowControl, (double)50);
 
    // SilverlightCanvas1 - Implements the "ImportContent" Interface
    SilverlightWindowControl objBlankSilverlightWindowControl1 = new SilverlightWindowControl(60);
    SilverlightCanvas1 objSilverlightCanvas1 = new SilverlightCanvas1();
    objBlankSilverlightWindowControl1.Window.Content = objSilverlightCanvas1;
    Canvas.SetLeft(objBlankSilverlightWindowControl1, (double)300);
    Canvas.SetTop(objBlankSilverlightWindowControl1, (double)50);
 
    // SilverlightCanvas2 - Does NOT implement the "ImportContent" Interface
    SilverlightWindowControl objBlankSilverlightWindowControl2 = new SilverlightWindowControl(60);
    SilverlightCanvas2 objSilverlightCanvas2 = new SilverlightCanvas2();
    objBlankSilverlightWindowControl2.Window.Content = objSilverlightCanvas2;
    Canvas.SetLeft(objBlankSilverlightWindowControl2, (double)300);
    Canvas.SetTop(objBlankSilverlightWindowControl2, (double)310);
 
    // Add Canvases to a collection that will be checked as possible drop points
    colPanels.Add(SilverlightObjects.LayoutRoot);
    colPanels.Add(objSilverlightCanvas1.LayoutRoot);
    colPanels.Add(objSilverlightCanvas2.LayoutRoot);
 
    // Add Windows to the Page
    this.LayoutRoot.Children.Add(objSilverlightWindowControl);
    this.LayoutRoot.Children.Add(objBlankSilverlightWindowControl1);
    this.LayoutRoot.Children.Add(objBlankSilverlightWindowControl2);
}

The SilverlightObjects.xaml control uses an instance of the parent control to wire-up the mouse events to detect when an element is being dragged.

   1: public SilverlightObjects(Page objPage)

   2: {

   3:     InitializeComponent();

4:

   5:     // Add delegates to the parent to allow it to handle the drag and drop

   6:     FrameworkElement objFrameworkElement1 = (FrameworkElement)this.DragElement1;

   7:     objFrameworkElement1.MouseLeftButtonDown +=

   8:         new MouseButtonEventHandler(objPage.objFrameworkElement_MouseLeftButtonDown);

   9:     FrameworkElement objFrameworkElement2 = (FrameworkElement)this.DragElement2;

  10:     objFrameworkElement2.MouseLeftButtonDown +=

  11:         new MouseButtonEventHandler(objPage.objFrameworkElement_MouseLeftButtonDown);

  12:     FrameworkElement objFrameworkElement3 = (FrameworkElement)this.DragElement3;

  13:     objFrameworkElement3.MouseLeftButtonDown +=

  14:         new MouseButtonEventHandler(objPage.objFrameworkElement_MouseLeftButtonDown);

  15: }

Note, the only way to get an instance of the parent control when a control has been dynamically added is to pass an instance of that parent to the control when the control is added. The mouse events must be attached to, and handled by, the parent not the child control for the communication between windows to work.

When the mouse starts to drag an element, the element is checked to see if it's tag contains "[draggable]". If it does, the element is removed from the Canvas it is on and placed on the main Canvas.

   1: void objFrameworkElement_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

   2: {

   3:     //Start Drag

   4:     FrameworkElement objFrameworkElement = (FrameworkElement)sender;

   5:     objFrameworkElement.CaptureMouse();

6:

   7:     // Set the starting point for the drag

   8:     StartingDragPoint = e.GetPosition(objFrameworkElement);

9:

  10:     // Remove the element from it's control and move it to the parent

  11:     // if it's Tag contains the words [draggable]

  12:     if (objFrameworkElement.Tag.ToString().Contains("[draggable]"))

  13:     {

  14:         Panel objParent = objFrameworkElement.Parent as Panel;

  15:         objParent.Children.Remove(objFrameworkElement);

16:

  17:         this.LayoutRoot.Children.Add(objFrameworkElement);

  18:         MoveToTop(objFrameworkElement);

  19:         UpdateElementPosition(objFrameworkElement, e.GetPosition(this.LayoutRoot));

  20:     }

21:

  22:     objFrameworkElement.MouseMove += new MouseEventHandler(objFrameworkElement_MouseMove);

  23:     objFrameworkElement.MouseLeftButtonUp += new MouseButtonEventHandler(objFrameworkElement_MouseLeftButtonUp);

  24: }

The code to move an element being dragged is the same whether or not the element has been moved to the main Canvas or not.

   1: #region MouseMove

   2: void objFrameworkElement_MouseMove(object sender, MouseEventArgs e)

   3: {

   4:     FrameworkElement objFrameworkElement = (FrameworkElement)sender;

   5:     Canvas objCanvas = (Canvas)objFrameworkElement.Parent;

   6:     Point Point = e.GetPosition(objCanvas);

7:

   8:     UpdateElementPosition(objFrameworkElement, Point);

   9: }

  10: #endregion

When an element is dropped, this code is used to determine if the element will simply be placed inside a control, or if the ImportContent method will be called:

#region MouseLeftButtonUp
void objFrameworkElement_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    //Stop Drag
    FrameworkElement objFrameworkElement = (FrameworkElement)sender;
    objFrameworkElement.ReleaseMouseCapture();
  
    objFrameworkElement.MouseMove -= 
        new MouseEventHandler(objFrameworkElement_MouseMove);
    objFrameworkElement.MouseLeftButtonUp -= 
        new MouseButtonEventHandler(objFrameworkElement_MouseLeftButtonUp);
  
    // If it is an element marked [draggable]
    // try to drop it on a panel stored in the colPanels collection
    if (objFrameworkElement.Tag.ToString().Contains("[draggable]"))
    {
        Point tmpPoint = e.GetPosition(null);
        // Build a list of elements at the current mouse position
        List hits = (List)this.HitTest(tmpPoint);
        // Loop through all the Panels in the colPanels collection
        foreach (Panel objPanel in colPanels)
        {
            if (hits.Contains(objPanel))
            {
                // Grab the position of the element being dragged in relation to it's position on the 
                // main canvas and its position in relation to the panel it may be dropped on
                Point mousePos1 = e.GetPosition(objPanel);
                Point mousePos2 = e.GetPosition(objFrameworkElement);
  
                // Remove the element from the main canvas
                this.LayoutRoot.Children.Remove(objFrameworkElement);
  
                // Import content
                // Get a reference to the parent of the current panel
                UserControl objUserControl = (UserControl)objPanel.Parent;
                // See if that parent implements an interface called "ImportContent"
                object objObject = objUserControl.GetType().GetInterface("ImportContent", true);
  
                // If the object is not null then the parent object has a method called "ImportContent"
                if (!(objObject == null))
                {
                    // Create a parmeters array
                    object[] parameters = new object[1];
                    // Add the elemnt that is being dragged to the array
                    parameters.SetValue(objFrameworkElement, 0);
                    // invoke the "ImportContent" on the parent object passing the parameters array that 
                    // contains the element being dragged
                    bool boolImport = (bool)objUserControl.GetType().InvokeMember("ImportContent", 
                        BindingFlags.InvokeMethod, null, objUserControl, parameters);
  
                    // If the import was not successful simply add the element to the panel
                    if (!boolImport)
                    {
                        // Add the element to the panel
                        objPanel.Children.Add(objFrameworkElement);
                        Canvas.SetLeft(objFrameworkElement, mousePos1.X - mousePos2.X);
                        Canvas.SetTop(objFrameworkElement, mousePos1.Y - mousePos2.Y);
                    }
                }
                else
                {
                    // The parent object does not implement the "ImportContent" Interface
                    // Add the element to the panel
                    objPanel.Children.Add(objFrameworkElement);
                    Canvas.SetLeft(objFrameworkElement, mousePos1.X - mousePos2.X);
                    Canvas.SetTop(objFrameworkElement, mousePos1.Y - mousePos2.Y);
                }
                break;
            }
        }
    }
}
#endregion

The ImportContent Method

Each control determines what content it will import. The control must implement an interface called ImportContent that accepts a FrameworkElement as a single parameter and returns a bool:

   1: interface ImportContent

   2: {

   3:     bool ImportContent(FrameworkElement objFrameworkElement);

   4: }

In this example the SilverlightCanvas1.xaml control is coded to only import text from any TextBlocks.

#region ImportContent
public bool ImportContent(FrameworkElement objFrameworkElement)
{
    // This import method will only import text content contained
    // in TextBlocks that are placed on a Canvas
  
    StringBuilder StringBuilder = new StringBuilder();
    Canvas objCanvas = objFrameworkElement as Canvas;
  
    // If the element being imported is not a canvas return false
    if (objCanvas == null)
    {
        return false;
    }
  
    try
    {
        // Loop through all the UIElements in the Canvas 
        foreach (UIElement objUIElement in objCanvas.Children)
        {
            // Try to cast the UIElement as a TextBlock
            TextBlock objTextBlock = objUIElement as TextBlock;
            if (objTextBlock != null)
            {
                // Add the contents of the TextBlock to the output
                StringBuilder.Append(String.Format(" {0}", objTextBlock.Text));
            }
        }
    }
    catch
    {
        return false;
    }
  
    // Was content in the output ?
    if (StringBuilder.Length > 0)
    {
        // Add output to the Textbox display
        this.txtContent.Text = StringBuilder.ToString();
        return true;
    }
    else
    {
        return false;
    }
} 
#endregion

Summary

This example demonstrates a method for dealing with the "unknown". With SilverlightDesktop, modules can be created by different developers that have no knowledge of each other, yet using a method such as this, content can be exported and imported between them.

Filed under: Learn , Tutorials , Misc

RE: Silverlight Drag, Drop, Import and Export

posted by hlt on Aug 10, 2008 21:08

Can you please show me an example using listbox as the source and target windows?
RE: Silverlight Drag, Drop, Import and Export

posted by RL on Sep 17, 2008 18:15

Is there a way to import usercontrol on to other user control using xaml on the client side. I see you are doing it on the server side.

This tutorial is awesome.

Thanks
RE: Silverlight Drag, Drop, Import and Export

posted by pawan ashish on Oct 17, 2008 03:39

i have downloaded the code but the code does not have a method implemented for HitTest. when i build the solution on my system it gives build error. So can you tell me why the error is coming or am i missing something
RE: Silverlight Drag, Drop, Import and Export

posted by pawan ashish on Oct 17, 2008 03:47

i have downloaded the code but the code does not have a method implemented for HitTest. when i build the solution on my system it gives build error. So can you tell me why the error is coming or am i missing something

Your name

Title

Message

Unless otherwise specified, all content is made available under the Creative Commons License

site design by studiografica

Silverlight Drag, Drop, Import and Export

The Code

Summary

Comments

RE: Silverlight Drag, Drop, Import and Export

RE: Silverlight Drag, Drop, Import and Export

RE: Silverlight Drag, Drop, Import and Export

RE: Silverlight Drag, Drop, Import and Export

Add Comment