Hi
I would like to implement a functionality that would allow me to drag an html element from the page (like image) over my silverlight container which includes a grid and change the mouse indicator to hint that it would be possible to drop an item into a cell of the grid. On dropping, some part of the information (like an ID value from img tag) would be pasted into the cell.
Can you please explain how this can be achieved, preferably with some example code.
Thanks
Hi,
I'm not 100% sure its possible, as this is more of a platform question.
However, in Sl 4, the AllowDrop property was introduced, which allows you to hook into some additional events available on all UIElements. Specifically : DragEnter, DragLeave, DragOver and Drop.
If you set AllowDrop to true, i'm pretty sure the event will fire when you drag an HTML img over the grid, however, i'm not sure if you'll be able to access the data.
Here are a few links i found that might be helpful:
http://en.baydachnyy.com/2010/02/02/silverlight-4-drag-drop/
http://msdn.microsoft.com/en-us/library/system.windows.uielement.allowdrop(v=vs.95).aspx
Hope this helps,
-SteveZ
Thanks, Steve
I'm trying a simple test to verify these events with following code ("Answers" is a xamGrid in the canvas):
Answers.DragEnter += (s, e) => Answers.BorderBrush = new SolidColorBrush(Colors.Green); Answers.DragLeave += (s, e) => Answers.BorderBrush = new SolidColorBrush(Colors.Gray); Answers.Drop += (s, e) => Answers.BorderBrush = new SolidColorBrush(Colors.Red);
Doing this makes the grid get the green border when dragging something over, gray border when dragging away from it, but no red color on Drop ever comes up. Any idea why?
I'm not exactly sure. I can drag and drop files from my desktop, no problem, and all the events fire. But when it comes to images from the browser, the Drop never fires, regardless of the FrameworkElement that i'm dropping it on.
I suppose it could be a security issue, but i'm not really sure.
Mention of image element was for discussion sake, I'm actually testing with selecting some text in a textarea element and dragging it to the Silverlight area, but it doesn't seem to make any difference.
So to be very clear here:
- The Infragistics Drag and Drop framework is for within a Silverlight app only. It cannot reach out to the HTML in the browser.
- Silverlight 4 added the ability to drag and drop objects from Windows shell onto the Silverlight player.
- It might be possible to drag and drop HTML elements onto the Silverlight player using Silverlights HTML DOM bridge.
Basically you would have to use JavaScript to detect that the HTML element was dragged onto the Silverlight player, which the browser sees as an <object>, not specifically as the Silverlight player. You could use our client-side drag and drop framework which is part of our ASP.NET controls product to help with this.
Once a drag was detected you could use the HTML bridge to tell your Silverlight app what was dragged and how to react.
What I'm not sure you can do is use the bridge to figure out specifically what SL element your over. I'm not sure if during the HTML element drag operation the SL mouse events will still fire. If they do, then you could use the HTML bridge to send information about what Silverlight element is currently being hovered over back out to JavaScript and react accordingly there.
Hope that helps get you on your way.
Devin
That is correct.
Just to make sure I understood you correctly, SL Drag & Drop functionality is for within Silverlight only, and it is not possible to drag anything from the host html page, be it image, html or plain text?
I was just informed that the the AllowDrop functionality of Silverlight is for dropping files from your desktop only.
Which is why it wouldn't work when i tried an html image.
You can use our SL Drag & Drop framework for operations regarding other SL elements. However, it won't be possible drag html on to the xamGrid and be notified.
It should also be noted that the mouse cursor is different when dragging a file over the silverlight grid indicating that the action is allowed, while attempting to drag anything from the host page itself will show not allowed icon.
If anyone has any idea why this is like it is, please step forward.