Intersoft ClientUI Documentation
Walkthrough: Enable Simple Drag Drop between Two Visual Elements
Intersoft ClientUI 8 > ClientUI Fundamentals > Drag-drop Framework Overview > Drag-drop Framework Walkthroughs > Walkthrough: Enable Simple Drag Drop between Two Visual Elements

This walkthrough shows you how to enable simple drag drop between two visual elements.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

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 Drop

This section shows you how to enable simple drag drop between two visual elements.

  1. First declare interactivity in your UXPage.
    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.
    Margin 0 22 0 0
    VerticalAlignment Top
    Width 300
    Height 150
    IsActive True
    IsClientVisible True
    Header My Documents

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

  5. Add UXScrollViewer control to the UXWindow control.
    XAML
    Copy Code 
    <Intersoft:UXWindow... >
    <Intersoft:UXScrollViewer>
    </Intersoft:UXScrollViewer>
</Intersoft:UXWindow>

  6. Add WrapPanel to the UXScrollViewer and set the Background property to White.
    XAML
    Copy Code 
    <Intersoft:UXWindow... >
    <Intersoft:UXScrollViewer>
        <Intersoft:WrapPanel Background="White">
            ...
        </Intersoft:WrapPanel>
    </Intersoft:UXScrollViewer>
</Intersoft:UXWindow>
  7. Add DropTargetBehavior to the WrapPanel and set the TooltipText property to Move.
    XAML
    Copy Code 
    <Intersoft:WrapPanel... >
    <i:Interaction.Behaviors>
        <Intersoft:DropTargetBehavior TooltipText="Move" />
    </i:Interaction.Behaviors>
</Intersoft:WrapPanel>
  8. Add Image control to the WrapPanel and set the Source property to /EnableSimpleDDBetweenTwoVisualElements;component/Images/Document.png, the Width property to 64 and the Height property to 64.
    XAML
    Copy Code 
    <Intersoft:WrapPanel... >
    <i:Interaction.Behaviors>
        ...
    </i:Interaction.Behaviors>
    <Image Source="/EnableSimpleDDBetweenTwoVisualElements;component/Images/Document.png" Width="64" Height="64">
    </Image>
</Intersoft:WrapPanel>

  9. Add DragDropBehavior to the Image control and set DragEffect property to Move and DropAction property to Move.
    XAML
    Copy Code 
    <Image... >
    <i:Interaction.Behaviors>
        <Intersoft:DragDropBehavior DragEffect="Move" DropAction="Move" />
    </i:Interaction.Behaviors>
</Image>
  10. Add more UXWindow and repeat step 4-7.
    XAML
    Copy Code 
    <Intersoft:UXWindow Margin="0 22 0 0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="150" IsActive="True" IsClientVisible="True" Header="My Documents">
    <ScrollViewer>
        <Intersoft:WrapPanel Background="White">
            <i:Interaction.Behaviors>
                <Intersoft:DropTargetBehavior TooltipText="Move" />
            </i:Interaction.Behaviors>
        </Intersoft:WrapPanel>
    </ScrollViewer>
</Intersoft:UXWindow>

  11. Add Image control to the WrapPanel and repeat step 8-9.
    XAML
    Copy Code 
    <Intersoft:UXWindow... >
    <ScrollViewer>
        <Intersoft:WrapPanel... >
            ...
            <Image Source="/EnableSimpleDDBetweenTwoVisualElements;component/Images/Picture.png" Width="64" Height="64">
                <i:Interaction.Behaviors>
                    <Intersoft:DragDropBehavior DragEffect="Move" DropAction="Move" />
                </i:Interaction.Behaviors>
            </Image>
            <Image Source="/EnableSimpleDDBetweenTwoVisualElements;component/Images/Text.png" Width="64" Height="64">
                <i:Interaction.Behaviors>
                    <Intersoft:DragDropBehavior DragEffect="Move" />
                </i:Interaction.Behaviors>
            </Image>
        </Intersoft:WrapPanel>
    </ScrollViewer>
</Intersoft:UXWindow>

  12. Finally, save and run the project.

After the application is running in the browser, you can try to drag and drop the image between window, 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 create a simple drag and drop between two visual elements.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

XAML
Copy Code 
<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="EnableSimpleDDBetweenTwoVisualElements.MainPage" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        Title="MainPage Page">
        <Grid x:Name="LayoutRoot">
        <Grid>
            <Intersoft:UXWindow Margin="0 22 0 0" VerticalAlignment="Top" Width="300" Height="150" IsActive="True" IsClientVisible="True" Header="My Documents">
                <ScrollViewer>
                    <Intersoft:WrapPanel Background="White">
                        <i:Interaction.Behaviors>
                            <Intersoft:DropTargetBehavior TooltipText="Move" />
                        </i:Interaction.Behaviors>
                        <Image Source="/EnableSimpleDDBetweenTwoVisualElements;component/Images/Document.png" Width="64" Height="64">
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" DropAction="Move" />
                            </i:Interaction.Behaviors>
                        </Image>
                    </Intersoft:WrapPanel>
                </ScrollViewer>
            </Intersoft:UXWindow>
            <Intersoft:UXWindow Margin="0 22 0 0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="150" IsActive="True" IsClientVisible="True" Header="My Documents">
                <ScrollViewer>
                    <Intersoft:WrapPanel Background="White">
                        <i:Interaction.Behaviors>
                            <Intersoft:DropTargetBehavior TooltipText="Move" />
                        </i:Interaction.Behaviors>
                        <Image Source="/EnableSimpleDDBetweenTwoVisualElements;component/Images/Picture.png" Width="64" Height="64">
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" DropAction="Move" />
                            </i:Interaction.Behaviors>
                        </Image>
                        <Image Source="/EnableSimpleDDBetweenTwoVisualElements;component/Images/Text.png" Width="64" Height="64">
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" />
                            </i:Interaction.Behaviors>
                        </Image>
                    </Intersoft:WrapPanel>
                </ScrollViewer>
            </Intersoft:UXWindow>
        </Grid>
        </Grid>
</Intersoft:UXPage>
See Also
UXWindow Class

Concepts

Drag-drop Framework Overview

Other Resources

Locating the Samples in Local Installation
Drag-drop Framework How-to Topics
Walkthroughs and How-to Topics