WPF UI框架界面开发教程（四）

最新推荐文章于 2024-07-30 08:00:00 发布

有技巧搬砖

最新推荐文章于 2024-07-30 08:00:00 发布

阅读量397

点赞数

分类专栏： MVVM c# WPF UI设计文章标签： c# wpf mvvm

本文链接：https://blog.csdn.net/liaohaiyin/article/details/119181122

版权

MVVM 同时被 3 个专栏收录

92 篇文章 18 订阅

订阅专栏

c# WPF

92 篇文章 24 订阅

订阅专栏

UI设计

92 篇文章 9 订阅

订阅专栏

这篇博客介绍了如何在WPF中扩展PasswordBox控件，实现类似用户名输入框的提示标签功能。通过创建一个PasswordBoxMonitor类，利用依赖属性监控密码长度，当密码为空时显示提示标签，输入密码后自动隐藏。同时，提供了自定义样式的XAML代码，展示了如何将扩展应用于实际项目中，实现输入验证和用户体验的提升。

摘要由CSDN通过智能技术生成

登录密码输入框同样实现带提示标签功能，原理和用户名文本框一样
但是PasswordBox是密封类，不能被继承，还有个问题Password是密文，改变该属性值不会触发
所以需要扩展密码类继承依赖属性类

 public class PasswordBoxMonitor : DependencyObject
    {
        public static bool GetIsMonitoring(DependencyObject property)
        {
            return (bool)property.GetValue(IsMonitoringProperty);
        }

        public static void SetIsMonitoring(DependencyObject property, bool value)
        {
            property.SetValue(IsMonitoringProperty, value);
        }

        public static readonly DependencyProperty IsMonitoringProperty =
            DependencyProperty.RegisterAttached("IsMonitoring", typeof(bool), typeof(PasswordBoxMonitor), new UIPropertyMetadata(false, OnIsMonitoringChanged));

        public static int GetPasswordLength(DependencyObject property)
        {
            return (int)property.GetValue(PasswordLengthProperty);
        }

        public static void SetPasswordLength(DependencyObject property, int value)
        {
            property.SetValue(PasswordLengthProperty, value);
        }

        public static readonly DependencyProperty PasswordLengthProperty =
            DependencyProperty.RegisterAttached("PasswordLength", typeof(int), typeof(PasswordBoxMonitor), new UIPropertyMetadata(0));

        private static void OnIsMonitoringChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var pb = d as PasswordBox;
            if (pb == null)
                return;
            if ((bool)e.NewValue)
            {
                pb.PasswordChanged += PasswordChanged;
            }
            else
            {
                pb.PasswordChanged -= PasswordChanged;
            }
        }

        static void PasswordChanged(object sender, RoutedEventArgs e)
        {
            var pb = sender as PasswordBox;
            if (pb == null)
            {
                return;
            }
            SetPasswordLength(pb, pb.Password.Length);
        }
    }

设置依赖属性IsMonitoring=true,输入密码自动调用回调方法，在回调方法实现密码内容改变事件PasswordChanged

密码扩展类就写完了，把PasswordBoxMonitor的依赖属性应用到密码自定义样式中，

密码框由于Password是密文，改变该属性值不会触发，我们换种方式来实现，用local:PasswordBoxMonitor.PasswordLength属性获取输入是否为空，为空则显示文本标签。输入密码后文本标签隐藏。

 <!--密码输入框-->
    <Style TargetType="{x:Type PasswordBox}">
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="BorderBrush" Value="{StaticResource WordBlueBrush}"/>
        <Setter Property="BorderThickness" Value="0 0 0 1"/>
        <Setter Property="Margin" Value="0 5 0 5"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="local:PasswordBoxMonitor.IsMonitoring" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type PasswordBox}">
                    <Grid>
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        </Border>
                        <TextBlock IsHitTestVisible="False" 
                                   Text="{TemplateBinding Tag}"
                                   x:Name="placeholder"
                                   Visibility="Collapsed"
                                   FontSize="{TemplateBinding FontSize}"
                                   Padding="{TemplateBinding Padding}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                   Foreground="{StaticResource ForegroundMainBrush}">
                        </TextBlock>
                    </Grid>

                    <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="#FF7EB4EA"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                        </Trigger>
                        <Trigger Property="local:PasswordBoxMonitor.PasswordLength" Value="0">
                            <Setter Property="Visibility" TargetName="placeholder" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

用户名和密码输入功能就实现了，看一下效果