How to build a Windows Forms email-aware text box?

Question

Hi,

I'm building a C# client app that allows a user to communicate with one or more existing users in a system via an email-like metaphor. I'd like to present the user with a text entry box that auto-completes on known email addresses, and allows multiple delimiter-separated addresses to be entered. Ideally, I'd also like the email addresses to turn into structured controls once they've been entered and recognized. Basically, I'm modeling the UI interaction for adding users after Facebook's model.

Are there any Windows Forms controls out there with the ability to do something like this? Is there any well-established terminology for a hybrid textbox / control list box (no, not a ComboBox) or something that I should be searching for?

Thanks,

-Patrick

Answer 1

As a simple, "poor man's", implementation you could take a look at the AutoComplete* properties of the TextBox control. You could dynamically populate the AutoCompleteSource with your known addresses and when an entry matches, add to a separate, list-style control of your choice.

See this SO article for some interesting code snippets related to your question, and my suggested workaround.

Beyond the built-in AUtoComplete properties you're probably looking at having to purchase a 3rd party control from a tools vendor.

Answer 2

I've not seen anything like that before in WinForms. In WPF it would be another matter - if you can use that, maybe consider hosting a WPF control within your WinForms application instead?

Answer 3

I think you're trying to do something similar to this codeproject article: AutoComplete TextBox

And since you mention WPF in a comment, you also have this article: WPF AutoComplete Folder TextBox (should be easy enough to cut out the folder bit of the article I'd thought).

Answer 4

Well, there isn't such a control. If I were you, I'd create 2 textboxes to do the job. See, a normal textbox can easily be configured for autocomplete from a list, even dynamically; however, it accepts only one entry at a time.

So, I suggest you dedicate one textbox for autocomplete, and one for the addresses. So, whenever there is a qualified email address in the first textbox, and you click enter, the address gets added to the address textbox, and automatically add delimitation.

Then you need to handle the addresses in the address textbox as objects instead of characters. Code it in a way that when a user tries to delete a character in an address, the whole address is deleted.

This is the workaround I can think of. I'll help with the code if you give it a try.

Answer 5

I have had good luck in the past creating composite user-controls to provide specific functionality using native .NET Winforms controls. It works pretty good as long as there aren't too many of them, in which case things start to slow down.

In you case, and this is just off the top of my head, but, perhaps you could take a FlowLayoutPanel, a Button, and a Textbox which supports auto-complete and put these together to create a control that would provide the functionality you are looking for.

If there are no addresses selected in the control (e.g. in a List<string>), then the container (FlowLayoutPanel) would only display the TextBox. Once the user selected an entry, the control would automatically create a Button with the appropriate caption and insert it to the left in the FlowLayoutPanel. If the user removes an address he/she has already selected, simply remove its representation (the button) from the FlowLayoutPanel, and the TextBox can resize accordingly. There may be issues with getting the TextBox to fill up the remaining space (I can't remember how to do that), but you get the idea. The container does not have to be FlowLayoutPanel - you could use a Panel with Docked controls, or even a TableLayoutPanel for this.

A design as I described would allow the user to delete the address by clicking on the button. However, without some other visual cues, that isn't very intuitive or user-friendly, so I would consider making the "Button" be another composite control which contains a "prettied-up" label along with an tiny delete Button (X) to the right. For this you could use a Panel control and dock the X button to the right, and fill the Label on the left. You would provide public properties here as needed to control the text and provide an event handler or callback for the delete functionality.

Once the visual stuff is working, all that is left is to provide the appropriate Properties and Methods on the main control to allow it to interact as needed with outside code.