WPF and Silverlight Edition Basic Library

Step 2 of 3: Adding Code to the Application

In the last step you set up your application, but you have not added drag-and-drop functionally to the application. In this step you'll continue by adding code to add functionality to the application.

Complete the following steps:

Navigate to the Solution Explorer, right-click MainPage.xaml file or the MainWindow.xaml file, and select View Code to switch to Code view.
In Code view, add the following import statements to the top of the page:

 Imports C1.WPF

 using C1.WPF;

Add code to the MainPage.xaml.cs (or .vb) file or the MainWindow.xaml.cs (or .vb) file in the page constructor so it looks similar to the following:

Public Sub New()
      InitializeComponent()
      ' Initialize the C1DragDropManager
      Dim dd As New C1DragDropManager()
      dd.RegisterDropTarget(_ddGrid, True)
      For Each e As UIElement In _ddGrid.Children
          dd.RegisterDragSource(e, DragDropEffect.Move, ModifierKeys.None)
      Next
      AddHandler dd.DragDrop, AddressOf dd_DragDrop
  End Sub

public MainPage()
{
  InitializeComponent();
  // Initialize the C1DragDropManager
  C1DragDropManager dd = new C1DragDropManager();
  dd.RegisterDropTarget(_ddGrid, true);
  foreach (UIElement e in _ddGrid.Children)
  {
    dd.RegisterDragSource(e, DragDropEffect.Move, ModifierKeys.None);
  }
  dd.DragDrop += dd_DragDrop;   
}

The code initiates a new instance of a C1DragDropManager and then calls the RegisterDropTarget method to indicate that the grid should act as a drop target by default. It then calls the RegisterDragSource method to indicate that users should be allowed to drag the elements in the grid and finally, the code attaches an event handler to the DragDrop event so the application can receive a notification and move the element being dragged into its new position

Add the following event handler to the MainPage.xaml.cs (or .vb) file or to the MainWindow.xaml.cs (or .vb) file, below all the other methods in the MainPage class:

Private Sub dd_DragDrop(source As Object, e As DragDropEventArgs)
    ' Get mouse position
    Dim pMouse As Point = e.GetPosition(_ddGrid)
    ' Translate into grid row/col coordinates
    Dim row As Integer, col As Integer
    Dim pGrid As New Point(0, 0)
    For row = 0 To _ddGrid.RowDefinitions.Count - 1
        pGrid.Y += _ddGrid.RowDefinitions(row).ActualHeight
        If pGrid.Y > pMouse.Y Then
        Exit For
        End If
    Next
    For col = 0 To _ddGrid.ColumnDefinitions.Count - 1
        pGrid.X += _ddGrid.ColumnDefinitions(col).ActualWidth
        If pGrid.X > pMouse.X Then
        Exit For
        End If
    Next
    ' Move the element to the new position
    e.DragSource.SetValue(Grid.RowProperty, row)
    e.DragSource.SetValue(Grid.ColumnProperty, col)
End Sub

private void dd_DragDrop(object source, DragDropEventArgs e)
{
  // Get mouse position
  Point pMouse = e.GetPosition(_ddGrid);
  // Translate into grid row/col coordinates
  int row, col;
  Point pGrid = new Point(0, 0);
  for (row = 0; row < _ddGrid.RowDefinitions.Count; row++)
    {
      pGrid.Y += _ddGrid.RowDefinitions[row].ActualHeight;
      if (pGrid.Y > pMouse.Y)
      break;
    }
  for (col = 0; col < _ddGrid.ColumnDefinitions.Count; col++)
  {
    pGrid.X += _ddGrid.ColumnDefinitions[col].ActualWidth;
    if (pGrid.X > pMouse.X)
    break;
  }
  // Move the element to the new position
  e.DragSource.SetValue(Grid.RowProperty, row);
  e.DragSource.SetValue(Grid.ColumnProperty, col);
}

The event handler starts by converting the mouse coordinates into row/column values. Then it uses the SetValue method to update the Grid.RowProperty and Grid.ColumnProperty values on the element that was dragged. Similar logic could be used to drag elements within other types of panel or list-type controls, or from one panel to another.

What You've Accomplished

In this step you added code to add functionality to your application. In the next step you'll run your application and observe some of the run-time interactions possible with DragDropManager for WPF and Silverlight.