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
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.