WPF之简单实现密码框（PasswordBox）明文-密文切换、清除功能以及数据绑定

前言：这里我们使用UserControl、TextBox、PasswordBox等控件自定义一个具有明文、密文、清除密码等功能的密码框控件；需要用到附加属性、依赖属性、数据绑定、style、template等；

1、因为WPF中PasswordBox控件的Password属性不是依赖属性，不能直接进行数据绑定，如果要实现绑定，需要增加一个附加属性，网上有很多实现该功能的例子，这里就不写了，下边附一个链接：https://www.cnblogs.com/h82258652/p/4088433.html；

（另外，也可用TextBox来实现PasswordBox功能，需要使用IValueConverter来进行暗文转换，同时直接用TextBox的Text属性进行Binding就可以了，这里就不一一赘述了。）

2、建立一个用户控件：PasswordBoxUserControl

 我们需要在PasswordBoxUserControl.xaml.cs中定义我们需要用到的依赖属性：

（注意：依赖属性快捷键：propdp；附加属性快捷键：propa；双按Tab键即可）

    /// 

    /// PasswordBoxUserControl.xaml 的交互逻辑
    /// 
    public partial class PasswordBoxUserControl : UserControl
    {
        public PasswordBoxUserControl()
        {
            InitializeComponent();
        }

        /// 

        /// 控制TextBox显示或者隐藏----TextBox来显示明文
        /// 
        public Visibility TbVisibility
        {
            get { return (Visibility)GetValue(TbVisibilityProperty); }
            set { SetValue(TbVisibilityProperty, value); }
        }

        // Using a DependencyProperty as the backing store for TbVisibility.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TbVisibilityProperty =
            DependencyProperty.Register("TbVisibility", typeof(Visibility), typeof(PasswordBoxUserControl));

        /// 

        /// 控制PassworBox显示或者隐藏----PasswordBox控件来显密文
        /// 
        public Visibility PwVisibility
        {
            get { return (Visibility)GetValue(PwVisibilityProperty); }
            set { SetValue(PwVisibilityProperty, value); }
        }

        // Using a DependencyProperty as the backing store for PwVisibility.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PwVisibilityProperty =
            DependencyProperty.Register("PwVisibility", typeof(Visibility), typeof(PasswordBoxUserControl));

        /// 

        /// 和“眼睛”进行绑定
        /// 
        public bool IsChecked
        {
            get { return (bool)GetValue(IsCheckedProperty); }
            set { SetValue(IsCheckedProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Check.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsCheckedProperty =
            DependencyProperty.Register("IsChecked", typeof(bool), typeof(PasswordBoxUserControl), new PropertyMetadata((s, e) =>
            {
                var dp = s as PasswordBoxUserControl;
                if ((bool)e.NewValue)
                {
                    dp.TbVisibility = Visibility.Visible;
                    dp.PwVisibility = Visibility.Collapsed;
                }
                else
                {
                    dp.TbVisibility = Visibility.Collapsed;
                    dp.PwVisibility = Visibility.Visible;
                }
            }));

        /// 

        /// 点击图标“x”,使密码框清空
        /// 
        public bool IsCleared
        {
            get { return (bool)GetValue(IsClearedProperty); }
            set { SetValue(IsClearedProperty, value); }
        }
        public static readonly DependencyProperty IsClearedProperty =
            DependencyProperty.Register("IsCleared", typeof(bool), typeof(PasswordBoxUserControl), new PropertyMetadata((s, e) =>
            {
                var c = s as PasswordBoxUserControl;
                c.Password = "";
            }));

        /// 

        /// 控制显示符号“x”
        /// 
        public Visibility ClearVisibility
        {
            get { return (Visibility)GetValue(ClearVisibilityProperty); }
            set { SetValue(ClearVisibilityProperty, value); }
        }
        public static readonly DependencyProperty ClearVisibilityProperty =
            DependencyProperty.Register("ClearVisibility", typeof(Visibility), typeof(PasswordBoxUserControl), new PropertyMetadata(Visibility.Collapsed));

        /// 

        /// 密码
        /// 
        public string Password
        {
            get { return (string)GetValue(PasswordProperty); }
            set { SetValue(PasswordProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Password.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PasswordProperty =
            DependencyProperty.Register("Password", typeof(string), typeof(PasswordBoxUserControl), new PropertyMetadata((s, e) =>
            {
                var pw = s as PasswordBoxUserControl;
                if (!string.IsNullOrEmpty(pw.Password))  //根据密码框是否有内容来显示符号“x”
                {
                    pw.ClearVisibility = Visibility.Visible;
                }
                else
                {
                    pw.ClearVisibility = Visibility.Collapsed;
                }
            }));
    }

 PasswordUserControl.xaml前台代码：

注意：绑定依赖属性这里需要加括号(local:PasswordBoxUserControl.TbVisibility)

3、现在我们就可以直接使用自定义的密码框控件了

PasswordBoxWindow前台代码：

4、ViewModel

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp.ViewModel
{
    public class PasswordBoxViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private string _password;

        public string Password
        {
            get { return _password; }
            set
            {
                _password = value;
                RaisePropertyChanged();
            }
        }
    }
}

5、最终效果-----可点击“眼睛”，“x”等进行操作。

（另：这里密码框中的“x”,“眼睛”等图标是使用的阿里矢量图；如果有美工，可以使用设计的图片等；当然，也可以使用Path自己画一个）

另：写的可能有点繁琐，不到之处请大家指正，谢谢。