RadDrag&Drop with a Canvas twist
A week or so ago I was giving a small presentation and one of the people in the audience had a great question. They had this old configuration section on their website for laying out something or other that had a lot of different options which could be dragged and dropped using some client-side javascript, but they are looking to move on up to Silverlight and the RadDragAndDropManager seemed to be the perfect candidate for the job. The only issue with that is the only examples we have online show moving items to and from collections, but in their case they would need something like a Canvas for laying out items, so they wanted to know if we could provide that.
Our answer? Of course!
All it takes to get a scenario like this working is to understand the differences between the two types of controls. For the example I worked up, I have the best of both worlds- a Canvas and a ListBox. With this combination, I can start with a list of items and move them over to the Canvas to position as I please. You can see that here (for reference, blinding yellow is not the background of the canvas, that's just a dragcue color I added):
But this isn't moving too far from the demos we have. The neat thing comes into play starting when we go to drop the item on the Canvas. The code below:
| if (e.Options.Status == DragStatus.DropComplete) |
| { |
| Image im = new Image() { Height = 100, Width = 100, Stretch = Stretch.Fill }; |
| BitmapImage bmi = new BitmapImage(new Uri(payload.ImgSource, UriKind.RelativeOrAbsolute)); |
| im.Source = bmi as ImageSource; |
| // Save our ImageItem for later use! |
| im.Tag = payload; |
| destCanvas.Children.Add(im); |
| // Get our drag point as well as the current position of the Canvas to figure |
| // out the Canvas.Top and .Left properties for the newly added image |
| Point p = e.Options.CurrentDragPoint; |
| GeneralTransform gt = destCanvas.TransformToVisual(Application.Current.RootVisual as UIElement); |
| Point offset = gt.Transform(new Point(0, 0)); ; |
| im.SetValue(Canvas.TopProperty, p.Y - (offset.Y + im.Height / 2)); |
| im.SetValue(Canvas.LeftProperty, p.X - (offset.X + im.Width / 2)); |
| RadDragAndDropManager.SetAllowDrag(im, true); |
| } |
shows us an example of how we figure out our positioning. In a nutshell, we find where the drop point is, get the offset of where the Canvas is located in the app, and center the newly created (and Drag+Drop-able) image on the Canvas. The neat thing is that, due to the versatile Tag field on the image, we can store a copy of the data (an ImageItem) that can be used later, i.e., if someone were to save a collection of the child items from the canvas to store a configuration. Fun stuff!
But it gets better! We can also drag items back and forth on the canvas, so say the item you had originally put in the upper-left quadrant would go better slightly overlapping the two items in the lower-right. This is quick and easy as well and all demonstrated in the attached project:
As you can see, RadDragAndDropManager is not just for moving items between lists (check out the new demo that integrates RadTreeView, RadGridView, and a Listbox), but you can actually get really creative with what you can do with this control.
And as promised, here is a link to the project showing off how you would do this. Enjoy!
Evan Hutnick
Evan Hutnick works as a Developer Evangelist for Telerik specializing in Silverlight and WPF in addition to being a Microsoft MVP for Silverlight. After years as a development enthusiast in .Net technologies, he has been able to excel in XAML development helping to provide samples and expertise in these cutting edge technologies. You can find him on Twitter @EvanHutnick.
Related Posts
Comments
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required