In this post, I will show you how to drag and drop a RichTextBox in Silverlight. For your information, the code below also could be adapted to drag any element around.
The XAML that you are going to use here consists of one Border control which contains your 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 your 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, you have detected when the mouse is clicked over the border (using the Border_MouseLeftButtonDown event) and set _mouseDown = true, you 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. And the final mouse event handler, Border_MouseLeftButtonUp clears the _mouseDown flag releases the capture lock we set previously.
Silverlight 6 with Free ASP.NET Hosting
Try our Silverlight 6 with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.
