silverlight 自定义用户控件，实现邮箱地址输入自动提示邮箱域名

在很多网站注册页面中，当填写邮箱地址时，会提示邮箱的后半部分。出于好奇，自己也在silverlight平台下实现了这个功能，效果如下：

一、自定一个用户控件，起名为EmailInputAutoComplteTextBox.xaml 【大家可以随便起一个自己喜欢的名称】

前台代码如下：

<UserControl x:Class="Warrentech.Rainbow.SilverlightMap.EmailInputAutoComplteTextBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"> 
        <StackPanel x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left">
            <TextBox  x:Name="txtEmailAutoComplte" Width="{Binding ElementName=UserControl, Path=Width}"></TextBox>
            <Popup x:Name="popupEmailAutoComplte" IsOpen="False"  Width="240" Height="90">
                <Grid Background="Gray" >
                    <ListBox x:Name="lbxMailName">
                    </ListBox>
                </Grid>
            </Popup>
        </StackPanel>
</UserControl>

　　二、看完前代码，是不是感觉很简单，其实实现的后台也比较简单，只有大家能想到，且看后代代码

public partial class EmailInputAutoComplteTextBox : UserControl
    {
        bool _isEnterPress = true;   //判定当用户从lbxMailName选择想要的域名的邮箱后，是否按了回车键，如果是，就选中相应的邮箱
        List<string> _mailExpandNameList = new List<string> { "@163.com", "@126.com", "@yahoo.com", "@qq.com", "@sina.com", "@gmail.com", "@hotmail.com", "@foxmail.com" };
        List<string> _mailNameList = new List<string>();  //用来存放邮箱地址的全名
        public EmailInputAutoComplteTextBox()
        {
            InitializeComponent();
            //这些是注册事件，看名称大家就知道事件的作用了
            this.txtEmailAutoComplte.TextChanged += txtEmailAutoComplte_TextChanged;
            this.txtEmailAutoComplte.KeyDown += txtEmailAutoComplte_KeyDown;
            this.lbxMailName.KeyDown += lbxMailName_KeyDown;
            this.lbxMailName.MouseLeftButtonUp += lbxMailName_MouseLeftButtonUp;
        }

        void lbxMailName_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (this.lbxMailName.SelectedIndex > 0) {
                this.txtEmailAutoComplte.Text = this.lbxMailName.SelectedItem.ToString();
                this.popupEmailAutoComplte.IsOpen = false;
                _isEnterPress = false;
            }
        }


        void lbxMailName_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Enter) {
                this.txtEmailAutoComplte.Text = this.lbxMailName.SelectedItem.ToString();
                this.popupEmailAutoComplte.IsOpen = false;
                _isEnterPress = false;
            }
        }
//这个很重要，因为没有这个事件，用户不能通过键盘的上下键来选择想要的邮箱地址
        void txtEmailAutoComplte_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Down || e.Key == Key.Up) {
                this.lbxMailName.Focus();
            } else {
                this.txtEmailAutoComplte.Focus();
            }
        }


        void txtEmailAutoComplte_TextChanged(object sender, TextChangedEventArgs e)
        {
            TextBox txtbox = sender as TextBox;
            if (_isEnterPress)
                this.popupEmailAutoComplte.IsOpen = true;
            _mailNameList.Clear();
            foreach (string str in _mailExpandNameList) {
                _mailNameList.Add(string.Format("{0}{1}", this.txtEmailAutoComplte.Text, str));
            }
            this.lbxMailName.ItemsSource = null;
            _mailNameList.Insert(0, "请选择邮箱类型");
            this.lbxMailName.ItemsSource = _mailNameList;
            _isEnterPress = true;
        }

　　

最后，就是在其他的页面中使用，刚刚自定的控件，使用方法也很简单

在要使用这个控件的页面上先添加引用：xmlns:local="clr-namespace:xxxxxxxxxxxxxxxxxxxx"

再在合适布局的地方的使用：<local:EmailInputAutoComplteTextBox x:Name="txtRoleMailAutoComplte" Width="160" Height="30"></local:EmailInputAutoComplteTextBox> 便可以使用。