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

最新推荐文章于 2024-07-04 15:01:01 发布
最新推荐文章于 2024-07-04 15:01:01 发布
阅读量8.7k 收藏 31
点赞数 6
文章标签： c# wpf .net mvvm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_love_grape/article/details/119802065
版权

前言：这里我们使用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键即可）

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

        /// <summary>
        /// 控制TextBox显示或者隐藏----TextBox来显示明文
        /// </summary>
        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));

        /// <summary>
        /// 控制PassworBox显示或者隐藏----PasswordBox控件来显密文
        /// </summary>
        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));

        /// <summary>
        /// 和“眼睛”进行绑定
        /// </summary>
        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;
                }
            }));

        /// <summary>
        /// 点击图标“x”,使密码框清空
        /// </summary>
        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 = "";
            }));

        /// <summary>
        /// 控制显示符号“x”
        /// </summary>
        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));

        /// <summary>
        /// 密码
        /// </summary>
        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前台代码：

<UserControl x:Class="WpfApp.View.PasswordUserControl.PasswordBoxUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp.View.PasswordUserControl"
             mc:Ignorable="d" >
    <UserControl.Resources>
        <Style TargetType="CheckBox" x:Key="CheckBoxStyle">
            <Setter Property="FontFamily" Value="../../Assets/Fonts/#iconfont"></Setter>
            <Setter Property="HorizontalAlignment" Value="Right"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="Margin" Value="0 0 5 0"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Content}"                               
                                   Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent },Path=Margin}"></TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="TextBox" x:Key="PasswordVisibleStyle">
            <Setter Property="FontWeight" Value="Regular"></Setter>
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Height" Value="32" />
            <Setter Property="Foreground" Value="#303133"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Border BorderBrush="#dcdfe6" CornerRadius="4" BorderThickness="1" 
                                Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" VerticalAlignment="Center"
                                      FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FontSize}" IsTabStop="False" Margin="2"
                                      Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}" />
                                <CheckBox Grid.Column="1" Style="{StaticResource CheckBoxStyle}" Content="&#xe628;" Foreground="#e6e6e6" 
                                          IsChecked="{Binding (local:PasswordBoxUserControl.IsCleared),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}" 
                                          Visibility ="{Binding (local:PasswordBoxUserControl.ClearVisibility),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}"/>
                                <CheckBox Grid.Column="2" Style="{StaticResource CheckBoxStyle}" Content="&#xe697;" Foreground="#bfbfbf"
                                          IsChecked="{Binding (local:PasswordBoxUserControl.IsChecked),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" Value="#ebeef5"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="PasswordBox" x:Key="PasswordBoxCollapsedStyle">
            <Setter Property="FontWeight" Value="Regular"></Setter>
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Height" Value="32" />
            <Setter Property="Foreground" Value="#303133"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="PasswordBox">
                        <Border BorderBrush="#dcdfe6" CornerRadius="4" BorderThickness="1"
                                Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" VerticalAlignment="Center"
                                      FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FontSize}" IsTabStop="False" Margin="2"
                                      Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}" />
                                <CheckBox Grid.Column="1" Style="{StaticResource CheckBoxStyle}" Content="&#xe628;" Foreground="#e6e6e6"
                                          IsChecked="{Binding (local:PasswordBoxUserControl.IsCleared),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}" 
                                          Visibility ="{Binding (local:PasswordBoxUserControl.ClearVisibility),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}"/>
                                <CheckBox Grid.Column="2" Style="{StaticResource CheckBoxStyle}" Content="&#xe602;" Foreground="#bfbfbf"
                                          IsChecked="{Binding (local:PasswordBoxUserControl.IsChecked),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" Value="#ebeef5"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid>
        <TextBox Style="{StaticResource PasswordVisibleStyle}" 
                 Visibility="{Binding (local:PasswordBoxUserControl.TbVisibility),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}" 
                 Text="{Binding (local:PasswordBoxUserControl.Password),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
        <PasswordBox Style="{StaticResource PasswordBoxCollapsedStyle}" 
                     Visibility="{Binding (local:PasswordBoxUserControl.PwVisibility),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},Mode=TwoWay}" 
                     local:PasswordBoxHelper.Attach="True" local:PasswordBoxHelper.Password="{Binding (local:PasswordBoxUserControl.Password),RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></PasswordBox>
    </Grid>
</UserControl>

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

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

PasswordBoxWindow前台代码：

<Window x:Class="WpfApp.View.PasswordBoxWindow"
        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:WpfApp.View" xmlns:usercontrols="clr-namespace:WpfApp.View.PasswordUserControl" xmlns:viewmodel="clr-namespace:WpfApp.ViewModel"
        mc:Ignorable="d"
        Title="PasswordBoxWindow" Height="200" Width="350"  
        WindowStyle="None" WindowStartupLocation="CenterScreen"
        AllowsTransparency="True" Background="Transparent">
    <Window.DataContext>
        <viewmodel:PasswordBoxViewModel></viewmodel:PasswordBoxViewModel>
    </Window.DataContext>
    <Border BorderBrush="#20333333" BorderThickness="1" CornerRadius="8" Background="White" Margin="0">
        <Border.Effect>
            <DropShadowEffect BlurRadius="8" Color="#20333333" ShadowDepth="0"></DropShadowEffect>
        </Border.Effect>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <TextBlock Text="自定义密码框：" FontSize="18" FontFamily="Microsoft Yahei" VerticalAlignment="Center"></TextBlock>
                <usercontrols:PasswordBoxUserControl Password="{Binding Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="200"></usercontrols:PasswordBoxUserControl>
            </StackPanel>
    </Border>
</Window>

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自己画一个）

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

