Best way to select from a list - aren't the two listboxes getting a little old?

Question

How many times have we seen this type of selector:

I was just about to start creating this in a WinForms app, when I thought that others may have some ideas for doing this better. We need it to sort - so the right hand list will need up/down buttons. But this seems so old school. I love devexpress components, and was thinking of asking them if they would consider adding a component that handles this functionality with a slick UI.

I am thinking that a graphical representation of the objects, and a graphical representation of the listboxes - that would be a more intuitive way to move items around.

Has anyone seen an open source project like this?

Answer 1

I have done this type of selection using (essentially) a single CheckListBox that displays each item as an image. Part of the image looks like a LED, which is on (bright) if the item is selected or off (dark) if it is not selected.

This works well if you have a reasonable amount of data to select from, and also works well in a multi-column format if you can predict that the options will have reasonably similar lengths.

Answer 2

If a CheckListBox won't suffice (and it usually will), then the "modern" approach would be to use a ListView or similar component with a "Transfer" column. Render the button inline in that column, one for each row, so that it only takes one click to move an item from one to the other.

You see this everywhere in Vista, usually with hyperlinks as opposed to buttons. Instead of clicking on an item and then choosing an action, you click the action at the item level.

I wouldn't go overboard with slickness as it can impair functionality, but the dual-listbox screen is definitely old-school.

Also, if there's a very large amount of data to manage, it helps to provide a progressive search at the bottom of one or both lists.

Answer 3

Allow users to drag items in/out of list 2, and also drag to reorder in list2. (All items dragged out of list2, and dropped anywhere outside the list, get put back into list 1, in their correct place in the list by alphabetical or natural order.)

Answer 4

You can merge the two list boxes into one with the help of groups (LVGF_GROUPID flag): one group for selected and one for not selected.

You can also implement group membership changes with drag-drop between them. This way single drag-drop can move an item into the other group at the appropriate position, saving most/all of the other buttons.

Additionaly the bottom of each group can have one pseudo item with help text (i.e. "Drag items here to...") that is visible only when relevant.