This walkthrough shows you how to perform drag and drop using API.

In this walkthrough, you perform the following tasks:

• Create ClientUI Application project using Intersoft ClientUI Application project template. 
• Perform drag and drop using API.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI 2010

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI MVVM Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI MVVM Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

To add the resources file

1. In your project, create new folder with name Assets.
2. In Assets folder, create new folder with name Images.
3. In Images folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.ClientUIFramework\Assets\Images\Files.

Creating the View

This section steps you through the process of creating a page that uses a variety of ClientUI controls such as UXWindow and UXScrollViewer. All the various UI Controls is used to execute the Drag and Drop Event which move the current object to another place.

To create the View

1. Add the UXWindow. Set the following properties of UXWindow as below.
   

   Properties	Value
   Header	Source
   Height	150
   Width	300
   HorizontalAlignment	Center
   VerticalAlignment	Top
   IsClientVisible	True
   IsActive	True

2. Add the UXScrollViewer inside the UXWindow. Reset all properties of the UXScrollViewer.
3. Add the WrapPanel inside the UXScrollViewer. Reset all properties of the WrapPanel.
4. Add the Image component inside the WrapPanel. Set the following properties of Image as below.
   

   Properties	Value
   HorizontalAlignment	Left
   VerticalAlignment	Top
   Height	64
   Width	64
   Source	Favorite.png

5. Add two additional Image and set the Source property of Image into Download.png.
6. Attach MouseLeftButtonDown, MouseLeftButtonUp and MouseMove event handler.
   

   XAML

   Copy Code

   <Grid x:Name="LayoutRoot"> <Intersoft:UXWindow Header="Source" Height="150" Width="300" HorizontalAlignment="Center" VerticalAlignment="Top" IsClientVisible="True" IsActive="True"> <Grid> <Intersoft:UXScrollViewer Name="uXScrollViewer1"> <Intersoft:WrapPanel Name="wrapPanel1"> <Image Name="image1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragDropAPI;component/Assets/Images/Favorite.png" MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseMove="Image_MouseMove" MouseLeftButtonUp="Image_MouseLeftButtonUp" /> <Image Name="image2" HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragDropAPI;component/Assets/Images/Download.png" MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseMove="Image_MouseMove" MouseLeftButtonUp="Image_MouseLeftButtonUp" /> </Intersoft:WrapPanel> </Intersoft:UXScrollViewer> </Grid> </Intersoft:UXWindow> </Grid>

   
   
7. Create another UXWindow as you have created in the previous steps.
   Add the UXScrollViewer inside the UXWindow.
   
8. Add the WrapPanel inside the UXScrollViewer and set the ISDragDrop.AllowDrop property of the WrapPanel into True.
   
9. Add three additional Image and set each the Source property of Image into Document.png, Text.png, Report.png.
10. Attach MouseLeftButtonDown, MouseLeftButtonUp and MouseMove event handler.
    
    

    XAML

    Copy Code

    <Grid x:Name="LayoutRoot"> ... <Intersoft:UXWindow Header="Target" Height="150" Width="300" VerticalAlignment="Bottom" HorizontalAlignment="Center" IsClientVisible="True"> <Grid> <Intersoft:UXScrollViewer Name="uXScrollViewer2"> <Intersoft:WrapPanel Name="wrapPanel2" Intersoft:ISDragDrop.AllowDrop="True" > <Image Name="image3" HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragDropAPI;component/Assets/Images/Document.png" /> <Image Name="image4" HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragDropAPI;component/Assets/Images/Text.png" /> <Image Name="image5" HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragDropAPI;component/Assets/Images/Report.png" /> </Intersoft:WrapPanel> </Intersoft:UXScrollViewer> </Grid> </Intersoft:UXWindow> </Grid>

    
    

Perform Drag-drop using API

This section steps you through the process of attaching a DragDrop handler that contains the DropEvent for the Target folder and the image's behavior when the MouseLeftButtonDown, MouseMove and MouseLeftButtonDown is invoked.

To create the DragDrop event handler

1. Create the two new properties named them IsMouseLeftButtonDown and StartPosition.
   

   C#	Copy Code
   public partial class MainPage : UXPage { private bool IsMouseLeftButtonDown { get; set; } private Point StartPosition { get; set; } }

2. Locate Image_MouseLeftButtonDown method event handler and copy the following code to handle the initial drag.
   

   C#	Copy Code
   private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Image image = sender as Image; image.CaptureMouse(); this.IsMouseLeftButtonDown = true; this.StartPosition = e.GetPosition(null); }

3. Locate the Image_MouseMove method event handler, and copy the following code to start the drag drop by calling ISDragDrop.DoDragDrop.
   

   C#

   Copy Code

   private void Image_MouseMove(object sender, MouseEventArgs e) { if (this.IsMouseLeftButtonDown) { Image image = sender as Image; Point currentPosition = e.GetPosition(null); double diffX = Math.Abs(currentPosition.X - this.StartPosition.X); double diffY = Math.Abs(currentPosition.Y - this.StartPosition.Y); if (diffX >= 4 || diffY >= 4) { image.ReleaseMouseCapture(); this.IsMouseLeftButtonDown = false; ISDragDrop.DoDragDrop(image, null, DragDropEffects.Copy); } } }

4. Locate Image_MouseLeftButtonUp method and copy the following code to handle the mouse left button up.
   

   C#	Copy Code
   private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { Image image = sender as Image; image.ReleaseMouseCapture(); this.IsMouseLeftButtonDown = false; }

5. Create the Drop event handler to handle the drop event.
   

   C#	Copy Code
   private void Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e) { Panel panel = e.GetDropTarget() as Panel; Image image = e.GetSourceElement() as Image; Image copyImage = new Image() { Source = image.Source }; copyImage.Height = 64; copyImage.Width = 64; copyImage.Margin = new Thickness(8); panel.Children.Add(copyImage); }

6. Register the Drop routed event to WrapPanel and attached it to event handler you just created.
   

   C#	Copy Code
   public MainPage() { InitializeComponent(); ISEventManager.RegisterInstanceHandler(this.wrapPanel2, DragDrop.DropEvent, new Intersoft.Client.UI.Controls.Interactivity.DragEventHandler(Drop), false); }

7. Run the project. Try to drag from the Source folder and drop it inside the Target folder.
   

Conclusion

In this walkthrough, you have learned how to create ClientUI project using project template. You also learned how to attach a DragDrop Event handler into the images along with the MouseLeftButtonDown, MouseMove and MouseLeftButtonUp.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

MainPage.xaml.cs

See Also