WPF 控件 (十、Password)

一、Style

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:lyrics.ui.Controls.PasswrodCustom">

    <Style x:Key="PwdToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Margin" Value="5,0" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <Path x:Name="IconImage" Data="{StaticResource EyeCloseGeometry}" Stretch="Uniform"  Fill="Black" Margin="10,0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="IconImage" Property="Data" Value="{StaticResource EyeOpenGeometry}" />
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="PasswordBox" x:Key="MyPwdStyle">
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="5,0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PasswordBox">
                    <Border Background="{TemplateBinding Background}"
												BorderBrush="{TemplateBinding BorderBrush}"
												BorderThickness="{TemplateBinding BorderThickness}"
												CornerRadius="4">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="32" />
                            </Grid.ColumnDefinitions>

                            <ScrollViewer Grid.Column="0" Name="PART_ContentHost"></ScrollViewer>
                            <TextBlock Grid.Column="0" x:Name="MessageTextBlock"
												Text="{TemplateBinding Tag}"
												FontSize="{TemplateBinding FontSize}"
												Foreground="{TemplateBinding Foreground}"
												Padding="{TemplateBinding Padding}"
												VerticalAlignment="Center"
												Visibility="Hidden"></TextBlock>

                            <!-- Text：对PasswordBox对象Password密文属性进行绑定 -->
                            <!-- MaxLength：对PasswordBox对象MaxLength长度属性进行绑定-->
                            <TextBox Grid.Column="0" VerticalContentAlignment="Center"
																	BorderThickness="0" Visibility="Hidden"
																	FontSize="{TemplateBinding FontSize}"
																	Foreground="{TemplateBinding Foreground}"
																	Padding="{TemplateBinding Padding}"
																	Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=PasswordBox},Path=(local:PasswordBoxAttached.Password)}"
																	MaxLength="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=PasswordBox},Path=(PasswordBox.MaxLength)}" 
																	x:Name="PasswordTextBox"></TextBox>
                            <!-- 图标控件 -->
                            <ToggleButton Grid.Column="1" x:Name="CheckedToggleButton" Focusable="False" Width="32" Cursor="Hand" Height="30"
																			Style="{StaticResource PwdToggleButtonStyle}"></ToggleButton>
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsKeyboardFocused" Value="False"></Condition>
                                <Condition Property="local:PasswordBoxAttached.Password" Value=""></Condition>
                            </MultiTrigger.Conditions>

                            <Setter TargetName="MessageTextBlock" Property="Visibility" Value="Visible"></Setter>
                            <Setter TargetName="MessageTextBlock" Property="Opacity" Value="0.5"></Setter>
                        </MultiTrigger>

                        <DataTrigger Binding="{Binding ElementName=CheckedToggleButton,Path=IsChecked}" Value="True">
                            <Setter TargetName="PasswordTextBox" Property="Visibility" Value="Visible"></Setter>
                            <Setter TargetName="PART_ContentHost" Property="Visibility" Value="Hidden"></Setter>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

二、PasswordBoxAttached

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Controls;
using System.Windows;

namespace lyrics.ui.Controls.PasswrodCustom
{
    public class PasswordBoxAttached
    {
        /// <summary>
        /// 密文内容属性
        /// </summary>
        public static readonly DependencyProperty PasswordProperty = DependencyProperty.RegisterAttached(
                "Password", typeof(string), typeof(PasswordBoxAttached),
                new PropertyMetadata("", PasswordPropertyChangedCallback));

        /// <summary>
        /// Get密文字段
        /// </summary>
        [AttachedPropertyBrowsableForType(typeof(PasswordBox))]
        public static string GetPassword(DependencyObject obj)
        {
            return (string)obj.GetValue(PasswordProperty);
        }

        /// <summary>
        /// Set密文字段
        /// </summary>
        public static void SetPassword(DependencyObject obj, string value)
        {
            obj.SetValue(PasswordProperty, value);
        }

        /// <summary>
        /// 密文回调事件
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        private static void PasswordPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is PasswordBox pb)
            {
                pb.Password = e.NewValue.ToString();
                pb.GetType().GetMethod("Select",
                        BindingFlags.Instance | BindingFlags.NonPublic).Invoke(pb, new object[] { pb.Password.Length, 0 });
            }
        }
    }
}

三、Demo

  <WrapPanel>
            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="默认："/>
                <PasswordBox Width="80"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="修改掩码字符："/>
                <PasswordBox Width="80" PasswordChar="*"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="修改边框："/>
                <PasswordBox Width="80" PasswordChar="*" BorderThickness="0,0,0,1" BorderBrush="Blue"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="内容居中："/>
                <PasswordBox Width="80" PasswordChar="*" BorderThickness="0,0,0,1" BorderBrush="Blue" HorizontalContentAlignment="Center"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="明文："/>
                <PasswordBox Width="120" PasswordChar="*" BorderThickness="0,0,0,1" BorderBrush="Blue"  Style="{StaticResource MyPwdStyle}" PasswordChanged="LoginPasswordBox_OnPasswordChanged"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="带提示："/>
                <PasswordBox Width="120" Tag="请输入密码"  PasswordChar="*" BorderThickness="0,0,0,1" BorderBrush="Blue"  Style="{StaticResource MyPwdStyle}" PasswordChanged="LoginPasswordBox_OnPasswordChanged"/>
            </StackPanel>
        </WrapPanel>  

四、效果