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

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

来源： 阅读：559 时间：2014-12-31

分享：

按照惯例，先看下效果

文本框水印

文本框水印相对简单，不需要重写模板，仅仅需要一个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>

如上图，Text为空的时候去设置下背景的Bursh就行了。

密码框水印

关于密码框水印就不同于文本框了，可以写个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"   我写的是示范的demo   所以命名空间是WpfApplication2。

Xaml代码如下：

<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注册一个依赖属性即可，这里只是多告诉大家一种使用方式，根据不同的情况可选择适用的方式。