In addition to the behaviors and API, ClientUI's drag-drop framework also provides panels that include built-in drag and drop functionality which makes drag and drop implementation very simple and easy. These panels are built on the top of core drag-drop framework and can be consumed by ItemsControl to enabled drag-drop functionality for its items collection.
UXPanel is the base class of all panel controls in ClientUI that expose the drag-drop capability. Every item registered under UXPanel will automatically have a DragDropBehavior attached, so you do not need to manually register the DragDropBehavior to the UXPanelthe UXPanel, unless you want to override the drag-drop behaviors for certain items.
UXPanel has UXPanel has a set of specific properties that controls the drag and drop behaviors which are explained in the following list.
Each property above unlocks specific actions that you can do. Depending on your requirements, you will need enable or disable several settings.
The following section discusses the combination of settings to achieve common drag-drop scenarios.
When working with drag-drop, visual hints is important to notify users of the current drag-drop status. UXPanel provides UXPanel provides built-in visual hints - such as predefined tooltip - that depends on the settings and the current user action, which significantly simplifies the development process to create fluid drag and drop user experiences.
Generally there are three main entry points where you can effectively customize the visual hints:
Integration With ItemsControl
ItemsControl such as ListBox (native), UXListBox, UXFlow, and many others use Panel to arrange their items. You can change the Panel used to arrange those items from ItemsPanel property. This gives you the flexibility to choose any panels in order to control the arrangement of your items. You can use UXPanel to UXPanel to easily add drag and drop functionality to your items control.
The following example shows you how to enable drag and drop in a standard ListBox control.
As shown in the above example, you can change the ItemsPanel of each ListBox to a UXPanel (in this case UXStackPanel) which enables you to easily add drag and drop features such as AllowDropItem, AllowMoveItem, and more.
When an item is removed, moved or reordered in an ItemsControl such as ListBox, its item collection will be automatically synchronized. This powerful feature also works in data bound scenarios where a collection of items are bound to the ListBox through ItemsSource.
Working with Unbound ItemsControl and Bound ItemsControl
As illustrated in the above code example, you can change the ItemsPanel of an ItemsControl with UXPanel to enable drag and drop operations in ItemsControl. The ItemsControl can be configured in either unbound or bound mode.
When moving item between ItemsControl it is recommended to use the same mode for both ItemsControl (source and destination) to enable the automatic items synchronization. However, if your scenario requires the item to be moved using different mode, you need to handle the synchronization manually.
To learn how to handle the item drop from different bound mode, see How-to: Move item from bound ListBox to unbound ListBox using UXPanel and How-to: Move item from unbound ListBox to bound ListBox using UXPanel.
Working with Transformable Item
Having the understanding of the concept that drag-drop operations can be easily enabled in any controls that derive from ItemsControl, your application may consist of several different types of dragable ItemsControl where the drag-drop operations should work together across these controls.
ClientUI introduces numerous built-in dragable ItemsControl such as UXListBox, UXAccordion and UXDock. You can easily drag item from one control to another without requiring additional code thanks to the ITransformInfo interface implemented by each item control.
Working with ShadowInit Event
The following example code demonstrates how to handle ShadowInit event to customize drag shadow object for UXPanel items.
public abstract class UXPanel : ISPanel
The following table summarizes the members exposed in this class.
|AllowDropItem||Gets or sets a value that determines whether external item can be dropped into this control.|
|AllowMoveItem||Gets or sets a value that determines whether the Items in this control can be moved to other controls.|
|AllowRemoveItem||Gets or sets a value that determines whether the Items in this control can be removed.|
|AllowReorderItem||Gets or sets a value that determines whether external the Items in this control can be repositioned.|
|DragDropScope||Gets or sets the drag drop scope.|
|DragDropTooltipIcon||Gets or sets the icon of the DragDropTooltip.|
|DragDropTooltipLatency||Gets or sets a value that determines the latency to show the DragDropTooltip.|
|DragDropTooltipOffset||Gets or sets the offset position of the DragDropTooltip.|
|DragDropTooltipStyle||Gets or sets the style of the DragDropTooltip.|
|DragDropTooltipText||Gets or sets the text of the DragDropTooltip.|
|DragMode||Gets or sets the dragging behavior.|
|DropableTargets||Gets the collection of dropable target names.|
|InsertAtTheEnd||Indicates whether this panel should use insert an item at the end when insert index can't be determined.|
|IsControlVisible||Gets a value that determine that the current ux panel is visible. This property need to be set when a parent container is collapsed or resized that cause the entire element is not visible.|
|Latency||Gets or sets a value that determine the latency before the item collection is re-adjusted when an item is inserted, moved or removed.|
|UseAnimation||Gets or sets a value that determine whether the insert, reorder, and removed animation is used.|
|UseShadowDimensionForFillElement||Indicates whether this panel should use shadow object's dimension for the fill element|
|AllowDropItemProperty||Identifies the AllowDropItem dependency property.|
|AllowMoveItemProperty||Identifies the AllowMoveItem dependency property.|
|AllowRemoveItemProperty||Identifies the AllowRemoveItem dependency property.|
|AllowReorderItemProperty||Identifies the AllowReorderItem dependency property.|
|AnimationProperty||Identifies the Animation dependency property.|
|DimensionProperty||Identifies the Dimension dependency property.|
|DragDropScopeProperty||Identifies the DragDropScope dependency property.|
|DragDropTooltipIconProperty||Identifies the DragDropTooltipIcon dependency property.|
|DragDropTooltipLatencyProperty||Identifies the DragDropTooltipLatency dependency property.|
|DragDropTooltipOffsetProperty||Identifies the DragDropTooltipOffset dependency property.|
|DragDropTooltipStyleProperty||Identifies the DragDropTooltipText dependency property.|
|DragDropTooltipTextProperty||Identifies the DragDropTooltipText dependency property.|
|DragModeProperty||Identifies the DragMode dependency property.|
|DropableTargetsProperty||Identifies the DropableTargets dependency property.|
|InsertedEvent||Identifies the Inserted routed event.|
|InsertingEvent||Identifies the Inserting routed event.|
|LatencyProperty||Identifies the Latency dependency property.|
|MovedEvent||Identifies the Moved routed event.|
|MovingEvent||Identifies the Moving routed event.|
|OriginalDimensionProperty||Identifies the OriginalDimension dependency property.|
|RemovedEvent||Identifies the Removed routed event.|
|RemovingEvent||Identifies the Removing routed event.|
|GetAnimation(UIElement)||Gets animation value from target element.|
|GetDimension(UIElement)||Gets dimension value from target element.|
|GetOriginalDimension(UIElement)||Gets original dimension value from target element.|
|SetAnimation(UIElement, Storyboard)||Sets animation value to target element.|
|SetDimension(UIElement, Nullable<Size>)||Sets dimension to target element.|
|SetOriginalDimension(UIElement, Nullable<Size>)||Sets original dimension to target element.|
|AddChild(int, FrameworkElement)||Add new element into specified index.|
|FlagVisibility(bool)||Set the visibility flag of UXPanel. (Used for internal mechanism).|
|GetDropableObject()||Gets the dropable object.|
|IsDropable()||Gets a value that indicates wheter the current panel is dropable.|
|IsDropable(DragEventArgs)||Gets a value indicating whether the target is dropable.|
|IsFillElement(UIElement)||Gets a value that indicates whether the specified element is FillElement.|
|MoveChild(int, int)||Move the element from current index to target index.|
|OverrideFillElement(FrameworkElement)||Overrides fill element.|
|RemoveChild(UIElement)||Removed the UIElement from UXPanel.|
|RemoveChild(int)||Removed the UIElement at specified index.|
|DragEnd||Occurs when drag end.|
|DragEnded||Occurs when drag is ended.|
|DragEnter||Occurs when drag drop is entering drop target.|
|DragInit||Occurs when drag is initializing.|
|DragLeave||Occurs when drag is leaving drop target.|
|DragOver||Occurs when drag drop is hovering drop target.|
|DragReturn||Occurs when drag object is returning to original position.|
|DragReturned||Occurs when drag object is returned to original position.|
|DragStart||Occurs when drag start.|
|DragStarted||Occurs when drag started.|
|Drop||Occurs when drag drop.|
|DropObjectChanged||Occurs when drop object is changed.|
|Inserted||Occurs when an item is being inserted.|
|Inserting||Occurs when an item is going to be inserted.|
|Moved||Occurs when an item is being moved.|
|Moving||Occurs when an item is going to be moved.|
|NativeDragEnter||Occurs when native drag enter event triggered.|
|NativeDragLeave||Occurs when native drag leave event triggered.|
|NativeDragOver||Occurs when native drag over event triggered.|
|NativeDrop||Occurs when native drop event triggered.|
|PrepareDrop||Occurs when before drop event.|
|PreviewDragEnter||Occurs when previewing drag enter.|
|PreviewDragLeave||Occurs when previewing drag enter.|
|PreviewDragOver||Occurs when previewing drag over.|
|PreviewDrop||Occurs when previewing drop.|
|PreviewQueryDropState||Occurs when previewing query drop state.|
|QueryDropState||Occurs when querying drop state.|
|Removed||Occurs when an item is being removed.|
|Removing||Occurs when an item is going to be removed.|
|ShadowCreated||Occurs when shadow is created.|
|ShadowInit||Occurs when shadow is initializing.|