WPF 中使用附加属性解决 PasswordBox 的数据绑定问题

1、前言

在 WPF 开发中 View 中的数据展示我们常通过 Binding 进行绑定。但是，使用 Binding 有一个前提：绑定的目标只能是依赖属性。 而 PasswordBox 控件中的 Password 并不是一个依赖属性，所以我们在使用 Password 时无法直接进行数据绑定。为了解决这个问题，我们就需要自己定义依赖属性。标题中的 “附加属性” 是依赖属性的一种特殊形式。

2、实现步骤

注：附加属性的定义方式：在 Visual Studio 中输入 propa ，然后按下两次 Tab 键即可。

2.1、定义一个 LoginPasswordBoxHelper 类，并在页面 xaml 代码中添加命名空间，该类用于辅助解决数据绑定问题。

xmlns:vm="clr-namespace:PasswordBoxDemo.ViewModel" 

2.2、在类中添加用于绑定的 Password 属性

public static class LoginPasswordBoxHelper {     public static string GetPassword(DependencyObject obj)     {         return (string)obj.GetValue(PasswordProperty);     }      public static void SetPassword(DependencyObject obj, string value)     {         obj.SetValue(PasswordProperty, value);     }      public static readonly DependencyProperty PasswordProperty =         DependencyProperty.RegisterAttached("Password", typeof(string), typeof(LoginPasswordBoxHelper), new PropertyMetadata(""));      } 

这个时候就可以在页面的 xaml 中的 PasswordBox 中添加如下数据绑定了：

<PasswordBox Width="200" Height="30"             vm:LoginPasswordBoxHelper.Password="{Binding Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 

但是，这时候只是提供了一个属性给 PasswordBox 用于 Binding，输入内容后数据没有任何更改效果。

因为当在 PasswordBox 中填写密码时，没有启动对应的事件将密码 Changed 到后端 ViewModel 中的 Password 属性

这时就需要再建一个附加属性 IsPasswordBindingEnable，用于给 PasswordBox 的更改添加事件，并在事件中更改到 后端 ViewModel 中的 Password 属性。

2.3、添加附加属性 IsPasswordBindingEnable，用于给 PasswordBox 的添加更改事件

当 IsPasswordBindingEnable="True" 时，给 PasswordBox 的 PasswordChanged 事件添加处理程序PasswordBoxPasswordChanged；

PasswordBoxPasswordChanged 作用：当页面中 PasswordBox 输入的值发生改变时，通过 SetPassword 完成数据更改，从而实现完整的数据绑定功能。

<PasswordBox Width="200" Height="30"              vm:LoginPasswordBoxHelper.IsPasswordBindingEnable="True"              vm:LoginPasswordBoxHelper.Password="{Binding Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 

public static bool GetIsPasswordBindingEnable(DependencyObject obj) {     return (bool)obj.GetValue(IsPasswordBindingEnableProperty); }  public static void SetIsPasswordBindingEnable(DependencyObject obj, bool value) {     obj.SetValue(IsPasswordBindingEnableProperty, value); }  public static readonly DependencyProperty IsPasswordBindingEnableProperty =     DependencyProperty.RegisterAttached("IsPasswordBindingEnable", typeof(bool), typeof(LoginPasswordBoxHelper),                                         new FrameworkPropertyMetadata(OnIsPasswordBindingEnabledChanged));  private static void OnIsPasswordBindingEnabledChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e) {     var passwordBox = obj as PasswordBox;     if (passwordBox != null)     {         passwordBox.PasswordChanged -= PasswordBoxPasswordChanged;         if ((bool)e.NewValue)         {             passwordBox.PasswordChanged += PasswordBoxPasswordChanged;         }     } }  static void PasswordBoxPasswordChanged(object sender, RoutedEventArgs e) {     var passwordBox = (PasswordBox)sender;     if (!String.Equals(GetPassword(passwordBox), passwordBox.Password))     {         SetPassword(passwordBox, passwordBox.Password);     } } 

3、完整代码

3.1、页面代码

Login.xaml

<Window     x:Class="PasswordBoxDemo.Login"     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"     xmlns:vm="clr-namespace:PasswordBoxDemo.ViewModel"     Title="MainWindow"     Width="450"     Height="400"     mc:Ignorable="d">     <Grid>         <Grid.RowDefinitions>             <RowDefinition />             <RowDefinition />             <RowDefinition />         </Grid.RowDefinitions>         <TextBox x:Name="tbUserName"             Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"             Width="200" Height="30" />         <PasswordBox Grid.Row="1" Width="200" Height="30"             vm:LoginPasswordBoxHelper.IsPasswordBindingEnable="True"             vm:LoginPasswordBoxHelper.Password="{Binding Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>         <Button x:Name="btnLogin" Grid.Row="2"             Content="登录"             Width="150"             Height="30" />     </Grid> </Window>  

Login.xaml.cs

using PasswordBoxDemo.ViewModel; using System.Windows;  namespace PasswordBoxDemo {     public partial class Login : Window     {         private MainViewModel resource;         public Login()         {             InitializeComponent();             resource = new MainViewModel();             this.DataContext = resource;         }      } } 

3.2、数据绑定辅助类 LoginPasswordBoxHelper

