Skip to content

Latest commit

 

History

History
56 lines (46 loc) · 2.57 KB

README.md

File metadata and controls

56 lines (46 loc) · 2.57 KB
Raw

DragDrop

example workflow

Description

WPF component that allows to extend UI elements of application with a drag-drop-functionality. Library supports MVVM pattern and allows to use drag-drop operations with touch. The idea of writing this library arose as a result of working with https://dragdrop.codeplex.com/ and the desire to expand its capabilities.

Features

  • MVVM support (the logic for the drag and drop can be placed in a ViewModel. No code needs to be placed in codebehind)
  • Touch interaction support
  • Works with controls like ItemsControl
  • Ability to setup intersection method
  • Ability to display hints to give the user visual feedback of the operation in progress
  • Ability to use custom 'thumb' for dragging
  • Ability to setup angle for drag operation start

How to use

Declare drag drop container:

<dragDrop:DragDropContainer>
...
</dragDrop:DragDropContainer>

Declare drag drop source (Ellipse is used for demonstration purposes):

<Ellipse x:Name="sourceEllipse" Height="80" Width="80" Fill="{Binding Color}"
         dragDrop:DragDropContainer.DragDropGroupName="dragDropGroup1"
         dragDrop:DragDropContainer.IsDraggable="True"
         dragDrop:DragDropContainer.IsDropTarget="False"
         dragDrop:DragDropContainer.SourceDropCommandParameter="{Binding}">
</Ellipse>

Declare drag drop target (Ellipse is used for demonstration purposes):

 <Ellipse x:Name="targetEllipse" Fill="{Binding Color}"
         dragDrop:DragDropContainer.DragDropGroupName="dragDropGroup1"
         dragDrop:DragDropContainer.IsDraggable="False"
         dragDrop:DragDropContainer.IsDropTarget="True"
         dragDrop:DragDropContainer.SourceLeaveTargetCommand="{Binding SourceLeaveTargetCommand}"
         dragDrop:DragDropContainer.SourceReachTargetCommand="{Binding SourceReachTargetCommand}"
         dragDrop:DragDropContainer.TargetDropCommand="{Binding ItemDropCommand}"/>

Where:

  • SourceReachTargetCommand - the command that is executed when the source element of the drag reaches the target element
  • SourceLeaveTargetCommand - the command that is executed when the source element of the drag leaves the target element
  • TargetDropCommand - the command that is executed when customer drops source element on the target element

Additional settings:

  • DragThumbTemplate, DragThumbContext - allow to customize ui of dragged element
  • MinDragAngle, MaxDragAngle - allow to specify settings for drag start operation
  • TargetCollisionMode - allows specify intersection method