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

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

來源： 閱讀：559 時間：2014-12-31

分享：

0

按照慣例，先看下效果

 

文本框水印

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