• WPF 之 文本框及密码框添加水印效果


    1、文本框添加水印效果

      文本框水印相对简单,不需要重写模板,仅仅需要一个 VisualBrush 和触发器验证一下Text是否为空即可。

    <TextBox Name="txtSerachDataName" Width="120" Height="23" Grid.Column="3" Grid.Row="1">
                <TextBox.Resources>
                    <VisualBrush x:Key="HelpBrush" TileMode="None" Opacity="0.3" Stretch="None" AlignmentX="Left">
                        <VisualBrush.Visual>
                            <TextBlock FontStyle="Italic" Text="水印效果"/>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </TextBox.Resources>
                <TextBox.Style>
                    <Style TargetType="TextBox">
                        <Setter Property="Height" Value="23"></Setter>
                        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
                        <Setter Property="VerticalAlignment" Value="Top"></Setter>
                        <Style.Triggers>
                            <Trigger Property="Text" Value="{x:Null}">
                                <Setter Property="Background" Value="{StaticResource HelpBrush}"/>
                            </Trigger>
                            <Trigger Property="Text" Value="">
                                <Setter Property="Background" Value="{StaticResource HelpBrush}"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBox.Style>
            </TextBox>

    2、密码框添加水印效果

      关于密码框水印就不同于文本框了,可以写个Brush就搞定,因为密码框是没有可以用于判断输入非空的依赖属性的,这就需要我们去加一个,代码如下:

       public class PasswordBoxMonitor : DependencyObject
        {
            public static bool GetIsMonitoring(DependencyObject obj)
            {
                return (bool)obj.GetValue(IsMonitoringProperty);
            }
    
            public static void SetIsMonitoring(DependencyObject obj, bool value)
            {
                obj.SetValue(IsMonitoringProperty, value);
            }
    
            public static readonly DependencyProperty IsMonitoringProperty =
                DependencyProperty.RegisterAttached("IsMonitoring", typeof(bool), typeof(PasswordBoxMonitor), new UIPropertyMetadata(false, OnIsMonitoringChanged));
    
            public static int GetPasswordLength(DependencyObject obj)
            {
                return (int)obj.GetValue(PasswordLengthProperty);
            }
    
            public static void SetPasswordLength(DependencyObject obj, int value)
            {
                obj.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);
            }
        }

      加一个PasswordLength  用于判断密码框长度是否为0,当为0的时候就显示水印,否则就隐藏。

      在使用重构的PasswordBox的时候需要去引用一下:xmlns:WpfTest="clr-namespace:WpfApplication2",WpfApplication2为项目的命名空间。

    <PasswordBox Name="pb" Width="120" VerticalAlignment="Bottom" Height="35"  Grid.Column="3" Grid.Row="3">
      <PasswordBox.Style>
         <Style TargetType="PasswordBox">
            <Setter Property="Height" Value="23"></Setter>
             <Setter Property="HorizontalAlignment" Value="Left"></Setter>
             <Setter Property="VerticalAlignment" Value="Top"></Setter>
             <Setter Property="WpfTest:PasswordBoxMonitor.IsMonitoring"  Value="True"/>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type PasswordBox}">
                         <Border Name="Bd"  Background="{TemplateBinding Background}"  BorderThickness="{TemplateBinding BorderThickness}"
                               BorderBrush="{TemplateBinding BorderBrush}"  SnapsToDevicePixels="true">
                              <Grid>
                                  <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                      <StackPanel Orientation="Horizontal" Visibility="Collapsed" Name="myStackPanel">
                           <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="LightGray" Text="水印效果"/>
                                      </StackPanel>
                              </Grid>
                          </Border>
                          <ControlTemplate.Triggers>
                              <Trigger Property="IsEnabled" Value="false">
                                  <Setter Property="Visibility" TargetName="myStackPanel" Value="Collapsed"/>
                              </Trigger>
                              <Trigger Property="WpfTest:PasswordBoxMonitor.PasswordLength" Value="0">
                                  <Setter Property="Visibility" TargetName="myStackPanel" Value="Visible"/>
                              </Trigger>
                           </ControlTemplate.Triggers>
                       </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </PasswordBox.Style>
    </PasswordBox>

      如上面的代码,重写了一下ControlTemplate,加了一个StackPanel,判断一下密码框的内容长度,不为0的时候显示StanckPanel   否则不显示。

      当然也可以不使用模板,像文本框里面的那种方式去显示,只是给PasswordBox注册一个依赖属性即可,这里只是多说明一种使用方式,根据不同的情况可选择适用的方式。

  • 相关阅读:
    Web前端的状态管理(State Management)
    使用iScroll实现上拉或者下拉刷新
    实现checkbox组件化(Component)
    HTML5 文件异步上传 — h5uploader.js
    利用javascript和WebGL绘制地球 【翻译】
    利用JS跨域做一个简单的页面访问统计系统
    Java JSON、XML文件/字符串与Bean对象互转解析
    JS实现星级评价
    Spring中@Component注解,@Controller注解详解
    制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿
  • 原文地址:https://www.cnblogs.com/xinaixia/p/5512612.html
Copyright © 2020-2023  润新知