Drag and drop between layouts
Last post 05-09-2008 7:23 PM by ivanatilca. 15 replies.
Sort Posts:
03-12-2008 6:35 AM
Drag and drop between layouts

Dear All

We're implementing a designer-style app where we would like to be able to drag a control (e.g. TextBlock) from a StackPanel (choice of controls) to a Grid (final layout).  Unfortunately, the WPF class DragDrop that allows general purpose dragging and dropping of one control onto another is absent from Silverlight 2.0. 

Has anybody done anything with dragging between layouts?  All of the examples we can find online seem to use a canvas.

Does anyone know if the final release of 2.0 will have the generalised drag drop support from WPF? 

Chris 

cjsmith

Joined on 03-12-2008
Posts 3
03-12-2008 11:44 PM
Re: Drag and drop between layouts
Hi Chris,

There are currently no plans to add the DragDrop class to Silverlight in the 2.0 time frame. It would however be possible to write code to achieve what you want to do, it would involve a bit of work however. In broad outline, the following is one approach you could take:

create the following:
  class DraggableControl : UserControl
  interface IDragDropTarget { OnControlDraggedInto(DraggableControl control, Point position); }
  class DragDropStackPanel : StackPanel, IDragDropTarget
  class DragDropGrid : Grid, IDragDropTarget


1. In DraggableControl.MouseLeftButtonDown call CaptureMouse.

2. In DraggableControl.MouseLeftButtonUp call ReleaseMouseCapture, determine if the mouse if over an IDragDropTarget by calling UIElement.HitTest on the root of the application using the current position of the mouse. If so, call OnControlDraggedInto on the IDragDropTarget, passing the control and the mouse position relative to the IDragDropTarget.

3. In both implementations of OnControlDraggedInto you will need to determine where in the Panel to insert the control. You can use LayoutInformation.GetLayoutSlot on the Panel's Children to determine where they are currently located (necessary for StackPanel) and you can use Grid.ColumnDefinitionsIdea.ActualWidth/Grid.RowDefinitionsIdea.ActualHeight to work it out for Grid.
Once you have determined where in the Panel to insert the DraggableControl, you will need to first remove the DraggableControl from its current Parent before adding it to the new one.

4. You can use DraggableControl to wrap any Control that you want to be able to drag and drop, so you probably want to expose DraggableControl.Child and use it to get/set UserControl.Content



This is only one approach that you could take. There are likely alternatives. For example, if you don't like the idea of having to subclass Grid and StackPanel you could use a static method to perform the calculations, switching based on the type of the target.


Let me know if this is helpful to you. If it is unclear let me know and I will try to explain in more detail.

Keith Mahoney
Silverlight SDET
Microsoft

Keith.Mahoney

Joined on 03-08-2008
Vancouver
Posts 43
03-13-2008 8:58 AM
Marked as Answer
Re: Drag and drop between layouts

Hi Keith

Thanks for such a detailed and useful reply.  I have had to shelve drag and drop for the time being in favour of a simper way of transfering controls from a list to a grid (click on the control you require in the list and then click on the cell in the grid to insert it) so that I can look at other things we need to do with Silverlight such as data transfer to and from the server.  However, I will be revisiting it soon and your reply will be invaluable.

Thanks once again

Chris

cjsmith

Joined on 03-12-2008
Posts 3
03-26-2008 10:54 AM
Re: Drag and drop between layouts

Keith.Mahoney:
Hi Chris,

There are currently no plans to add the DragDrop class to Silverlight in the 2.0 time frame. It would however be possible to write code to achieve what you want to do, it would involve a bit of work however. In broad outline, the following is one approach you could take:

create the following:
  class DraggableControl : UserControl
  interface IDragDropTarget { OnControlDraggedInto(DraggableControl control, Point position); }
  class DragDropStackPanel : StackPanel, IDragDropTarget
  class DragDropGrid : Grid, IDragDropTarget

This really looks complicated to me... Is there any simplier way to "simulate" drag and drop? I was thinking of something like cutting object from object tree and floating on canvas layer above page and then drops in object tree? Same think like we were doing for HTML... except that I don't have clue is it possible to float object/control over content?

 

rocktheroad

Joined on 03-23-2008
Posts 27
03-26-2008 1:34 PM
Re: Drag and drop between layouts

Yeah, you could do that. Two possible way come to mind:

You could use a Popup control, which is used to render content above all other content, no matter where it occurs in the tree (think tooltip).

You could keep a Canvas in the root container of your application, and have it as the top-most child. So anything in this canvas would render above all other content.

None of what I said in the above post is required to implement drag and drop - it was just one possible implementation.
Useful methods for implementing drag and drop are UIElement.CaptureMouse and UIElement.ReleaseMouseCapture.

