这篇也是之前写的，最近忙于写论文，还没有来得及翻译，以后有时间的话会补上的 =.=

这一篇的信息量有点大，主要是还引用了两篇微软的教程作基础

Before starting this tutorial, I would like to recommend two tutorials from Microsoft about how to drag items from/into SurfaceListBox.

Dragging and Dropping Items Between SurfaceListBox Controls

Dragging and Dropping Items from ScatterView Controls to SurfaceListBox Controls

After these two tutorials, I believe you would have already established a basic understanding about drag and drop.

The rest of this section will give further introduction about make drag and drop works better in our applications.

Part 1. Dragging and dropping items from SurfaceListbox to ScatterView

This topic describes how to drag items from a SurfaceListBox control and drop them on a ScatterView control.

Step 1. Create a data item class for the items for SurfaceListBox control.

public class Person{    private string name;    private string id;    public string Name    {        get { return name; }    }    public string ID    {        get { return id; }    }    public Person(string name, string id)    {        this.name = name;        this.id = id;    }}

Step 2. Define the two datatemplate objects in the Resources section of the main SurfaceWindow object, one for the SurfaceListBox and the other for the ScatterView.

Step 3. Define a ObservableCollection object to hold the data items for SurfaceListBox.

private ObservableCollection
     
       sourceItems;public ObservableCollection
      
        SourceItems{    get    {        if (sourceItems == null)        {            sourceItems = new ObservableCollection
       
        ();        }    return sourceItems;    }}
       
      
     

Step 4. Add some data items to the SurfaceListBox

protected override void OnInitialized(EventArgs e){    base.OnInitialized(e);    DataContext = this;    SourceItems.Add(new Person("Hammer", "111"));    SourceItems.Add(new Person("Saw", "101"));    SourceItems.Add(new Person("Pliers", "201"));    SourceItems.Add(new Person("Square", "202"));    SourceItems.Add(new Person("Wrench", "134"));    SourceItems.Add(new Person("Plumb Bob", "234"));    SourceItems.Add(new Person("Miter Box", "124"));    SourceItems.Add(new Person("Knife", "432"));    SourceItems.Add(new Person("Chisel", "688"));    SourceItems.Add(new Person("Punch", "321"));}

Step 5. Creating the controls and Binding the Items

Step 6. Define the drag cursor object for drag event in the Resources section of the main SurfaceWindow object.

Step 7. Setting the drag operation for the SurfaceListBox.

This part is as same as it in the Dragging and Dropping Items Between SurfaceListBox Controls tutorial, besides changing the TouchEventArgs parameter to InputEventArgs to enable the drag work with mouse.

private void DragSourcePreviewInputDeviceDown(object sender, InputEventArgs e)

Step 8. Setting the drop operation for the ScatterView

private void DropTarget_Drop(object sender, SurfaceDragDropEventArgs e){    DropTarget.Items.Add(e.Cursor.Data);    ScatterViewItem svi =  DropTarget.ItemContainerGenerator.ContainerFromItem(e.Cursor.Data) as ScatterViewItem;    svi.Orientation = e.Cursor.GetOrientation(this);    svi.Center = e.Cursor.GetPosition(this.DropTarget);    svi.Width = 200;}

The first line of the code adds the drag item into the items collection of the ScatterView, and then a ScatterViewItem is created automatically for this data item.

The second line of the code gets the specified ScatterViewItem for this data item, so we are able to modify the angle and position of the item when the item being drop onto the ScatterView.

Part 2. Make control (i.e. ScatterView, SurfaceListBox) hold two different data templates

This part introduces how to enable the ScatterView control can hold different data templates for different data item.

Continue with the project of part 1.

Step 1. Create a new data item class

public class Animal{    private string name;    private string weight;    private string age;    public string Name    {        get { return name;}    }    public string Weight    {        get{ return weight;}    }    public string Age    {        get { return age; }    }    public Animal(string name, string weight, string age)    {    this.name = name;    this.weight = weight;    this.age = age;    }}

Step 2. Define the DataTemplate objects for Animal in the Resources section of the main SurfaceWindow object.

Since the item in SurfaceListBox we can use the same style as Person (just shows name), we only need to define the template for ScatterView

Step 3. Define the ObservableCollection object for animal

public ObservableCollection
     
       animalItems;public ObservableCollection
      
        AnimalItems{    get    {        if (animalItems == null)        {            animalItems = new ObservableCollection
       
        ();        }        return animalItems;     }}
       
      
     

Step 4. Add some data items for animal in the OnInitialized method

AnimalItems.Add(new Animal("Cat", "50", "4"));AnimalItems.Add(new Animal("Dog", "100", "5"));AnimalItems.Add(new Animal("Elephant", "1000", "3"));AnimalItems.Add(new Animal("Deer", "200", "5"));

Step 5. Add the new SurfaceListBox for Animal and Bind the items

Step 6. Create template selector for choosing different templates for different data item

Create a new class named as . ScatterViewDataTemplateSelector

Include two namespaces shows below:

using System.Windows;using System.Windows.Controls;

And define the class as:

public class ScatterViewDataTemplateSelector: DataTemplateSelector{    public override DataTemplate SelectTemplate(object item,     DependencyObject container)    {        FrameworkElement element = container as     FrameworkElement;        if (element != null && item != null)        {            if (item is Person)                return element.FindResource("ScatterViewItemDataTemplate") as DataTemplate;            else if (item is Animal)                return element.FindResource("ScatterViewItemDataTemplateForAnimal") as DataTemplate;        }        return null;    }}

Step 7. Remove the ItemTemplate binding for the ScatterView, and change to

Step 8. Include the definition of the ScatterViewDataTemplateSelector in the Resources section of the main SurfaceWindow object

Include the namespace for this project first:

xmlns:local="clr-namespace:Tutorial_2"

then add the code below to the Resources section: