WPF开发登录窗口之——添加密码完善登录窗口

WPF开发者QQ群： 340500857  | 微信群  目前人数太多，暂不开放

 

01

—

代码如下

一、添加类在“CustomControl”文件夹中加“PasswordInputBox.xaml”

与文本输入框一样，唯一的区别是将文本框改成密码框：

<UserControl x:Class="LoginWindow.CustomControl.PasswordInputBox"
             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:LoginWindow.CustomControl"
             mc:Ignorable="d" 
             d:DesignHeight="40" d:DesignWidth="300">
    <Grid>
        <!-- 提示文本 -->
        <TextBlock x:Name="Hint" Foreground="#3F000000" FontFamily="NSimSun" FontSize="13" VerticalAlignment="Center" Padding="39,0"/>
        <!-- 图标 -->
        <Image x:Name="ImageIcon" HorizontalAlignment="Left" Width="16" VerticalAlignment="Center" Margin="12,0,0,0"/>
        <!-- 密码框 -->
        <PasswordBox x:Name="PasswordBox01" Style="{StaticResource PasswordBoxStyle}" PasswordChanged="PasswordBox01_PasswordChanged" Padding="36,0"/>
        <!-- 清除文本按钮 -->
        <Button x:Name="Clear" Width="40" Height="40" HorizontalAlignment="Right" Visibility="Hidden" Click="Clear_Click" Focusable="False">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Image Source="Image/Clear.png" Width="40"/>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>

二、修改继承并实现方法：

using System.Windows;
using System.Windows.Media.Imaging;


namespace LoginWindow.CustomControl
{
    public partial class PasswordInputBox : InputBoxBase
    {
        public PasswordInputBox()
        {
            InitializeComponent();
        }


        #region 接口实现


        protected override void ApplyText()
        {
            PasswordBox01.Password = Text;
        }
        protected override void ApplyPlaceHolder()
        {
            Hint.Text = PlaceHolder;
        }


        protected override void ApplyIcon(BitmapImage icon)
        {
            ImageIcon.Source = icon;
        }


        #endregion


        private void PasswordBox01_PasswordChanged(object sender, RoutedEventArgs e)
        {
            Text = PasswordBox01.Password;
            // 显示或隐藏“清除按钮”与“占位文本”
            Clear.Visibility = Text == "" ? Visibility.Hidden : Visibility.Visible;
            Hint.Visibility = Text == "" ? Visibility.Visible : Visibility.Hidden;
        }
    }
}

三、修改“MainWindow.xaml”，在“StackPanel”中添加一个密码输入框：

<!-- 密码输入框 -->
<cc:PasswordInputBox Height="40" PlaceHolder="密码" Icon="Assets/Lock.png" Margin="0,20,0,0"/>

四、产生这样的效果的原因如下：
输入密码时，会调用：
与

private void PasswordBox01_PasswordChanged(object sender, RoutedEventArgs e)
{
    Text = PasswordBox01.Password;
}

‍

五、方法中修改“Text”属性导致调用：

protected override void ApplyText()
{
    PasswordBox01.Password = Text;
}

六、文本框与密码框不同的是：密码框赋值时，光标会定位到起始处。解决方法就是，在赋值前判断一下是否相等：

protected override void ApplyText()
{
    if (PasswordBox01.Password != Text)
        PasswordBox01.Password = Text;
}

七、在主窗口中的“StackPanel”中添加一个登录按钮：

<!-- 登录按钮 -->
<Button x:Name="LoginButton" Content="登录" Height="40" Margin="0,20,0,0"/>
<!-- 可点击文本 -->
<Grid Margin="0 20 0 0">
    <TextBlock FontSize="12">
        <Hyperlink Foreground="#A1A1A1">忘记密码</Hyperlink>
    </TextBlock>
    <TextBlock FontSize="12" HorizontalAlignment="Right" Margin="0 0 -1 0">
        <Hyperlink Foreground="#4370F5" Click="SignUp_Click">注册账号</Hyperlink>
    </TextBlock>
</Grid>

八、这种形式的文本默认带下划线，通过在“Hyperlink”中添加属性来移除下划线：

<Hyperlink Foreground="#A1A1A1" TextDecorations="None">忘记密码</Hyperlink>

九、实现关闭按钮功能

private void Window_Loaded(object sender, RoutedEventArgs e)
{
   
    // 关闭窗口
    ((Button)GetTemplateChild("CloseButton")).Click += delegate
    {
        Application.Current.Shutdown();
    };
}

源码地址如下

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857 

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/yanjinhuagood

扫一扫关注我们，

更多知识早知道！

点击阅读原文可跳转至源代码