Intersoft ClientUI Documentation
Walkthrough: Customize Shadow Element during Drag Event
Intersoft ClientUI 8 > ClientUI Fundamentals > Drag-drop Framework Overview > Drag-drop Framework Walkthroughs > Walkthrough: Customize Shadow Element during Drag Event

This walkthrough shows you how to customize the drag shadow element during the drag event.

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 with a shadow effect.

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 Microsoft Interactivity namespace into the project.
  5. Add the DropTargetBehavior inside the WrapPanel. Set the TooltipText property of DropTargetBehavior into Move to My Documents.
    Note: The Behaviors controls will not shown on Visual Studio 2010, moderately it is shown from the Microsoft Expression Blend 4 toolbox.
  6. Add the Image control inside the WrapPanel. Set the following properties of Image as below.
    Properties Value
    HorizontalAlignment Left
    VerticalAlignment Top
    Header Source
    Height 64
    Width 64
    Source Favorite.png

  7. Add the DragDropBehavior inside the Image. Set the DragEffect property of DragDropBehavior into Move.
  8. Repeat steps number 6-7. Set the Source property of Image into Download.png.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot">
    <Intersoft:UXWindow Name="uXWindow1" Header="My Documents" Height="150" Width="300" HorizontalAlignment="Center" VerticalAlignment="Top" IsClientVisible="True" IsActive="True">
        <Grid>
            <Intersoft:UXScrollViewer Name="uXScrollViewer1">
                <Intersoft:WrapPanel Name="wrapPanel1">
                    <i:Interaction.Behaviors>
                        <Intersoft:DropTargetBehavior TooltipText="Move to My Documents"/>
                    </i:Interaction.Behaviors>
                    <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Favorite.png">
                        <i:Interaction.Behaviors>
                            <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
                        </i:Interaction.Behaviors>
                    </Image>
                    <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Download.png">
                        <i:Interaction.Behaviors>
                            <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
                        </i:Interaction.Behaviors>
                    </Image>
                </Intersoft:WrapPanel>
            </Intersoft:UXScrollViewer>
        </Grid>
    </Intersoft:UXWindow>
</Grid>

  9. Create another UXWindow as you have created in the previous steps.
  10. Set the TooltipText property of DropTargetBehavior into Move to D:\Data.
  11. Add three additional Image and set each of the Source property of Image into Document.png, Text.png and Picture.png as you have created on steps number 6 and 7.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot">
    ...
    <Intersoft:UXWindow Name="uXWindow2" Header="D:\Data" Height="150" Width="300" VerticalAlignment="Bottom" HorizontalAlignment="Center" IsClientVisible="True">
        <Intersoft:UXScrollViewer Name="uXScrollViewer2">
            <Intersoft:WrapPanel Name="wrapPanel2">
                <i:Interaction.Behaviors>
                    <Intersoft:DropTargetBehavior TooltipText="Move to D:\Data"/>
                </i:Interaction.Behaviors>
                <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Document.png">
                    <i:Interaction.Behaviors>
                        <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
                    </i:Interaction.Behaviors>
                </Image>
                <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Text.png">
                    <i:Interaction.Behaviors>
                        <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
                    </i:Interaction.Behaviors>
                </Image>
                <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Picture.png">
                    <i:Interaction.Behaviors>
                        <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
                    </i:Interaction.Behaviors>
                </Image>
            </Intersoft:WrapPanel>
        </Intersoft:UXScrollViewer>
    </Intersoft:UXWindow>
</Grid>

Customizing Drag Shadow at ShadowInit event

This section steps you through the process of creating a DragDrop handler that contains the DragEvent with shadow effect for the image.

To customize the DragShadow

  1. Create the Image_ShadowInit method as the ShadowInit event handler.
    C#
    Copy Code 
    private void Image_ShadowInit(object sender, Intersoft.Client.UI.Controls.Interactivity.DragDropShadowEventArgs e)
{
    Grid shadow = new Grid();
    shadow.Height = 64;
    shadow.Width = 64;

    Grid filter = new Grid();
    filter.Background = new SolidColorBrush(Color.FromArgb(150, 0, 0, 0));

    Image originalShadow = e.ShadowObject as Image;
    Image image = new Image() { Source = originalShadow.Source };

    shadow.Children.Add(image);
    shadow.Children.Add(filter);

    e.ShadowObject = shadow;
}
  2. Set the Image_ShadowInit event to all the Image component.
    XAML
    Copy Code 
    <Intersoft:WrapPanel Name="wrapPanel1">
    ...
    <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Favorite.png">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
        </i:Interaction.Behaviors>
    </Image>
    <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Download.png">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
        </i:Interaction.Behaviors>
    </Image>
</Intersoft:WrapPanel>

    XAML
    Copy Code 
    <Intersoft:WrapPanel Name="wrapPanel2">
    ...
    <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Document.png">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
        </i:Interaction.Behaviors>
    </Image>
    <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Text.png">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
        </i:Interaction.Behaviors>
    </Image>
    <Image HorizontalAlignment="Left" VerticalAlignment="Top" Height="64" Width="64" Source="/DragShadow;component/Assets/Images/Picture.png">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropBehavior DragEffect="Move" ShadowInit="Image_ShadowInit"/>
        </i:Interaction.Behaviors>
    </Image>
</Intersoft:WrapPanel>
  3. 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 DragEvent handler with shadow effect into the images.

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
DragDropBehavior Class
DropTargetBehavior 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