WPF 密码提示框

首先展示效果

如图密码提示框，可通过小眼睛进行显示和隐藏密码

1、自定义控件

public class TitlePasswordBox : TextBox
   {
       /// <summary>
       /// 密码提示框提示语
       /// </summary>
       public string Title
       {
           get { return (string)GetValue(TitleProperty); }
           set { SetValue(TitleProperty, value); }
       }
 
       public static readonly DependencyProperty TitleProperty =
           DependencyProperty.Register("Title", typeof(string), typeof(TitlePasswordBox), new PropertyMetadata(""));
 
 
       /// <summary>
       /// 是否显示密码
       /// </summary>
       public bool IsDisplay
       {
           get { return (bool)GetValue(IsDisplayProperty); }
           set { SetValue(IsDisplayProperty, value); }
       }
 
       public static readonly DependencyProperty IsDisplayProperty =
           DependencyProperty.Register("IsDisplay", typeof(bool), typeof(TitlePasswordBox), new PropertyMetadata(false));
 
   }

2、控件模板

<Style TargetType="controls:TitlePasswordBox">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Foreground" Value="#30FFFFFF"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="Foreground" Value="White"></Setter>
    <Setter Property="SelectionBrush" Value="#DDDDDD"></Setter>
    <Setter Property="CaretBrush" Value="White"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:TitlePasswordBox">
                <Border x:Name="border" BorderThickness="{TemplateBinding BorderThickness}"  BorderBrush="#666666" SnapsToDevicePixels="True" Background="{Binding Background}">
                    <Grid>
                        <TextBlock Text="{TemplateBinding Title}" Foreground="#858484" IsHitTestVisible="False" VerticalAlignment="Center" FontSize="{Binding FontSize}" x:Name="Title" Visibility="Hidden"/>
                        <PasswordBox  Helper:PasswordBoxHelper.Attach="True"
                                             Helper:PasswordBoxHelper.Password="{Binding Path=Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Foreground="#FFFFFF" CaretBrush="White" BorderThickness="0" Background="Transparent" HorizontalContentAlignment="Left" FontSize="16" PasswordChar="*" Margin="-5,5,0,0" Visibility="{TemplateBinding IsDisplay,Converter={StaticResource BoolToVisInverseConverter}}"/>
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"  Visibility="{TemplateBinding IsDisplay,Converter={StaticResource BoolToVisConverter}}"/>
 
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="#888888"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="#AAAAAA"/>
                    </Trigger>
                    <Trigger Property="Text" Value="{x:Null}">
                        <Setter Property="Visibility" TargetName="Title" Value="Visible" />
                    </Trigger>
                    <Trigger Property="Text" Value="">
                        <Setter Property="Visibility" TargetName="Title" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                <Condition Property="IsSelectionActive" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter Property="SelectionBrush" Value="#AAAAAA"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

3、界面按钮样式

<Border BorderBrush="#30FFFFFF" BorderThickness="1" >
              <StackPanel Orientation="Horizontal">
                  <controls:TitlePasswordBox Margin="5,0,0,0" Title="{DynamicResource Login_BS0054}" HorizontalAlignment="Left" IsDisplay="{Binding ElementName=IsShow,Path=IsChecked}" x:Name="Password" Text="{Binding Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="245" VerticalAlignment="Center"  BorderThickness="0"  Background="Transparent" Foreground="White" VerticalContentAlignment="Center"/>
                  <CheckBox x:Name="IsShow" Grid.Row="7" IsChecked="False" Grid.Column="2" HorizontalAlignment="Left" Margin="0,0,0,0" Width="19.5" Height="15">
                      <CheckBox.Style>
                          <Style TargetType="CheckBox">
                              <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                              <Setter Property="Template">
                                  <Setter.Value>
                                      <ControlTemplate TargetType="CheckBox">
                                          <Image Source="/Resource/Images/GameField/ConfigurationList/IDHidden.png" Stretch="UniformToFill" x:Name="img"/>
                                          <ControlTemplate.Triggers>
                                              <Trigger Property="IsChecked" Value="True">
                                                  <Setter Property="Source" TargetName="img" Value="/Resource/Images/GameField/ConfigurationList/IDShow.png"/>
                                              </Trigger>
                                          </ControlTemplate.Triggers>
                                      </ControlTemplate>
                                  </Setter.Value>
                              </Setter>
                          </Style>
                      </CheckBox.Style>
                  </CheckBox>
              </StackPanel>
 </Border>

4、代码中使用PasswordBoxHelper

代码如下:

public static class PasswordBoxHelper
{
    public static readonly DependencyProperty PasswordProperty =
        DependencyProperty.RegisterAttached("Password",
        typeof(string), typeof(PasswordBoxHelper),
        new FrameworkPropertyMetadata(string.Empty, OnPasswordPropertyChanged));
    public static readonly DependencyProperty AttachProperty =
        DependencyProperty.RegisterAttached("Attach",
        typeof(bool), typeof(PasswordBoxHelper), new PropertyMetadata(false, Attach));
    private static readonly DependencyProperty IsUpdatingProperty =
       DependencyProperty.RegisterAttached("IsUpdating", typeof(bool),
       typeof(PasswordBoxHelper));
 
 
    public static void SetAttach(DependencyObject dp, bool value)
    {
        dp.SetValue(AttachProperty, value);
    }
    public static bool GetAttach(DependencyObject dp)
    {
        return (bool)dp.GetValue(AttachProperty);
    }
    public static string GetPassword(DependencyObject dp)
    {
        return (string)dp.GetValue(PasswordProperty);
    }
    public static void SetPassword(DependencyObject dp, string value)
    {
        dp.SetValue(PasswordProperty, value);
    }
    private static bool GetIsUpdating(DependencyObject dp)
    {
        return (bool)dp.GetValue(IsUpdatingProperty);
    }
    private static void SetIsUpdating(DependencyObject dp, bool value)
    {
        dp.SetValue(IsUpdatingProperty, value);
    }
    private static void OnPasswordPropertyChanged(DependencyObject sender,
        DependencyPropertyChangedEventArgs e)
    {
        PasswordBox passwordBox = sender as PasswordBox;
        passwordBox.PasswordChanged -= PasswordChanged;
        if (!(bool)GetIsUpdating(passwordBox))
        {
            passwordBox.Password = (string)e.NewValue;
        }
        passwordBox.PasswordChanged += PasswordChanged;
    }
    private static void Attach(DependencyObject sender,
        DependencyPropertyChangedEventArgs e)
    {
        PasswordBox passwordBox = sender as PasswordBox;
        if (passwordBox == null)
            return;
        if ((bool)e.OldValue)
        {
            passwordBox.PasswordChanged -= PasswordChanged;
        }
        if ((bool)e.NewValue)
        {
            passwordBox.PasswordChanged += PasswordChanged;
        }
    }
    private static void PasswordChanged(object sender, RoutedEventArgs e)
    {
        PasswordBox passwordBox = sender as PasswordBox;
        SetIsUpdating(passwordBox, true);
        SetPassword(passwordBox, passwordBox.Password);
        SetIsUpdating(passwordBox, false);
    }
}