Gmail-Style Emails Input Control Using WPF

If you want to create a WPF control that allows users to input emails as it is in the Gmail client, then here it is. You can find the control implementation in the MultiSelectTextBox.xaml file.

Here I will describe it shortly (shortly, because I believe that all you need to understand how it works is in the source).

This control works like Gmail and Yandex email input controls in browser clients:

  1. The list of available Emails can be found by clicking on the "^" button to the right of the opened window. Email could be chosen by double-clicking on it or using the Enter key.
  2. To add new email you should set the cursor into the blank place, type Email and hit the Enter key. If the email is incorrect then you'll get an error message and the input field will be highlighted with a red canvas.
  3. As you type email, you'll see the listbox with the email automatically filtered.
  4. Selected emails will be hidden in the dropdown listbox, so you'll not be able to choose them twice.
  5. To delete a selected email you should press the Back button or click the red cross near the email address.
  6. All new email addresses will be added to the global list (in the listbox) but you can only see them if they are not present in the selected emails list above.

The following shows how to use the control using standard WPF validation controls:

  1. <textbox.text>   
  2. <Binding Path="Email" NotifyOnValidationError="True">   
  3. <Binding.ValidationRules>   
  4. <ExceptionValidationRule/> <local:EmailValidationRule></local:EmailValidationRule>   
  5. </Binding.ValidationRules>   
  6. </Binding>   
  7. </textbox.text>  

And in the cs side:

  1. protected void Page_Load(object sender, EventArgs e)   
  2. {   
  3.     public class EmailValidationRule : ValidationRule   
  4.     {   
  5.        public EmailValidationRule()   
  6.        {   
  7.        }   
  8.        public override ValidationResult Validate(object value, CultureInfo cultureInfo)   
  9.        {   
  10.           string Text = value as string;   
  11.           if (Text != null && Text.Length>0 && !Regex.IsMatch((string)value, @"^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$"))   
  12.           {   
  13.               return new ValidationResult(false,"Incorrect email format");   
  14.           }   
  15.           else   
  16.           {   
  17.               return new ValidationResult(truenull);   
  18.           }   
  19.        }   
  20.     }