Editable ListBox

[NickThissen]

Hi,

C# version here.

Here is a ListBox control that allows for in-place editing of its items.


How to use: simply double-click the item you want to edit.


It works quite simple: when an item is double-clicked, a TextBox is displayed right over that item, with its text matching the item text. Once the edit is committed (by pressing Enter or by leaving the textbox, if enabled in the properties), the text is copied back to the listbox item.

Additionally, you can use the Delete key to delete selected items.


There are a few additional properties you may want to use:

- CommitOnLeave - If True, the edited text (in the TextBox) is committed (saved) when the TextBox loses focus (in other words: when you select a different item or some other control)
- CommitOnEnter - If True, the edited text is committed when the Enter or Return key is pressed (there is no support for multi-line items as of now, so you can't have a new-line anyway!)
- AllowDelete - If True, pressing Delete will remove the selected items.
- ConfirmDelete - If True, a confirmation MessageBox is shown before items are removed (via the Delete key)
- ConfirmDeleteText - The message in the 'delete confirmation' MessageBox.



If you are adding only Strings (text) to the ListBox, this is all you'll ever need.
However, if you plan on adding some other object (let's say a custom class) to the ListBox, there is one thing you need to know.

Since my ListBox cannot know what objects you may be adding as its Items, I cannot set the text of those items myself (unless they are simply strings).
For that reason, there is an ItemEdited event which is raised when the user has edited an item that is not a string. You need to handle this event and control how you change the item's text manually.

For a simple example, let's say you have a class Person with two properties: Name and Age. You have overridden the ToString function so that it returns the Name property. This way, if you add instances of this Person class to the ListBox, the ListBox will display the Name property:

Public Class Person
 
    Public Name As String
    Public Age As Integer
 
    Public Overrides Function ToString() As String
        Return Me.Name
    End Function
 
End Class

Now, suppose you are adding some Person objects to my ListBox:

For i As Integer = 0 To 6
            EditListBox1.Items.Add(New Person() With {.Name = "Person " & i, .Age = 3 * i})
        Next

When the user edits the text of a person item, you know that it should change the Name property. But my ListBox does not (and cannot) know that information, so you are in charge of changing the Name property.

To do that, you handle the ItemEdited event. It's event arguments (e) provide an Item and a NewText property. The Item property contains the Item being edited (as an Object), while the NewText property contains the string the user entered as the new text. In our case, the Item will be an instance of the Person class, so we can cast it to a Person, and then set the Name property:

Private Sub EditListBox1_ItemEdited(ByVal sender As System.Object, ByVal e As EditListBoxTestVB.EditListBox.EditEventArgs) Handles EditListBox1.ItemEdited
        ' Get the person being edited (by casting e.Item to a Person object)
        Dim p = DirectCast(e.Item, Person)
 
        ' And then change his/her name
        p.Name = e.NewText
    End Sub

Now, when the user edits an item, this code will make sure that the Name property is changed.


Note again that this is NOT required if you are using only strings in your ListBox. Also note that an exception will occur if you do not handle this event and you are using something else than strings.


I might add support for multi-line items at a later stage (using JuggaloBrotha's multi-line listbox), or the ability to move items around by dragging them (again using JuggaloBrotha's control).

As of yet, there is no support for databinding, and I doubt I will add it. I think that would get complicated quickly, but if you feel up to the task, don't hesitate to try!



Enjoy!

[chris128]

Haven't tested it out but I like how simple the concept is and how potentially useful this could be

[NickThissen]

Thanks.

I'm still toying with the idea to enable the user to add a new item too. I just don't really know how to implement that. I thought about always leaving a blank item at the bottom (possibly with a [+] icon or something), which turns into a new item once the user types some text in it, or by using a contextmenu with an 'Add item' option. Any ideas?

[JuggaloBrotha]

Be sure to include the ability to move items with the mouse via dragging too: ListBox/ListView Move Item with Mouse too

This looks good as is right now, I might have a project coming up where I'd be using this control

[chris128]

I'm still toying with the idea to enable the user to add a new item too. I just don't really know how to implement that. I thought about always leaving a blank item at the bottom (possibly with a [+] icon or something), which turns into a new item once the user types some text in it, or by using a contextmenu with an 'Add item' option. Any ideas?

Yeah I think that is definitely a necessary feature (I thought it already did that actually, but I guess I didnt read the post thoroughly enough) but like you I cant think of a particularly great way of implementing that... I think your suggestion of having a blank item at the bottom/top that has a + or says "Add new item..." or something is the only way you could do it really but maybe someone else has a better idea.

[NickThissen]

I think I'm going to go with that idea. But then there's still the problem of how to implement that... How do I force the ListBox to keep an empty item at the bottom, no matter what the user does with it? I think I'm going to have to provide my own Items collection. I did something similar with my ColorListBox but I was trying to prevent that because it's not a great way... It feels a bit like a hack

[chris128]

I dunno, I assumed there was an ItemAdded event or something like that which you could use to keep track of when a new item was added and then make sure you always added your own blank item after that..