最近学习WPF,突然想做PasswordBox明文显示的样式,在网上搜索了一下,代码都有问题,不能够直接复用。所以,在同事的帮助下,做了一个明文显示样式的Demo。
首先,创建一个WPF App的项目。
打开MainWindow.xaml文件,代码如下:
<Window x:Class="WpfApp4.MainWindow"
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:local="clr-namespace:WpfApp4"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
</Grid>
</Window>
构建Grid布局,并创建两个控件,分别为TextBox、PasswordBox,代码如下:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBox x:Name="userName" Grid.Row="0" Width="200" Height="40" HorizontalAlignment="Left"></TextBox>
<PasswordBox x:Name="userPwd" Grid.Row="1" Width="200" Height="40" HorizontalAlignment="Left" Style="{StaticResource PasswordBoxStyle1}" FontSize="20" VerticalAlignment="Center" local:ControlAttachProperty.PlaceHolder="请输入密码" />
</Grid>
此时,Style="{StaticResource PasswordBoxStyle1}" 与 local:ControlAttachProperty.PlaceHolder="请输入密码" 会报错。(现在可以删掉这两句)
现在要实现的样式效果:
1、输入密码后,点击眼睛按钮可以显示密码明文效果。
2、密码框为空且没有获取焦点时,显示提示文字。
3、密码为空时,不允许点击眼睛按钮
样式代码需要放在Window标签下Grid标签前,代码如下:
<Window.Resources>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--眼睛按钮的样式-->
<Style TargetType="Button" x:Key="EyeButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--PassWordBox样式-->
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<Style x:Key="PasswordBoxStyle1" TargetType="{x:Type PasswordBox}">
<Setter Property="local:PasswordBoxHelper.Attach" Value="True"/>
<Setter Property="PasswordChar" Value="●"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type PasswordBox}">
<Border x:Name="border" CornerRadius="10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<!--重写构造PasswordBox-->
<Grid x:Name="PART_InnerGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--PasswordBox原有的显示节点-->
<ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" IsTabStop="False" VerticalAlignment="Stretch" Background="{x:Null}" VerticalContentAlignment="Center" Margin="5,5"/>
<!--创建明文显示的TextBox-->
<TextBox x:Name="PART_PasswordShower" BorderBrush="Transparent" Text="{Binding Path=(local:PasswordBoxHelper.Password),RelativeSource={RelativeSource TemplatedParent}}" BorderThickness="0" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="5,5"/>
<!--创建提示字符-->
<TextBlock x:Name="PART_PlaceHolder" Text="{Binding Path=(local:ControlAttachProperty.PlaceHolder),RelativeSource={RelativeSource TemplatedParent}}" Visibility="Collapsed" Opacity="0.6" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,5"/>
<!--触发按钮显示样式-->
<Button x:Name="PART_ToggleEye" Grid.Column="1" Width="40" Margin="3,3" BorderThickness="0" Style="{StaticResource EyeButton}" >
<Button.Background>
<ImageBrush x:Name="img_eye" ImageSource="eye_slash.png"/>
</Button.Background>
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<!--密码框为空设置按钮禁用-->
<Trigger Property="local:PasswordBoxHelper.Password" Value="">
<Setter TargetName="PART_ToggleEye" Property="IsEnabled" Value="False"/>
</Trigger>
<!--按住按钮,更改按钮背景图片并设置明文框显示且密码框不显示且不占用-->
<Trigger Property="IsPressed" SourceName="PART_ToggleEye" Value="true">
<Setter TargetName="PART_ToggleEye" Property="Background">
<Setter.Value>
<ImageBrush ImageSource="eye.png"/>
</Setter.Value>
</Setter>
<Setter TargetName="PART_ContentHost" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="PART_PasswordShower" Property="Visibility" Value="Visible"/>
</Trigger>
<!--密码框为空不且没有获取焦点时,设置提示文字显示-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="local:PasswordBoxHelper.Password" Value=""/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_PlaceHolder" Property="Visibility" Value="Visible"/>
</MultiTrigger>
</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="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
代码中使用了PasswordBoxHelper及ControlAttachProperty的类,PasswordBoxHelper用于获取PasswordwordBox的密码,提供给显示框显示明文密码。ControlAttachProperty用于创建提示文字的依赖属性。(注意:两个类放在MainWindow.xaml同级目录中)
PasswordBoxHelper代码如下:
public 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);
}
}
ControlAttachProperty代码如下:
public class ControlAttachProperty
{
public static string GetPlaceHolder(DependencyObject obj)
{
return (string)obj.GetValue(PlaceHolderProperty);
}
public static void SetPlaceHolder(DependencyObject obj, string value)
{
obj.SetValue(PlaceHolderProperty, value);
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PlaceHolderProperty =
DependencyProperty.RegisterAttached("PlaceHolder", typeof(string), typeof(ControlAttachProperty), new PropertyMetadata(string.Empty));
}
现在,需要把之前删掉的两句(Style="{StaticResource PasswordBoxStyle1}" 与 local:ControlAttachProperty.PlaceHolder="请输入密码" )加进来。 Style是设置PasswordBox的样式, 在样式里可以重构PasswordBox。local:ControlAttachProperty.PlaceHolder是为passwordbox新增的依赖属性。
运行代码即可获取实现的效果。
需要注意的是:
①代码中用了两个图片,分别时eye.png与eye_slash.png, 在写Demo的时候,是直接放在MainWindow.xaml同级文件夹里。
②xmlns:local="clr-namespace:WpfApp4" , 这里是创建wpf项目的命名空间,喜欢复制代码的兄弟,记得更改为当前创建项目的命名空间。
代码下载:密码明文显示/隐藏