Create a WPF text control, such as an Outlook email recipient text box

Question

I want to create a WPF text box control that acts similar to the text boxes of email recipients in Outlook (To, Cc, and Bcc inputs). I don’t have to bypass autocompletion so much (I have found millions of examples for this), but what I'm really struggling with is how to have text entries with delimiters in the text box that behave like entities the way they do in Outlook (after the recipient you entered resolves, this text becomes an “entity” that you can click to select, right-click to get a context menu, etc., This is no longer “normal” text "in which you can place the cursor) ...

Does anyone have any high level ideas on how to do this? Do you know about existing examples (I searched the Internet for hours)?

Thank you very much in advance,

Michael.

Answer 1

My crude thought process will be like this ... (note: I don't actually encode it, so my data might be a bit off ...)

High level behavior:

• The data type in your control is a list of items that cannot be selected. Therefore, your control is approximately equal to the ItemsControl (in terms of visual / XAML, it is an ItemsControl with a WrapPanel style WrapPanel and a very simple TextBlock for the element template).
• When your control gets focus, you need to switch the template as a TextBox
• When your control loses focus, you need to break the entered text and convert it to a list for display.

Therefore, the code of thinking:

• you need a UserControl, possibly derived from an ItemsControl. This gives you basic behavior for presenting a list of items.
• you need a custom DependencyProperty for your control that represents a delimited string.
• When you change the property of a string, you need to parse it and replace the list of items in the control.
• When changing the list property, you need to replace the string property with the corresponding list.

From a code point of view, this part should be fairly simple. Then for the XAML template ...

• you need a basic template that displays your Items property as a list using the WrapPanel layout mentioned above.
• you need a trigger that replaces this template when the control has focus.
• The replacement template must be a TextBox that is associated with the string property of the control.
• the default binding behavior on the TextBox will only trigger a new value when the TextBox loses focus, so you need to think about whether you want to do, say, “Enter” by pressing the move key (thus returning the template to the list version - when changing the value string properties, your code string will update the list).

This should give you basic behavior. You should be able to bind a list property or a row property from outside the control, although you may need to keep track of what happens if you bind both properties, since there is a two-way relationship between them ...