Silverlight cookbook: drag & drop recipe

In this article I will analyze the work with drag & drop on the example of such an application:



The idea is that from the list of all users we could personally (using drag & drop) sort the users into two groups. Moreover, users with negative karma cannot be added to the white list.
')
But more to the point. I ask under the cat.

So, the entry.

Out of the box, we cannot immediately take and start using drag & drop functionality (we’ll have to implement everything ourselves), but to make our lives easier, specially trained guys from the Silverlight Team at Microsoft have already implemented everything in the Silverlight Toolkit .
This functionality is presented in the form of wrappers for some basic controls (User Controls) with the control name + DragDropTarget (for ListBox this is ListBoxDragDropTarget ). The example of ListBox, or rather several ListBoxes, will demonstrate how to work with drag & drop.

Create a new Silverlight application.

I called it DragAndDropTestApp, which, in fact, doesn’t have any meaning at all.
In the next dialog box, leave everything as is and click OK.

Immediately add a link to the Toolkit:



It is assumed that it is already downloaded and installed.

Add the following namespaces to MainPage.xaml:

xmlns:toolkit= "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
xmlns:my= "clr-namespace:DragAndDropTestApp"
* All source code (under and below) was highlighted with Source Code Highlighter .

On the toolkit. And on the namespace in which our application rests.

Sketch xaml.
Each of the three lists is represented by the following markup:

< TextBlock
Text ="Users:"
Style ="{StaticResource Header}" />
< toolkit:ListBoxDragDropTarget
Grid . Row ="1"
HorizontalContentAlignment ="Stretch"
VerticalContentAlignment ="Stretch" >
< ListBox >
< ListBox.ItemTemplate >
< DataTemplate >
< my:UCUser />
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
</ toolkit:ListBoxDragDropTarget >

TextBox with a title for the list of items (with all the styles I dabbled in App.xaml). And, actually, ListBox itself, wrapped in ListBoxDragDropTarget. ItemTemplate is overridden to display users. UCUser is my own control. Inside there is nothing supernatural, see for yourself.

1. < Grid
2. x: Name = "LayoutRoot"
3. Background = "Transparent" >
4. < Grid.ColumnDefinitions >
5. < ColumnDefinition Width = "Auto" />
6. < ColumnDefinition Width = "4 *" />
7. < ColumnDefinition Width = "6 *" />
8. </ Grid.ColumnDefinitions >
9. < Grid.RowDefinitions >
10. < RowDefinition Height = "Auto" />
11. < RowDefinition Height = "Auto" />
12. </ Grid.RowDefinitions >
13. < Image
14. Source = "../ Images / gnome_face_devilish.png"
15. Width = "48"
16. Height = "48"
17. Margin = "15, 0, 20, 0"
18. Grid RowSpan = "2" />
19. < Textblock
20. Text = "Nickname:"
21. Grid Column = "1" />
22. < Textblock
23. Text = "{Binding Path = NickName, Mode = OneWay}"
24. Grid Column = "2"
25. FontWeight = "Bold" />
26. < Textblock
27. Text = "Karma:"
28. Grid Row = "1"
29. Grid Column = "1" />
30. < Textblock
31. Text = "{Binding Path = Karma, Mode = OneWay}"
32. Grid Row = "1"
33. Grid Column = "2"
34. FontWeight = "Bold" />
35. </ Grid >
    

The source (Source) for the image is set and the data binding (Binding) is registered.
By the way, for the user there is a separate class. Here is his presentation:

public class User
{
public string NickName { get ; set ; }
public int Karma { get ; set ; }
}

Now we will create a collection for each list and simulate the loading of users:

1. public partial class MainPage: UserControl
2. {
3. public MainPage ()
4. {
5. Initializecomponent ();
6. this .DataContext = this ;
7. InitializeCollections ();
8. LoadUsers ();
9. }
11. // Announcement of collections
12. public ObservableCollection <User> Users { get ; set ; }
13. public ObservableCollection <User> WhiteList { get ; set ; }
14. public ObservableCollection <User> BlackList { get ; set ; }
16. // Initialize Collections
17. private void InitializeCollections ()
18. {
19. Users = new ObservableCollection <User> ();
20. WhiteList = new ObservableCollection <User> ();
21. BlackList = new ObservableCollection <User> ();
22. }
24. // Method that simulates loading data into the Users collection
25. private void LoadUsers ()
26. {
27. var r = new Random ();
29. // Add 20 users with a random karma value.
30. for ( int i = 1; i <21; i ++)
31. {
32. var newUser = new User
33. {
34. NickName = "Username" + i,
35. Karma = r.Next (200) - 100
36. };
38. Users.Add (newUser);
39. }
40. }
41. }

