WPF自定义控件之水印文本(密码)框

首先来讲讲创建这个控件的初衷，一个让我很郁闷的问题。

公司的客户端项目采用WPF+MVVM技术实现，在近期地推客户端的过程中遇到了一个很奇葩的问题：在登录界面点击密码框就会直接闪退，没有任何提示

密码框是WPF原生的PasswordBox，这似乎没有什么不对。出现这个情况的一般是在xp系统(ghost的雨林木风版本或番茄花园)，某些xp系统又不会出现。

出现这个问题的原因是因为客户的系统缺少PasswordBox使用的某种默认的字体，网上有人说是times new roman，又或者其它某种字体。其实只要找到了这个字体，并在程序启动的时候安装这种字体可以解决。

但我觉得，这个解决方案太麻烦。与其依赖PasswordBox使用的默认字体，不如重写PasswordBox，避免密码框字体的依赖。

现在让我们来重写一个自己的带水印的文本(密码)框吧

1.首先创建一个类，继承TextBox

 public class SJTextBox : TextBox

2.指定依赖属性的实例重写基类型的元数据

 static SJTextBox()
 {
     DefaultStyleKeyProperty.OverrideMetadata(typeof(SJTextBox), new FrameworkPropertyMetadata(typeof(SJTextBox)));
 }

3.定义依赖属性　　

public static DependencyProperty WaterRemarkProperty =
            DependencyProperty.Register("WaterRemark", typeof(string), typeof(SJTextBox));

        /// <summary>
        /// 水印文字
        /// </summary>
        public string WaterRemark
        {
            get { return GetValue(WaterRemarkProperty).ToString(); }
            set { SetValue(WaterRemarkProperty, value); }
        }

        public static DependencyProperty BorderCornerRadiusProperty =
            DependencyProperty.Register("BorderCornerRadius", typeof(CornerRadius), typeof(SJTextBox));

        /// <summary>
        /// 边框角度
        /// </summary>
        public CornerRadius BorderCornerRadius
        {
            get { return (CornerRadius)GetValue(BorderCornerRadiusProperty); }
            set { SetValue(BorderCornerRadiusProperty, value); }
        }

        public static DependencyProperty IsPasswordBoxProperty =
            DependencyProperty.Register("IsPasswordBox", typeof(bool), typeof(SJTextBox), new FrameworkPropertyMetadata(false, new PropertyChangedCallback(OnIsPasswordBoxChnage)));

        /// <summary>
        /// 是否为密码框
        /// </summary>
        public bool IsPasswordBox
        {
            get { return (bool)GetValue(IsPasswordBoxProperty); }
            set { SetValue(IsPasswordBoxProperty, value); }
        }

        public static DependencyProperty PasswordCharProperty =
            DependencyProperty.Register("PasswordChar", typeof(char), typeof(SJTextBox), new FrameworkPropertyMetadata('●'));

        /// <summary>
        /// 替换明文的单个密码字符
        /// </summary>
        public char PasswordChar
        {
            get { return (char)GetValue(PasswordCharProperty); }
            set { SetValue(PasswordCharProperty, value); }
        }

        public static DependencyProperty PasswordStrProperty =
            DependencyProperty.Register("PasswordStr", typeof(string), typeof(SJTextBox), new FrameworkPropertyMetadata(string.Empty));
        /// <summary>
        /// 密码字符串
        /// </summary>
        public string PasswordStr
        {　　　　
            get { return GetValue(PasswordStrProperty).ToString(); }
            set { SetValue(PasswordStrProperty, value); }
        }

4.当设置为密码框时，监听TextChange事件，处理Text的变化，这是密码框的核心功能

        private static void OnIsPasswordBoxChnage(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            (sender as SJTextBox).SetEvent();
        }

        /// <summary>
        /// 定义TextChange事件
        /// </summary>
        private void SetEvent()
        {
            if (IsPasswordBox)
                this.TextChanged += SJTextBox_TextChanged;
            else
                this.TextChanged -= SJTextBox_TextChanged;
        }

