Basic Library for WPF and Silverlight | ComponentOne
WPF and Silverlight Edition Basic Library / DragDrop Manager / DragDropManager Quick Start / Step 2 of 3: Adding Code to the Application
In This Topic
    Step 2 of 3: Adding Code to the Application
    In This Topic

    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:

    1. Navigate to the Solution Explorer, right-click MainPage.xaml file or the MainWindow.xaml file, and select View Code to switch to Code view.
    2. In Code view, add the following import statements to the top of the page:
      Visual Basic
      Copy Code
      Imports C1.WPF
      

    C#
    Copy Code
    using C1.WPF;
    
    1. 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:
      Visual Basic
      Copy Code
      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
      

    C#
    Copy Code
    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

    1. 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:
    Visual Basic
    Copy Code
    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
    

    C#
    Copy Code
    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.