As the DataContext for the MainPage, set the MainPage itself. I did this so that you can easily attach to the data. It looks like this:

< ListBox ItemsSource ="{Binding Path=Users, Mode=TwoWay}" >

Drag & Drop lacks the final touch:

AllowDrop ="True"

By setting this property to true, we allow the element to accept data using drag & drop. Moreover, it can be installed both in ListBox and ListBoxDragDropTarget.

Here's what happened:



Now you can drag a user with negative karma to any of the lists.
According to the plan, you need to prohibit dragging such in the White List.

First, let's deal with the events that are generated during the Drag-n-Drop:



DragEnter occurs when the dragged container crosses the boundary of the destination element (triggered before the DragOver event).
DragLeave - draggable container dragged from the source element.
DragOver - triggered when the drag container moves over the destination element.
Drop - the container being dragged was "dropped" into the destination element.

Add a DragEnter event handler for the whitelist.

1. < toolkit: ListBoxDragDropTarget
2. AllowDrop = "True"
3. Grid Row = "1"
4. Grid Column = "1"
5. HorizontalContentAlignment = "Stretch"
6. VerticalContentAlignment = "Stretch"
7. DragEnter = "ListBoxDragDropTarget_DragEnter" >
8. < Listbox
9. ItemsSource = "{Binding Path = WhiteList, Mode = TwoWay}"
10. x: Name = "lbWhiteList" >
11. < ListBox.ItemTemplate >
12. < DataTemplate >
13. < my: UCUser />
14. </ DataTemplate >
15. </ ListBox.ItemTemplate >
16. </ Listbox >
17. </ toolkit: ListBoxDragDropTarget >

And assign a name to ListBox, it will be useful to us.

Handler itself:

1. private void ListBoxDragDropTarget_DragEnter ( object sender, Microsoft.Windows.DragEventArgs e)
2. {
3. // learned the format
4. var dataFormat = e.Data.GetFormats () [0];
6. // Received an object in the ItemDragEventArgs format
7. var dragEventArgs = e.Data.GetData (dataFormat) as ItemDragEventArgs;
9. // Got a collection of drag and drop items
10. SelectionCollection sc = dragEventArgs.Data as SelectionCollection;
12. // Check each item in the collection
13. foreach ( var item in sc)
14. {
15. // If at least one of the dragged items (users) has negative karma
16. // Do not add these items to the white list.
17. if ((item.Item as User) .Karma <0)
18. {
19. lbWhiteList.AllowDrop = false ;
20. break ;
21. }
22. }
23. }

DragEventArgs.Data returns an IDataObject object that contains the data associated with the corresponding drag event. But data cannot be directly accessed, they are labeled as Non-Public:



To obtain this data, use the GetData () method, which returns data in the format passed as a parameter (the format can be specified as a string or type). You can find out the format using the GetFormats () method.

The result is an instance of the class ItemDragEventArgs . This class contains information describing the drag and drop event on a UIElement. It has a Data property that directly relates to the container being dragged. We bring this object to SelectionCollection .
The collection is used here because we can drag several items at once.
(it is possible to check this very simply, in ListBox, the SelectionMode property is set to Multiple ).
It remains to run through the entire collection and check whether there are guys with negative karma among the draggable users. If there is, then simply prohibiting them to "drop" into the white list.

You can return AllowDrop to its previous value (to True) in the MouseLeave event handler.

And finally, to implement the ability to sort items within the same list using drag-n-drop, it is enough just to override the template for ItemsPanel :

< ListBox.ItemsPanel >
< ItemsPanelTemplate >
< StackPanel />
</ ItemsPanelTemplate >
</ ListBox.ItemsPanel >

Download the project here .