Every once in a while a customer will come to us and ask about a particular piece of functionality in one of the RadControls for Silverlight or RadControls for WPF that isn't covered in the demos, documentation, or videos. Just this week, one of the fans on our Telerik Facebook page did just that - specifically asking whether you could use a certain type of layout panel for the drag cue of RadDragAndDropManager. Normally in a case like this, I want to say "Yeah, it's just a DataTemplate in Silverlight/WPF, so you could do almost anything there!"
But we're developers, and code speaks a thousand words (with intellisense!).
So what does it take to use different UI elements with RadDragAndDropManager? For starters, since the developers did such a great job on the documentation, start with the following article to get your basic setup in place:
We only make a few changes in the code I will provide you with, specifically that I'm doing six ListBox implementations (which means six ObservableCollections on the backend), along with replacing the ApplicationInfo class and all instances of it with this DragItemClass:
Once that is set and you've gotten the boilerplate RadDragAndDropManager code setup from the help file above, we can start on some customizations!
The first thing we want to do is define some fake data to go into these. I worked up 12 different items with different values, here are two example ones that we'll use to help with the explanation and other code that follows:
As you can see, the ObservableCollections are being populated with our DragItemClass instances, but there is a fun and curious value that I included there - the templatevalue. This is actually the name of resources that we have defined in our UserControl.Resources for our Drag Cue templates. This means that we can then modify the OnDragQuery method, specifically having the cue.ContentTemplate line instead pull the templatevalue from our items and using that as the resource key for our DataTemplate:
See that? Only one line changed. But where are the DataTemplates coming from? I defined those in the page where the six ListBoxes live. Here they are for reference - and note, we are using all sorts of templates here, from StackPanel to Canvas to a RadCalendar instance - you can put virtually anything into a DataTemplate and use it for your Drag Cue. The architecture of the control allows for this versatility!
And your end result? A rich and versatile drag and drop experience with the ability to use virtually anything as a Drag Cue, and it even works on my touchscreen Lenovo laptop!
Awesome! Feel free to download the source code for this example and check it out for yourself!
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.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required