Drag and Drop in Silverlight
Here we show how to drag and drop a RichTextBox, though the code could be adapted to drag any element around.
You need to login to Download this Drag and Drop example, If you do not have a login you can register for free!
The XAML we are going to use here consists of one Border control which contains our Rich TextBox. The Border control has several event handlers defined to capture the Mouse Buttons and Movement:
<UserControl x:Class="TreeViewDragAndDrop.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Top" HorizontalAlignment="Left">
<liquidTreeView:Tree x:Name="tree" EnableDragAndDrop="true" Drop="Tree_Drop" Width="300" Height="151" Margin="4">
<liquidTreeView:Tree.Nodes>
<liquidTreeView:Node ID="0" Title="Root" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
<liquidTreeView:Node.Nodes>
<liquidTreeView:Node ID="1" Title="Folder 1" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
<liquidTreeView:Node.Nodes>
<liquidTreeView:Node ID="10" Title="File 1.doc" Icon="images/doc.png" />
<liquidTreeView:Node ID="11" Title="File 2.doc" Icon="images/doc.png" />
</liquidTreeView:Node.Nodes>
</liquidTreeView:Node>
<liquidTreeView:Node ID="2" Title="Folder 2" Icon="images/folder.png" IconExpanded="images/folderOpen.png">
<liquidTreeView:Node.Nodes>
<liquidTreeView:Node ID="20" Title="File 3.doc" Icon="images/doc.png" />
<liquidTreeView:Node ID="21" Title="File 4.doc" Icon="images/doc.png" />
<liquidTreeView:Node ID="21" Title="File 5.doc" Icon="images/doc.png" />
</liquidTreeView:Node.Nodes>
</liquidTreeView:Node>
</liquidTreeView:Node.Nodes>
</liquidTreeView:Node>
</liquidTreeView:Tree.Nodes>
</liquidTreeView:Tree>
</Grid>
</UserControl>
The C# for this tutorial contains the 3 event handlers which do the actual work here. Remember our Border control has been placed on a Canvas object which allows you to specify using absolute coordinates where the Border should be rendered:
using System.Windows.Controls;
using Liquid;
namespace TreeViewDragAndDrop
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Tree_Drop(object sender, TreeEventArgs e)
{
e.DropAction = Tree.DropActions.InsertAfter;
}
}
}
As you can see we detect when the mouse is clicked over the border (using the Border_MouseLeftButtonDown event) and set _mouseDown = true, we also call myBorder.CaptureMouse(), this is important as it tells Silverlight to route allmouse events to the Border control.
When the user moves the mouse the new position of the Border is calculated by adding the amount of pixels the cursor has moved since the last MouseMove event was called. This is all handled in the Border_MouseMove event.
The final mouse event handler, Border_MouseLeftButtonUp clears the _mouseDown flag releases the capture lock we set previously.
