Drag and Drop in Silverlight
XML is an important medium in the world of Silverlight especially where Web Services are involved. The .NET 3.5 that comes with Silverlight 2 omits some of the core XML objects that you will find in the full incarnation of .NET 3.5. There is however the XML Reader and Writer classes that allow you high speed access to reading and writing XML documents. In our sample on this page we use an XML reader to read a simple XML file and render the results to the page.
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.
Your Comments and Questions Answered
You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!