Intersoft ClientUI Documentation
UXPanel Class

Provide an abstact class for UXPanel implementation.
Object Model
UXPanel ClassISFramework Class
Public MustInherit Class UXPanel 
   Inherits Intersoft.Client.Framework.ISPanel
   Implements Intersoft.Client.Framework.IFramework, Intersoft.Client.Framework.ILicensing 
Dim instance As UXPanel
public abstract class UXPanel : Intersoft.Client.Framework.ISPanel, Intersoft.Client.Framework.IFramework, Intersoft.Client.Framework.ILicensing  
public ref class UXPanel abstract : public Intersoft.Client.Framework.ISPanel, Intersoft.Client.Framework.IFramework, Intersoft.Client.Framework.ILicensing  

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.

  • AllowDropItem
    AllowDropItem indicates whether the panel can accept drop. (Making the panel as droppable target).
  • AllowMoveItem
    AllowMoveItem indicates whether the item can be moved to other droppable target.
  • AllowReorderItem
    AllowReorderItem indicates whether the item can be reordered within the panel.
  • AllowRemoveItem
    AllowRemoveItem indicates whether the item can be removed from panel by dropping it at empty space.
  • DragMode
    DragMode indicates the drag action, whether it is a Copy or a Move action.
    Move action will move the object from its original container to the target droppable container, while copy action will require user to create the copy object and insert it to the target droppable container. Note that when you set the DragMode property to Copy action, you can not reorder the item even though AllowReorderItem is set to true.

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:

  • DragMode = Move, AllowRemoveItem = False
    Using this configuration, the tooltip will show a "Move" visual hint when you initiated a drag operation on an object. As soon as the object is dragged out from the panel, the tooltip will show a "Not Allowed" visual hint until the object is over a droppable target, or when the source panel receives a command to set the tooltip back to "Move".
  • DragMode = Move, AllowRemoveItem = True
    Using this configuration, the tooltip will show a "Move" visual hint when you initiated a drag operation on an object. As soon as the object is dragged out from the panel, the tooltip will show a"Remove" visual hint.

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.

Enable Drag Drop in standard ListBox control
Copy Code
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True" AllowRemoveItem="True"/>                      
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate2">
        <Intersoft:UXStackPanel Orientation="Vertical" AllowMoveItem="True" AllowDropItem="True" AllowReorderItem="True"/>                     
<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"/>
    <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
        <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox1}" VerticalAlignment="Center"/>
    <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
        <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}" VerticalAlignment="Center"/>
    <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"/>
        <Intersoft:FieldLabel Header="Selected Index: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
                <TextBlock Text="{Binding SelectedIndex, ElementName=ListBox2}" VerticalAlignment="Center"/>
        <Intersoft:FieldLabel Header="Selected Item: " HeaderWidth="100" HorizontalHeaderAlignment="Right">
                <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox2}" VerticalAlignment="Center"/>

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.

Inheritance Hierarchy



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

See Also


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


Interactive Panels Overview
Drag-drop Framework Overview

Send Feedback