Keith Mahoney
Silverlight SDET
Microsoft

Keith.Mahoney

Joined on 03-08-2008
Vancouver
Posts 43
04-03-2008 2:36 PM
Re: Drag and drop between layouts
Okay, I've also run into a similar situation. I have two stack panels and I need the ability to drag and drop user controls between back and forth between the two panels. I've attempted to follow some of the suggestions above, but I'm not getting very far. Any further advice/example that you can share?
ammonm

Joined on 02-12-2008
Posts 7
04-09-2008 8:03 PM
Re: Drag and drop between layouts

I have created an example application of how to drag and drop between panels. You can grab the Visual Studio solution here:
http://cid-1eb3f7fa80e5873a.skydrive.live.com/self.aspx/Public/DragDropApplication.zip

Let me know if this is helpful.

Keith Mahoney
Silverlight SDET
Microsoft

Keith.Mahoney

Joined on 03-08-2008
Vancouver
Posts 43
04-10-2008 1:09 PM
Re: Drag and drop between layouts
Wow! That is exactly what I was looking for! I haven't had time to look at the code yet, but the example does exactly what I need it to! Thanks a million!! Now time to dig through your code.....
ammonm

Joined on 02-12-2008
Posts 7
04-14-2008 8:09 AM
Re: Drag and drop between layouts

If I want to drag a row of a datagrid so that the row should be there in the datagrid but some other operation should happen.

So,Finally the DataGrid should allow Drag option but the row should not be removed.Is there any way to do it?

Thanks,

T Sudarshan Reddy.

deepty.302472

Joined on 03-11-2008
Posts 80
05-04-2008 6:09 PM
Re: Drag and drop between layouts

Keith.Mahoney:

I have created an example application of how to drag and drop between panels. You can grab the Visual Studio solution here:
http://cid-1eb3f7fa80e5873a.skydrive.live.com/self.aspx/Public/DragDropApplication.zip

Let me know if this is helpful.

Wow you really went the extra mile on that one. Perhaps you can post a example page because a lot of people may not realize what a great example this is if you only have the download files.

http://ADefwebserver.com

adefwebserver

Joined on 06-07-2003
Los Angeles, CA
Posts 49
05-07-2008 3:24 AM
Re: Drag and drop between layouts

That's really great & helpfull. Thanks Keith.

How can I do this same logic with ListBox? Any Idea?

My Problem is:

I want to drag some control in a ListBox. Is it possible & if possible then what modification I have to do?

Waiting for your reply....

 

 

Keith.Mahoney:

I have created an example application of how to drag and drop between panels. You can grab the Visual Studio solution here:
http://cid-1eb3f7fa80e5873a.skydrive.live.com/self.aspx/Public/DragDropApplication.zip

Let me know if this is helpful.

 
microsoft_kc

Joined on 03-27-2008
Posts 29
05-09-2008 6:20 AM
Re: Drag and drop between layouts

hi Keith,

thanks for the solution but i have one problem i want to implement for the use conrol .can we do that ?

Same functionality i just want user control to be dragable insted of Silverlight control.

-Priyanka

priyanka.poman

Joined on 02-21-2008
India
Posts 13
05-09-2008 6:52 AM
Re: Drag and drop between layouts

hi,

Its working for User control also still facing some small problems related to the mapping but can be managable

 -Priyanka

priyanka.poman

Joined on 02-21-2008
India
Posts 13
05-09-2008 8:16 AM
Re: Re: Drag and drop between layouts

one other problem with the .remove.  if there are text boxes on the canvas, they lose some properties if they ever had focus on the origonal canvas, i.e. the cursor disappears

geordiejenner

Joined on 02-28-2008
Posts 30
05-09-2008 8:26 AM
Re: Re: Drag and drop between layouts
I've noticed that too. I figured it was just a bug with Beta 1 and hoped it would be fixed by the next release....
ammonm

Joined on 02-12-2008
Posts 7
05-09-2008 7:23 PM
Re: Drag and drop between layouts

Hi keith!

I am working with the class of your application, the one that drags and drop, but i am having probems with a change i intend to do.. you see i want once the user drops the button in the stackpanel, the one that is already in there to return to his panel or stack panel, i uploaded the code in here... it works fine the first time, but the second it breaks....

http://cid-475056541d979e69.skydrive.live.com/self.aspx/DemosSilverlight/SilverlightApplication1.rar

can u help me please!

Thanks!

Ivana A. Tilca | Microsoft Student Partner | Channel 8 editor | Microsoft

http://ivanatilca.blogspot.com/ http://ivanatilca.com.ar

ivanatilca

Joined on 03-24-2008
Argentina
Posts 8