using System; using System.Windows; using System.Windows.Controls;  namespace PasswordBoxDemo.ViewModel {     public static class LoginPasswordBoxHelper     {         public static string GetPassword(DependencyObject obj)         {             return (string)obj.GetValue(PasswordProperty);         }          public static void SetPassword(DependencyObject obj, string value)         {             obj.SetValue(PasswordProperty, value);         }                  public static readonly DependencyProperty PasswordProperty =             DependencyProperty.RegisterAttached("Password", typeof(string), typeof(LoginPasswordBoxHelper), new PropertyMetadata(""));          public static bool GetIsPasswordBindingEnable(DependencyObject obj)         {             return (bool)obj.GetValue(IsPasswordBindingEnableProperty);         }          public static void SetIsPasswordBindingEnable(DependencyObject obj, bool value)         {             obj.SetValue(IsPasswordBindingEnableProperty, value);         }                  public static readonly DependencyProperty IsPasswordBindingEnableProperty =             DependencyProperty.RegisterAttached("IsPasswordBindingEnable", typeof(bool), typeof(LoginPasswordBoxHelper),                 new FrameworkPropertyMetadata(OnIsPasswordBindingEnabledChanged));          private static void OnIsPasswordBindingEnabledChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)         {             var passwordBox = obj as PasswordBox;             if (passwordBox != null)             {                 passwordBox.PasswordChanged -= PasswordBoxPasswordChanged;                 if ((bool)e.NewValue)                 {                     passwordBox.PasswordChanged += PasswordBoxPasswordChanged;                 }             }         }          static void PasswordBoxPasswordChanged(object sender, RoutedEventArgs e)         {             var passwordBox = (PasswordBox)sender;             if (!String.Equals(GetPassword(passwordBox), passwordBox.Password))             {                 SetPassword(passwordBox, passwordBox.Password);             }         }     } } 

3.3、其它代码

ViewModel：

using GalaSoft.MvvmLight;  namespace PasswordBoxDemo.ViewModel {     public class MainViewModel : ViewModelBase     {         public MainViewModel()         {         }          private string userName;          public string UserName         {             get { return userName; }             set { userName = value; RaisePropertyChanged(); }         }          private string password;          public string Password         {             get { return password; }             set { password = value; RaisePropertyChanged(); }         }      } } 

4、附加功能：输入框添加水印

实现水印添加也可以用类似上述的方法实现，具体步骤如下：

4.1、在 LoginPasswordBoxHelper 类中添加附加属性 ShowWaterMark，用与切换水印展示状态;

public static bool GetShowWaterMark(DependencyObject obj) {     return (bool)obj.GetValue(ShowWaterMarkProperty); }  public static void SetShowWaterMark(DependencyObject obj, bool value) {     obj.SetValue(ShowWaterMarkProperty, value); }  /// <summary> /// 控制水印显示 /// </summary> public static readonly DependencyProperty ShowWaterMarkProperty =     DependencyProperty.RegisterAttached("ShowWaterMark", typeof(bool), typeof(LoginPasswordBoxHelper),                                         new FrameworkPropertyMetadata(true, OnShowWaterMarkChanged));  private static void OnShowWaterMarkChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { } 

4.2、自定义水印展示样式

<Window.Resources>     <Style x:Key="textbox" TargetType="{x:Type TextBox}">         <Setter Property="Padding" Value="2,5,0,0"/>         <Setter Property="FontSize" Value="14"/>         <Style.Triggers>             <Trigger Property="Text" Value="">                 <Setter Property="Background">                     <Setter.Value>                         <VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="None">                             <VisualBrush.Visual>                                 <TextBlock Padding="5,3,0,0" Background="Transparent" Foreground="Silver" FontSize="14" Text="请输入用户名"></TextBlock>                             </VisualBrush.Visual>                         </VisualBrush>                     </Setter.Value>                 </Setter>             </Trigger>         </Style.Triggers>     </Style>     <Style x:Key="password" TargetType="{x:Type PasswordBox}">         <Setter Property="Padding" Value="2,5,0,0"/>         <Setter Property="FontSize" Value="14"/>         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="{x:Type PasswordBox}">                     <Border Background="{TemplateBinding Background}"  BorderThickness="{TemplateBinding BorderThickness}"                             BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">                         <Grid>                             <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>                             <StackPanel Orientation="Horizontal" Visibility="Visible" Name="myWaterMark">                                 <TextBlock Padding="3" Background="Transparent" Foreground="Silver" FontSize="14"                                             Text="请输入密码"/>                             </StackPanel>                         </Grid>                     </Border>                     <ControlTemplate.Triggers>                         <Trigger Property="IsEnabled" Value="false">                             <Setter Property="Visibility" TargetName="myWaterMark" Value="Collapsed"/>                         </Trigger>                         <Trigger Property="vm:LoginPasswordBoxHelper.ShowWaterMark" Value="False">                             <Setter Property="Visibility" TargetName="myWaterMark" Value="Collapsed"/>                          </Trigger>                     </ControlTemplate.Triggers>                 </ControlTemplate>             </Setter.Value>         </Setter>     </Style> </Window.Resources> 

5、效果展示