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

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

—

代码如下

一、添加类在“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;}#endregionprivate 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();};
}