Grape-!
关注
WPF密码输入框明文掩码切换
lingxiao16888的博客
05-21 681
WPF的PasswordBox不能像Winform中的PasswordBox那样，通过PasswordBox.PasswordChar=(char)0显示明文。所以这里使用无外观控件构筑掩码明文切换。无外观控件遵守Themes/Generic.xaml文件配置.
WPF教程（二十）密码框
热门推荐
刺猬的优雅
10-19 2万+
WPF中编辑常规的文字都是使用文本框，但是如果是输入密码呢？功能应该是一样的，但是我们不想周边的人看着我们一个字母一个字母的输入，这样密码就被泄漏了，因此我们想用别的字符来替代真实密码的显示。出于这个目的，WPF有一个密码框控件，用起来和文本框一样。 <Window x:Class="WpfTutorialSamples.Basic_controls.PasswordBoxSample"
WPF PasswordBox点击眼睛查看明文样式
OneOnce的专栏
08-15 8013
效果：WPF PasswordBox样式(占位符，清除按钮 ) 其他资源查看上一篇： Style： <Border x:Name="PART_Root"
WPF实现PasswordBox切换明密功能
不迁怒，不贰过。小知识，大智慧。
04-25 2899
WPF实现PasswordBox切换明密功能。
C# Wpf直接调用PasswordBox简单实现显示明文(一)
morliz的博客
11-23 2151
Wpf 调用PasswordBox简单对明文显示的实现
Wpf 使用TextBox制作一个可以切换明密文的PasswordBox
weixin_46591332的博客
08-11 2424
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
C# Wpf自定义控件简单实现密码框(PasswordBox)明密文切换、清除功能及数据绑定(二)
morliz的博客
11-22 3919
对Wpf自定义控件的详细解析及具体业务场景应用
WPF实现密码框PasswodBox,明文密文切换，悬停边框变色，密码框提示等
04-18
在UserControl中使用TextBox、PasswordBox等控件自定义一个具有明文、密文、check/uncheck更改图标等功能的密码框控件；需要用到附加属性、依赖属性、style、template等；
WPF密码明文显示样式.zip
09-03
3. **Toggle Switch**：为了在明文和密文之间切换，我们可以添加一个切换按钮（ToggleSwitch）或者复选框（CheckBox）。当用户切换开关时，我们改变PasswordBox的显示模式。 4. **MVVM模式**：在WPF应用中，通常...
输入密码框，自定义长度，明文显隐，色调
08-27
本文将详细讨论如何实现一个类似支付宝的自定义输入密码框，包括自定义长度、明文显隐和色调调整功能。 首先，我们关注的焦点是"密码输入框"。在移动应用或网页开发中，密码输入框通常是用户输入密码的地方，通常以...
wpf 带水印的passwordbox控件
11-30
在Windows Presentation Foundation (WPF) 中，`PasswordBox` 是一个常见的控件，用于收集用户的密码输入，确保数据的安全性。然而，原生的`PasswordBox` 控件并不支持水印功能，即在用户未输入任何字符时显示提示性...
wpf TextBox 做密码输入框
11-16
wpf 自带的密码输入框在触屏上无法自动唤出触控面板，因此修改了一个textbox的密码输入框
WPF自定义ComboBox用户名,PasswordBox密码带水印输入框
04-11
WPF自定义ComboBox用户名,PasswordBox密码带水印输入框WPF自定义ComboBox用户名,PasswordBox密码带水印输入框WPF自定义ComboBox用户名,PasswordBox密码带水印输入框
使用附加属性 实现wpf中的passwordBox 的明文/密文密码切换
最新发布
helldoger的博客
07-04 614
【代码】使用附加属性 实现wpf中的passwordBox 的明文/密文密码切换。
【WPF应用22】WPF 中的 PasswordBox 控件详解
qq_35320456的博客
03-29 3548
WPF 中的 PasswordBox 控件详解
关于WPF PasswordBox
liusarzn的博客
03-21 2232
在WPF中，想要实现密码输入框，通常使用PasswordBox，但是PasswordBox没有提供简单的设置输入提示的方法，想要实现此功能，通常需要通过模版，查了网上的很多实现，感觉都比较复杂，需要绕很多的数据模版、ui模版。秉持代码能少则少的原则，通过DynamicResource实现了一个简易版本的带输入提示的密码输入框，对WPF熟练度还不是很高，贴出代码供大家参考，欢迎大神指出代码不足。 xaml代码如下： <PasswordBox x:Name="pwd" Grid.Row="
MVVM架构下wpf的密码框绑定（附加属性）
weixin_46407807的博客
09-06 1218
但是使用PasswordBox的密码框就不行了，因为没有Text这个属性，Password不是依赖属性。背景：TextBox可以很轻松地对Text使用Binding，绑定ViewModel类里面的属性。用上附加属性的PasswordBox就可以用这个附加属性绑定ViewModel的内容了。帮助类中设置附加属性，附加属性没有指定是在哪个控件，想要在哪个地方用都行。那么就要自己实现一个PasswordBox的帮助类了。好像上面的写复杂了，其实就是简单的附加属性就行。
WPF 密码框 密码可见切换
时意
05-19 4952
实现大体功能思路 一个Grid包含一个文本 一个密码框 通过点击图片来显示隐藏 这俩个控件 最难的其实就是prassWord不支持绑定 写了一个帮助类 界面 <Grid HorizontalAlignment="Left" Margin="32,225,32,276" VerticalAlignment="Top" Width="408" Height="54"> <TextBox x:Name="PwTxTBox" V...
WPF 密码框水印与明文切换
dotNET跨平台
06-18 388
WPF开发者QQ群：340500857欢迎转发、分享、点赞、在看，谢谢~。效果预览（更多效果请下载源码体验）：一、PasswordWithPlainText.xaml 代码如下&l...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值