Intersoft ClientUI Documentation
Walkthrough: Perform Drag-drop using API
Intersoft ClientUI 8 > ClientUI Fundamentals > Drag-drop Framework Overview > Drag-drop Framework Walkthroughs > Walkthrough: Perform Drag-drop using API

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

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

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"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        x:Class="DragDropAPI.MainPage" 
        Title="MainPage Page"
        d:DesignWidth="640" d:DesignHeight="480">

    <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>
        <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>
</Intersoft:UXPage>

MainPage.xaml.cs

C#
Copy Code 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Intersoft.Client.UI.Navigation;
using Intersoft.Client.UI.Controls.Interactivity;
using Intersoft.Client.Framework;

namespace DragDropAPI
{
    public partial class MainPage : UXPage
    {
        private bool IsMouseLeftButtonDown { get; set; }
        private Point StartPosition { get; set; }

        public MainPage()
        {
            InitializeComponent();

            ISEventManager.RegisterInstanceHandler(this.wrapPanel2, DragDrop.DropEvent, new Intersoft.Client.UI.Controls.Interactivity.DragEventHandler(Drop), false);
        }

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Image image = sender as Image;
            image.CaptureMouse();

            this.IsMouseLeftButtonDown = true;
            this.StartPosition = e.GetPosition(null);
        }

        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);
                }
            }
        }

        private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Image image = sender as Image;
            image.ReleaseMouseCapture();

            this.IsMouseLeftButtonDown = false;
        }

        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);
        }

        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

        }
    }
}
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