5.在TextChange事件中，处理Text为密码文，并将原字符记录给PasswordStr予以存储

 private void SJTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (!IsResponseChange) //响应事件标识，替换字符时，不处理后续逻辑
                return;
            Console.WriteLine(string.Format("------{0}------", e.Changes.Count));
            foreach (TextChange c in e.Changes)
            {
                Console.WriteLine(string.Format("addLength:{0} removeLenth:{1} offSet:{2}", c.AddedLength, c.RemovedLength, c.Offset));
                PasswordStr = PasswordStr.Remove(c.Offset, c.RemovedLength); //从密码文中根据本次Change对象的索引和长度删除对应个数的字符
                PasswordStr = PasswordStr.Insert(c.Offset, Text.Substring(c.Offset, c.AddedLength));   //将Text新增的部分记录给密码文
                lastOffset = c.Offset;
            }
            Console.WriteLine(PasswordStr);
            /*将文本转换为密码字符*/
            IsResponseChange = false;  //设置响应标识为不响应
            this.Text = ConvertToPasswordChar(Text.Length);  //将输入的字符替换为密码字符
            IsResponseChange = true;   //回复响应标识
            this.SelectionStart = lastOffset + 1; //设置光标索引
            Console.WriteLine(string.Format("SelectionStar:{0}", this.SelectionStart));
        }

　

 　　　　/// <summary>
        /// 按照指定的长度生成密码字符
        /// </summary>
        /// <param name="length"></param>
        /// <returns></returns>
        private string ConvertToPasswordChar(int length)
        {
            if (PasswordBuilder != null)
                PasswordBuilder.Clear();
            else
                PasswordBuilder = new StringBuilder();
            for (var i = 0; i < length; i++)
                PasswordBuilder.Append(PasswordChar);
            return PasswordBuilder.ToString();
        }

　ConvertToPasswordChar()方法用于返回指定个数的密码字符，替换Text为密码文就是调用此方法传递Text的长度完成的

6.如果用户设置了记住密码，密码文(PasswordStr)一开始就有值的话，别忘了在Load事件里事先替换一次明文

 private void SJTextBox_Loaded(object sender, RoutedEventArgs e)
        {
            if (IsPasswordBox)
            {
                IsResponseChange = false;
                this.Text = ConvertToPasswordChar(PasswordStr.Length);
                IsResponseChange = true;
            }
        }

7.代码逻辑部分已经完成，替换明文为密码字符的功能已经实现了。自定义边框角度，水印功能，需要借助Style来完成，让我们来为它写一个Style

<Style TargetType="{x:Type local:SJTextBox}">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="Cursor" Value="IBeam"/>
        <Setter Property="Padding" Value="3,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:SJTextBox}">
                    <Border x:Name="border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="{TemplateBinding BorderCornerRadius}"  <!--绑定自定义边框角度-->
                                SnapsToDevicePixels="True">
                        <Grid>
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                            <TextBlock x:Name="txtRemark" Text="{TemplateBinding WaterRemark}"  <!--绑定水印文字-->
                                           Foreground="Gray" VerticalAlignment="Center"
                                           Margin="{TemplateBinding Padding}"
                                           Visibility="Collapsed"/> <!--默认水印文字隐藏-->
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Text" Value="">  <!--使用触发器来控制水印的隐藏显示：当文本框没有字符时显示水印文字-->
                            <Setter Property="Visibility" Value="Visible" TargetName="txtRemark"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

8.自定义水印文本(密码)框的调用

        <local:SJTextBox  Height="30"
                BorderCornerRadius="3"
                Margin="10,10"
                Background="White"
                WaterRemark="This is a TextBox"/>  <!--水印文本框-->

            <local:SJTextBox Height="30"
                BorderCornerRadius="3"
                Margin="10,0"
                Background="White"
                WaterRemark="This is a PassworBox"
                IsPasswordBox="True"
                PasswordStr="{Binding Password}"/>  <!--水印密码框-->

　　

自定义的水印文本(密码)框已经完成了，它避免了对密码字体的依赖，同时密码文属性PasswordStr也支持数据绑定，非常方便。

效果图：