WinForm DualList Component

By Fons Sonnemans (March 2002)

Introduction

This article demonstrates the use of the DualList component in a Microsoft .NET WinForm application. It doesn't explain how the component was written, you can figure that out by examining the C# source code (see download).

Problem Description

In many of my applications there are dialogs in which you have two listboxes and some buttons to move (or copy) item(s) from one listbox to the other. This seems very easy to implement, but it isn't. You have to implement a lot of features:

Actions: Move Selected, Copy Selected, Move All, Copy All
DoubleClick support, inclusive (re)setting the Default button
Select next item
Enable and disable buttons
MultiSelect support

You don't want to program this in every form which has 2 listboxes and some move or copy buttons. This would lead to lots of (duplicate) code which is very difficult to maintain. A generic (reusable) solution is required.

Class vs. Control vs. Component

There are three possible solutions: a class, a (composite) control and a component.

Class
Within your form you create an instances of this class and initialize it with an 'action' (move or copy and selected or all), 2 listboxes and 1 button. You need an instance for each button on your form. The class handles all events of the controls (e.g. Button.Click, ListBox.DoubleClick) and executes the requested action. The solution works fine but is not user-friendly. You have to do everything from code, you can not use the designer.

Composite control
This composite control would hold the 2 listboxes and 8 buttons. One button for each action in each direction. The user (programmer) can set the properties and handle events easily using the designer. It has the disadvantage that it is not very flexible. The layout of the composite controls will need lot's of special properties which not contribute to the problem description (low cohesion).

Component
The component is a "best of both worlds" solution. You can set it's properties using the designer and doesn't need any layout properties because it doesn't contain any controls.

DualList Component

The DualList component takes care of all the features mentioned in the problem domain. You can place it on the form as a sort of "invisible control". Next you set its behavior properties: Action, Button, ListBoxFrom and ListBoxTo. Optionally you can set the DoubleClickSupport and EnableDisableSupport properties.

The DualList handles all events of the controls (e.g. Button.Click, ListBox.DoubleClick) and executes the requested action.

+DualList : Component
{Implements: IComponent, IDisposable}

DualList(in container : IContainer)

DualList()

CopyAll() : Void

CopySelected() : Void

MoveAll() : Void

MoveSelected() : Void

Action : DualListAction

Button : Button

DoubleClickSupport : Boolean

AutoDisableButton : Boolean

ListBoxFrom : ListBox

ListBoxTo : ListBox

AfterAction : AfterActionHandler

BeforeAction : BeforeActionHandler

Usage

The following steps explain how you can use the DualList component in your WinForm projects.

Step1 - Download the Zip file and extract it.
Download DualList.zip and extract it to you local harddrive. This version was compiled using the final version of Microsoft .NET Framework SDK. The C# source of the DualList component is included.

Step2 - Design the Form
Create a form, place 2 listboxes and the required buttons on the form. The example only uses an Add and Remove button. These buttons move the selected items between the listboxes. Add some items to the listboxes.

You can off course set the Sorted property of the listboxes to True.

Step3 - Add the DualList component to the Toolbox
Right-click the Toolbox and select 'Customize Toolbox...' Select the '.NET Framework Components' Tab and click the 'Browse' button.

Open the 'ReflectionITWinFormComponents.dll' in the DualList\ComponentLibrary\Bin\Debug folder. The 'DualList' is checked and will be visible in the Toolbox. Click OK.

Step4 - Add a DualList to the form and set its properties
Drag two DualList components on your form.

Set the properties for both components

Step5 - Run the application

DualList events

The DualList component has 2 events. The BeforeAction event can be used to Cancel the action or to change the moved/copied Item. The AfterAction event can be used to process your changes (e.g. write them to your database, select the moved/copied item).

private void dualListAdd_AfterAction(object sender, DualListActionEventArgs e)
{
listAssigned.SelectedIndex = e.Index;
}

private void dualListDelete_AfterAction(object sender, DualListActionEventArgs e)
{
listAvailable.SelectedIndex = e.Index;
}

Conclusion

The DualList Component is an easy solution for a difficult feature. It takes care of all logic needed to move and or copy items from one ListBox to another. It demonstrates the possibilities of .NET components. A very new, powerful feature of the .NET framework.

You can off course extend the class with Drag-and-drop support. That would really complete it. I might do it myself in the near future. Check this site for updates.

Any suggestions and feedback for improving this article is most welcome. Send your suggestions and feedback to Fons.Sonnemans@reflectionit.nl

Hot Articles