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.

Introducing UXPanel

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 UXPanel, unless you want to override the drag-drop behaviors for certain items.

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.

Customizing Tooltip

When working with drag-drop, visual hints is important to notify users of the current drag-drop status. 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.

For example:

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 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.

<UserControl.Resources>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True" AllowRemoveItem="True"/>                      
    </ItemsPanelTemplate>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate2">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True"/>                     
    </ItemsPanelTemplate>
</UserControl.Resources>
    
<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Width="250">
    <ListBox x:Name="ListBox1" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
        <ListBoxItem Content="To-do: Prepare Walkthrough Materials"/>
        <ListBoxItem Content="To-do: Prepare Video Materials"/>
        <ListBoxItem Content="To-do: Create Press Release"/>
    </ListBox>
    <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
        <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox1}" VerticalAlignment="Center"/>
    </Intersoft:FieldLabel>
    <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
        <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}" VerticalAlignment="Center"/>
    </Intersoft:FieldLabel>
    </StackPanel>
    <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Width="250">
        <ListBox x:Name="ListBox2" ItemsPanel="{StaticResource ItemsPanelTemplate2}">
                <ListBoxItem Content="To-do: Fix Bug #1337"/>
                <ListBoxItem Content="To-do: Enhance Drag Drop Logic"/>
                <ListBoxItem Content="To-do: Create Sample"/>
        </ListBox>
        <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
                <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox2}" VerticalAlignment="Center"/>
        </Intersoft:FieldLabel>
        <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
                <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox2}" VerticalAlignment="Center"/>
        </Intersoft:FieldLabel>
    </StackPanel>
</Grid>

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.

System.Object
   System.Windows.DependencyObject
      System.Windows.UIElement
         System.Windows.FrameworkElement
            System.Windows.Controls.Panel
               Intersoft.Client.Framework.ISPanel
                  Intersoft.Client.UI.Controls.Interactivity.UXPanel
                     Intersoft.Client.UI.Controls.Interactivity.UXGridPanel
                     Intersoft.Client.UI.Controls.Interactivity.UXStackPanel

Target Platforms: Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

Reference

UXPanel Members
Intersoft.Client.UI.Controls.Interactivity Namespace

Concepts

Interactive Panels Overview
Drag-drop Framework Overview