silverlight 自定义用户控件,实现邮箱地址输入自动提示邮箱域名
在很多网站注册页面中,当填写邮箱地址时,会提示邮箱的后半部分。出于好奇,自己也在silverlight平台下实现了这个功能,效果如下:
一、自定一个用户控件,起名为EmailInputAutoComplteTextBox.xaml 【大家可以随便起一个自己喜欢的名称】
前台代码如下:
1 <UserControl x:Class="Warrentech.Rainbow.SilverlightMap.EmailInputAutoComplteTextBox"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable="d"
7 d:DesignHeight="300" d:DesignWidth="400">
8 <StackPanel x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left">
9 <TextBox x:Name="txtEmailAutoComplte" Width="{Binding ElementName=UserControl, Path=Width}"></TextBox>
10 <Popup x:Name="popupEmailAutoComplte" IsOpen="False" Width="240" Height="90">
11 <Grid Background="Gray" >
12 <ListBox x:Name="lbxMailName">
13 </ListBox>
14 </Grid>
15 </Popup>
16 </StackPanel>
17 </UserControl>
二、看完前代码,是不是感觉很简单,其实实现的后台也比较简单,只有大家能想到,且看后代代码
1 public partial class EmailInputAutoComplteTextBox : UserControl
2 {
3 bool _isEnterPress = true; //判定当用户从lbxMailName选择想要的域名的邮箱后,是否按了回车键,如果是,就选中相应的邮箱
4 List<string> _mailExpandNameList = new List<string> { "@163.com", "@126.com", "@yahoo.com", "@qq.com", "@sina.com", "@gmail.com", "@hotmail.com", "@foxmail.com" };
5 List<string> _mailNameList = new List<string>(); //用来存放邮箱地址的全名
6 public EmailInputAutoComplteTextBox()
7 {
8 InitializeComponent();
9 //这些是注册事件,看名称大家就知道事件的作用了
10 this.txtEmailAutoComplte.TextChanged += txtEmailAutoComplte_TextChanged;
11 this.txtEmailAutoComplte.KeyDown += txtEmailAutoComplte_KeyDown;
12 this.lbxMailName.KeyDown += lbxMailName_KeyDown;
13 this.lbxMailName.MouseLeftButtonUp += lbxMailName_MouseLeftButtonUp;
14 }
15
16 void lbxMailName_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
17 {
18 if (this.lbxMailName.SelectedIndex > 0) {
19 this.txtEmailAutoComplte.Text = this.lbxMailName.SelectedItem.ToString();
20 this.popupEmailAutoComplte.IsOpen = false;
21 _isEnterPress = false;
22 }
23 }
24
25
26 void lbxMailName_KeyDown(object sender, KeyEventArgs e)
27 {
28 if (e.Key == Key.Enter) {
29 this.txtEmailAutoComplte.Text = this.lbxMailName.SelectedItem.ToString();
30 this.popupEmailAutoComplte.IsOpen = false;
31 _isEnterPress = false;
32 }
33 }
34 //这个很重要,因为没有这个事件,用户不能通过键盘的上下键来选择想要的邮箱地址
35 void txtEmailAutoComplte_KeyDown(object sender, KeyEventArgs e)
36 {
37 if (e.Key == Key.Down || e.Key == Key.Up) {
38 this.lbxMailName.Focus();
39 } else {
40 this.txtEmailAutoComplte.Focus();
41 }
42 }
43
44
45 void txtEmailAutoComplte_TextChanged(object sender, TextChangedEventArgs e)
46 {
47 TextBox txtbox = sender as TextBox;
48 if (_isEnterPress)
49 this.popupEmailAutoComplte.IsOpen = true;
50 _mailNameList.Clear();
51 foreach (string str in _mailExpandNameList) {
52 _mailNameList.Add(string.Format("{0}{1}", this.txtEmailAutoComplte.Text, str));
53 }
54 this.lbxMailName.ItemsSource = null;
55 _mailNameList.Insert(0, "请选择邮箱类型");
56 this.lbxMailName.ItemsSource = _mailNameList;
57 _isEnterPress = true;
58 }
最后,就是在其他的页面中使用,刚刚自定的控件,使用方法也很简单
在要使用这个控件的页面上先添加引用:xmlns:local="clr-namespace:xxxxxxxxxxxxxxxxxxxx"
再在合适布局的地方的使用:<local:EmailInputAutoComplteTextBox x:Name="txtRoleMailAutoComplte" Width="160" Height="30"></local:EmailInputAutoComplteTextBox> 便可以使用。