Intersoft ClientUI Documentation
How-to: Copy The Dragged Object when Dropped to The Drop Target
| Intersoft ClientUI 8 > ClientUI Fundamentals > Drag-drop Framework Overview > Drag-drop Framework How-to Topics > How-to: Copy The Dragged Object when Dropped to The Drop Target |
The following examples show how to copy the dragged object to the drop target.
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. |
| 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 } |
|
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. |
| 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); } |
|