Project Description

What is it all about?

The component advadev Drag Drop allows you to extend UI elements (please see “Notes” below) of a WPF application with a drag-drop-functionality. It allows dragging individual UI elements and moving them inside of the user interface. If a UI element is dropped previously user-defined actions can be executed

Different UI elements can be grouped together. During a drag-drop-action UI elements can have the following states:
  • A element can be the dragged element
  • A element can be in the same group as the dragged element
  • A element can be below of the dragged element
Depending on the state the appearance of a UI element can be changed. As example here two pictures of a demo application. On the left side you can see the state before a drag-drop-action. On the right side you can see the state during a drag-drop-action of the upper group:

731864

A drag-drop-action can be executed by mouse or by touch

What is the intention of this component?

The main use case in mind is to use this component in all application with the need to visually move UI elements (and maybe execute actions afterwards). The difference to the “standard” drag-drop is that the UI elements itself will be moved

How can I use this component?

You must add this component as reference to you WPF application. The complete area in which drag-drop should happen must be placed inside of a DragDropContainer-Control. Afterwards you can define “attached properties” on all UI elements which should take place in drag-drop-actions. The following properties are available:
  • Drag Drop Group Name: A UI element will be assigned to a group. This property must be set
  • Is Draggable: Must be true if the element should be draggable
  • Is Drop Target: Must be true if it is a possible drop-target-element
  • Is Dragged: This flag is set if the UI element is the dragged one
  • Is Drag Active: This flag is set if a UI element of the same group is dragged
  • Is Active Drop Target: This flag is set if the dragged UI element is above
  • Source Drop Command: This command will be executed if the dragged element is dropped
  • Source Drop Command Parameter: An optional parameter for the source command
  • Target Drop Command: This command will be executed if above a UI element a dragged UI element of the same group is dropped
  • Target Drop Command Parameter: An optional parameter for the target command

Example Code

…
xmlns:advadevDragDrop="clr-namespace:advadev.Windows.DragDrop;assembly=advadev.Windows.DragDrop"
…
<advadevDragDrop:DragDropContainer><Button Content="DEMO"
            advadevDragDrop:DragDropContainer.DragDropGroupName="dragDropGroup1"
            advadevDragDrop:DragDropContainer.IsDraggable="True"
            advadevDragDrop:DragDropContainer.IsDropTarget="False" /><Image Name="image" Source="" BorderBrush="Black"
           advadevDragDrop:DragDropContainer.DragDropGroupName="dragDropGroup1"
           advadevDragDrop:DragDropContainer.IsDraggable="False"
           advadevDragDrop:DragDropContainer.IsDropTarget="True"
           advadevDragDrop:DragDropContainer.TargetDropCommand="{Binding …}"
           advadevDragDrop:DragDropContainer.TargetDropCommandParameter="{Binding …}" /><Trigger Property="advadevDragDrop:DragDropContainer.IsDragActive" Value="True">
        <Setter TargetName="image" Property="BorderBrush" Value="Orange" />
    </Trigger><Trigger Property="advadevDragDrop:DragDropContainer.IsActiveDropTarget" Value="True">
       <Setter TargetName="image" Property="BorderBrush" Value="YellowGreen" />
    </Trigger></advadevDragDrop:DragDropContainer>

Notes

  • In the complete documentation we are always talking about „UI elements“. That means in our vocabulary “element in the user interface” – not “controls derived from the class UIElement”. In fact controls must be derived from the class FrameworkElement to be usable 

Thomas Gysser | www.advadev.de | advadev.blogspot.de
... advanced development

Last edited Sep 23, 2013 at 9:59 AM by advadev, version 11