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

按照慣例，先看下效果

 

文本框水印

文本框水印相對簡單，不須要重寫模板，僅僅須要一個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註冊一個依賴屬性便可，這裏只是多告訴你們一種使用方式，根據不一樣的狀況可選擇適用的方式。

 

WPF技術交流羣：94234450  

點擊加入QQ羣：

無論你遇到了什麼問題，咱們毫不會讓你獨自去面對！