This walkthrough shows you how to perform copy operation during drop event.

In this walkthrough, you perform the following tasks:

• Create a new ClientUI Application project using Intersoft ClientUI Application project template.
• Handle drop event to perform copy operation.

Prerequisites

You need the following components to complete this walkthrough:

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

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 Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI 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 Images.
2. 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 Simple Application Using Drag And Drop Copy Operation 

This section shows you how to perform copy during drag and drop.

1. First declare interactivity in your XAML.
   

   XAML	Copy Code
   <Intersoft:UXPage... xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" > </Intersoft:UXPage>

2. Remove the d:DesignHeight property and the d:DesignWidth property in UXPage.
3. Add Grid to the LayoutRoot.
4. Add UXWindow control to the Grid and set the following properties to the control.
   

   Header	My Documents
   Height	150
   Width	300
   HorizontalAlignment	Center
   VerticalAlignment	Top
   Margin	0,22,0,0
   IsClientVisible	True
   IsActive	True

   
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Grid> <Intersoft:UXWindow Header="My Documents" Height="150" Width="300" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,22,0,0" IsClientVisible="True" IsActive="True"> </Intersoft:UXWindow> </Grid></Grid>

   
   
5. Add WrapPanel to the UXWindow control and set the Background property to White.
   

   XAML	Copy Code
   <Intersoft:UXWindow... > <Intersoft:WrapPanel Background="White"> ... </Intersoft:WrapPanel> </Intersoft:UXWindow>

6. Add DropTargetBehavior to the WrapPanel and set the drop event name to DropTargetBehavior_Drop.
   

   XAML	Copy Code
   <Intersoft:WrapPanel... > <i:Interaction.Behaviors> <Intersoft:DropTargetBehavior Drop="DropTargetBehavior_Drop" /> </i:Interaction.Behaviors> </Intersoft:WrapPanel>

7. Add Image control to the WrapPanel and set the following properties to the control.
   

   Source	/PerformCopyOperationDuringDropEvent;component/Image/Favorite.png
   Width	64
   Height	64
   Margin	8

   
   

   XAML	Copy Code
   <Intersoft:WrapPanel... > <i:Interaction.Behaviors> ... </i:Interaction.Behaviors> <Image Source="/PerformCopyOperationDuringDropEvent;component/Image/Favorite.png" Width="64" Height="64" Margin="8"> </Image> </Intersoft:WrapPanel>

   
   
8. Add DragDropBehavior to the Image control and set the DragEffect property to Copy and the DropAction property to Copy.
   

   XAML	Copy Code
   <Image... > <i:Interaction.Behaviors> <Intersoft:DragDropBehavior DragEffect="Copy" DropAction="Copy" /> </i:Interaction.Behaviors> </Image>

9. Add more Image control and repeat step 8.
   

   XAML

   Copy Code

   <Intersoft:WrapPanel... > ... <Image Source="/PerformCopyOperationDuringDropEvent;component/Image/Favorite.png" Width="64" Height="64" Margin="8"> <i:Interaction.Behaviors> <Intersoft:DragDropBehavior DragEffect="Copy" DropAction="Copy" /> </i:Interaction.Behaviors> </Image> <Image Source="/PerformCopyOperationDuringDropEvent;component/Image/Download.png" Width="64" Height="64" Margin="8"> <i:Interaction.Behaviors> <Intersoft:DragDropBehavior DragEffect="Copy" DropAction="Copy" /> </i:Interaction.Behaviors> </Image> </Intersoft:WrapPanel>

   
   
10. Add more UXWindow and repeat step 4-6.
    

    XAML	Copy Code
    <Intersoft:UXWindow Header="D:\Data" Height="150" Width="300" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,22" IsClientVisible="True" IsActive="True"> <Intersoft:WrapPanel Background="White"> <i:Interaction.Behaviors> <Intersoft:DropTargetBehavior Drop="DropTargetBehavior_Drop" /> </i:Interaction.Behaviors> </Intersoft:WrapPanel> </Intersoft:UXWindow>

    
    
11. Add Image control to the WrapPanel in UXWindow control and repeat step 7-8.
    

    XAML

    Copy Code

    <Intersoft:UXWindow... > <Intersoft:WrapPanel... > ... <Image Source="/PerformCopyOperationDuringDropEvent;component/Image/Document.png" Width="64" Height="64" Margin="8"> <i:Interaction.Behaviors> <Intersoft:DragDropBehavior DragEffect="Copy" DropAction="Copy" /> </i:Interaction.Behaviors> </Image> <Image Source="/PerformCopyOperationDuringDropEvent;component/Image/Report.png" Width="64" Height="64" Margin="8"> <i:Interaction.Behaviors> <Intersoft:DragDropBehavior DragEffect="Copy" DropAction="Copy" /> </i:Interaction.Behaviors> </Image> <Image Source="/PerformCopyOperationDuringDropEvent;component/Image/Text.png" Width="64" Height="64" Margin="8"> <i:Interaction.Behaviors> <Intersoft:DragDropBehavior DragEffect="Copy" DropAction="Copy" /> </i:Interaction.Behaviors> </Image> </Intersoft:WrapPanel> </Intersoft:UXWindow>

    
    
12. Open MainPage.xaml.cs and insert a code for copying logic when drop event occur.
    

    C#

    Copy Code

    private void DropTargetBehavior_Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e) { Image image = e.GetSourceElement() as Image; Image copyImage = new Image() { Source = image.Source }; copyImage.Width = 64; copyImage.Height = 64; copyImage.Margin = new Thickness(8); List<UIElement> dropObjects = new List<UIElement>(); dropObjects.Add(copyImage); e.SetDropElements(dropObjects); }

13. Finally, save and run the project.

After the application is running in the browser, you can try to click on the image it will active the drag drop behavior. Then try to drop the item into another window it will copy the item into the window you move in, such as shown in the following figure.

Conclusion

In this walkthrough, you have learned how to create ClientUI project using project template. You also learned how to using drag drop behavior for copy operation.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

MainPage.xaml.cs

See Also