Intersoft ClientUI Documentation
How-to: Copy The Dragged Object when Dropped to The Drop Target
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Drag-drop Framework Overview > Drag-drop Framework How-to Topics > How-to: Copy The Dragged Object when Dropped to The Drop Target

Glossary Item Box

The following examples show how to copy the dragged object to the drop target.

Example

Description

You can perform a number of tasks during the Drop event. One of the common scenarios is to copy the dragged object to the drop target.

The following code shows how create a copy of dragged object and add it to drop target.

All drag-drop events are built on routed event architecture including the DropEvent. To learn more about routed event, see Routed Events overview.

Code

XAML Copy Code 
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
    <i:Interaction.Behaviors>
        <Intersoft:DragDropBehavior IsDragable="False" DragEffect="Copy"/>
    </i:Interaction.Behaviors>
    <Image Source="folder.png" Height="64" Width="64">
        <i:Interaction.Behaviors>
                <Intersoft:DragDropPointBehavior IsDragable="True"/>
        </i:Interaction.Behaviors>
    </Image>
    <TextBlock Text="My Archive" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="100" Width="100" Background="Gray">
    <i:Interaction.Behaviors>
        <Intersoft:DropTargetBehavior TooltipText="Drop here." DropBehavior="Replace"/>
    </i:Interaction.Behaviors>
</Grid>
C# Copy Code 
public MainPage()
{
    // Required to initialize variables
    InitializeComponent();

    ISEventManager.RegisterInstanceHandler(
        this.LayoutRoot, // any element in the routed path which applicable in your scenario
        DragDrop.DropEvent, // the routed event
        new Intersoft.Client.UI.Controls.Interactivity.DragEventHandler(DropTarget_Drop), // the event handler
        true);
}

private void DropTarget_Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e)
{
    // get the source object.
    UIElement sourceElement = e.GetSourceElement();
    StackPanel panel = sourceElement as StackPanel;
    Image image = VisualTreeHelper.GetChild(panel, 0) as Image;
    TextBlock text = VisualTreeHelper.GetChild(panel, 1) as TextBlock;

    // create the copy object.
    StackPanel copyPanel = new StackPanel() { HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center };
    Image copyImage = new Image() { Source = image.Source, Height = 64, Width = 64 };
    TextBlock copyText = new TextBlock() { Text = text.Text };
    copyPanel.Children.Add(copyImage);
    copyPanel.Children.Add(copyText);
    copyPanel.Opacity = 0; // to make the return animation smooth.

    // register the copy object.
    List<UIElement> elements = new List<UIElement>();
    elements.Add(copyPanel);
    e.SetDropElements(elements); // this method basically set the object that going to be added to the drop target
                                 // since this is copy scenario, we add the copied object, but theoritically you can use any object even multiple objects
}

Example

Description

The drop target can be any UIElements or Controls, not necessarily a Panel. Since its not a panel, the DropBehavior must be set to Custom.

The following code shows how create a copy of dragged object and add it to ListBox.

All drag-drop events are built on routed event architecture. To learn more about routed event, see Routed Events overview.

Code

XAML Copy Code 
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
    <i:Interaction.Behaviors>
        <Intersoft:DragDropBehavior IsDragable="False" DragEffect="Copy"/>
    </i:Interaction.Behaviors>
    <Image Source="folder.png" Height="64" Width="64">
        <i:Interaction.Behaviors>
                <Intersoft:DragDropPointBehavior IsDragable="True"/>
        </i:Interaction.Behaviors>
    </Image>
    <TextBlock Text="My Archive" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<ListBox HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="100">
    <i:Interaction.Behaviors>
        <Intersoft:DropTargetBehavior DropBehavior="Custom" TooltipText="Drop here."/>
    </i:Interaction.Behaviors>
</ListBox>
C# Copy Code 
public MainPage()
{
    // Required to initialize variables
    InitializeComponent();

    ISEventManager.RegisterInstanceHandler(
        this.LayoutRoot, // any element in the routed path which applicable in your scenario
        DragDrop.DropEvent, // the routed event
        new Intersoft.Client.UI.Controls.Interactivity.DragEventHandler(DropTarget_Drop), // the event handler
        true);
}

private void DropTarget_Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e)
{
    // get the source object.
    UIElement sourceElement = e.GetSourceElement();
    StackPanel panel = sourceElement as StackPanel;
    Image image = VisualTreeHelper.GetChild(panel, 0) as Image;
    TextBlock text = VisualTreeHelper.GetChild(panel, 1) as TextBlock;

    // create the copy object.
    ListBoxItem copyItem = new ListBoxItem();
    copyItem.Content = text.Text;
            
    // get the drop target.
    ListBox dropTarget = e.GetDropTarget() as ListBox;
    dropTarget.Items.Add(copyItem);          
}

See Also

©2012. All Rights Reserved.