水印文本框的 WPF 水印密码框

Question

我正在使用水印文本框，如 WPF 中的水印文本框

 <Grid Grid.Row="0" Background="{StaticResource brushWatermarkBackground}" Style="{StaticResource EntryFieldStyle}" >
        <TextBlock Margin="5,2" Text="This prompt dissappears as you type..." Foreground="{StaticResource brushWatermarkForeground}"
                   Visibility="{Binding ElementName=txtUserEntry, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" />
        <TextBox Name="txtUserEntry" Background="Transparent" BorderBrush="{StaticResource brushWatermarkBorder}" />
    </Grid>

我如何将其应用于密码框？

Answer 1

一般方法是相同的：编写自定义控件样式，并在密码框为空时显示水印。这里唯一的问题是 PasswordBox.Password 不是依赖属性，您不能在触发器中使用它。此外，PasswordBox 是密封的，因此您无法覆盖此通知行为，但您可以在此处使用附加属性。

以下代码演示了如何操作。

XAML：

<Window x:Class="WpfTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:WpfTest="clr-namespace:WpfTest"
    Title="Password Box Sample" Height="300" Width="300">
  <Window.Resources>
    <Style x:Key="{x:Type PasswordBox}"
        TargetType="{x:Type PasswordBox}">
      <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}"/>
                <TextBlock Text="Please enter your password" 
                           Margin="4, 2, 0, 0"
                           Foreground="Gray" 
                           Visibility="Collapsed"
                           Name="txtPrompt" />
              </Grid>
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsEnabled"
                                         Value="false">
                <Setter TargetName="Bd"
                                            Property="Background"
                                            Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                <Setter Property="Foreground"
                                            Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
              </Trigger>
              <Trigger Property="WpfTest:PasswordBoxMonitor.PasswordLength" Value="0">
                <Setter Property="Visibility" TargetName="txtPrompt" Value="Visible"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <PasswordBox VerticalAlignment="Top"/>
  </Grid>
</Window>

C#：

using System.Windows;
using System.Windows.Controls;

namespace WpfTest {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }

  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);
    }
  }
}

请注意 XAML 代码中的 PasswordBoxMonitor。

Answer 2

您可以自己显示/隐藏背景，而不是使用触发器：

XAML：

<PasswordBox x:Name="passwordBox" PasswordChanged="passwordChanged" 
        Background="{StaticResource PasswordHint}" />

代码隐藏：

// helper to hide watermark hint in password field
private void passwordChanged(object sender, RoutedEventArgs e)
{           
    if (passwordBox.Password.Length == 0)
        passwordBox.Background.Opacity = 1;
    else
        passwordBox.Background.Opacity = 0;
}

Answer 3

您可以使用我的方法来实现水印行为。您所要做的就是复制并粘贴 TextBoxWatermarkBehavior 并将 Behavior 更改为 Behavior。

您可以在此处找到演示项目

Answer 4

@blindmeis 的建议很好。对于PasswordBox，该类如下。

public class PasswordBoxWatermarkBehavior : System.Windows.Interactivity.Behavior<PasswordBox>
{
    private TextBlockAdorner adorner;
    private WeakPropertyChangeNotifier notifier;

    #region DependencyProperty's

    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.RegisterAttached("Label", typeof(string), typeof(PasswordBoxWatermarkBehavior));

    public string Label
    {
        get { return (string)GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    public static readonly DependencyProperty LabelStyleProperty =
        DependencyProperty.RegisterAttached("LabelStyle", typeof(Style), typeof(PasswordBoxWatermarkBehavior));

    public Style LabelStyle
    {
        get { return (Style)GetValue(LabelStyleProperty); }
        set { SetValue(LabelStyleProperty, value); }
    }

    #endregion

    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.Loaded += this.AssociatedObjectLoaded;
        this.AssociatedObject.PasswordChanged += AssociatedObjectPasswordChanged;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        this.AssociatedObject.Loaded -= this.AssociatedObjectLoaded;
        this.AssociatedObject.PasswordChanged -= this.AssociatedObjectPasswordChanged;

        this.notifier = null;
    }

    private void AssociatedObjectPasswordChanged(object sender, RoutedEventArgs e)
    {
        this.UpdateAdorner();
    }

    private void AssociatedObjectLoaded(object sender, System.Windows.RoutedEventArgs e)
    {
        this.adorner = new TextBlockAdorner(this.AssociatedObject, this.Label, this.LabelStyle);

        this.UpdateAdorner();

        //AddValueChanged for IsFocused in a weak manner
        this.notifier = new WeakPropertyChangeNotifier(this.AssociatedObject, UIElement.IsFocusedProperty);
        this.notifier.ValueChanged += new EventHandler(this.UpdateAdorner);
    }

    private void UpdateAdorner(object sender, EventArgs e)
    {
        this.UpdateAdorner();
    }


    private void UpdateAdorner()
    {
        if (!String.IsNullOrEmpty(this.AssociatedObject.Password) || this.AssociatedObject.IsFocused)
        {
            // Hide the Watermark Label if the adorner layer is visible
            this.AssociatedObject.TryRemoveAdorners<TextBlockAdorner>();
        }
        else
        {
            // Show the Watermark Label if the adorner layer is visible
            this.AssociatedObject.TryAddAdorner<TextBlockAdorner>(adorner);
        }
    }
}

Answer 5

Werner Wichtig 的方法简单又好，但不适用于带有某些文本的 Background 属性。我已将它与 Style 属性一起使用。

PasswordBox > 的 XAML 代码Style 资源：

<Window.Resources>
    <Style x:Key="PasswordStyle" TargetType="PasswordBox" >
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PasswordBox">
                    <Border MinWidth="{TemplateBinding MinWidth}">
                        <Grid>
                            <StackPanel Margin="8">
                                <ScrollViewer x:Name="PART_ContentHost"/>
                            </StackPanel>
                            <StackPanel>
                                <TextBlock Name="PART_TempText" Text="Enter Password" Foreground="#807C7C"
    Visibility="Collapsed" TextAlignment="Center" HorizontalAlignment="Center" Padding="8" />
                            </StackPanel>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding Password.Length, RelativeSource={RelativeSource Self}}" Value="0">
                            <Setter TargetName="PART_TempText" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

您的目标 PasswordBox 代码：

<PasswordBox x:Name="txtPasswordBox" PasswordChanged="txtPasswordBox_PasswordChanged" 
    Style="{StaticResource PasswordStyle}" />

在 PasswordBox 的 PasswordChanged 事件上实现的代码隐藏逻辑：

private void txtPasswordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (txtPasswordBox.Password.Length == 0)
        txtPasswordBox.Style = Resources["PasswordStyle"] as Style;
    else
        txtPasswordBox.Style = null;
}

这是最终的结果：