WPF 给文本框TextBlock以及密码框PassWord加背景水印实现用户登录提示

WPF 给文本框TextBlock以及密码框PassWord加背景水印实现用户登录提示

最近在学WPF写一个登录界面，遇到了一个给文本框和密码框加水印的问题，部分解决方案与网上的有所不同。直接来效果：

文本框TextBlock加水印

这个方案是直接参考网上好心网友的，大致思路就是通过VisualBrush创建一个带有提示语的背景Background，判断TextBlock的内容是否为空进而设置背景是否显示。
代码如下：

   <!--用户名背景水印提示-->
    <VisualBrush x:Key="UserNameHelpBrush" Opacity="0.5" AlignmentX="Left" Stretch="None" >
        <VisualBrush.Visual>
            <TextBlock Text = "{DynamicResource InputUserName }"
                       Foreground ="Gray"  Background="White" 
                     />
        </VisualBrush.Visual>
    </VisualBrush>

<!--***********************************************UserName模板***************************************-->
    
    <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
    <SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
    <SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
    <Style x:Key="UserNameTextBoxStyle" TargetType="{x:Type TextBox}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="AllowDrop" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}"
                                SnapsToDevicePixels="True" CornerRadius="5">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="&#xe623;" FontFamily="../Assets/Fonts/#iconfont"
                                           FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FF007DFA"/>

                            <ScrollViewer x:Name="PART_ContentHost" Grid.Column="1"
                                             Focusable="false" 
                                              HorizontalScrollBarVisibility="Hidden" 
                                              VerticalScrollBarVisibility="Hidden"
                                              VerticalAlignment="Center" MinHeight="20" HorizontalAlignment="Left" Width="237"/>
                            <!--<Border Visibility="Hidden"/>
                            <ContentControl Grid.Column="1" x:Name=" Pressed"/>-->

                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                        </Trigger>
                        
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                        </Trigger>
            
                        <Trigger  Property="Text"   Value="" >
                            <Setter  TargetName="PART_ContentHost" Property="Background" Value="{StaticResource UserNameHelpBrush}"/>
                        </Trigger>   
              
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                        </Trigger>    
                      
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                    <Condition Property="IsSelectionActive" Value="false"/>
                </MultiTrigger.Conditions>
                <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
            </MultiTrigger>
           
        </Style.Triggers>
    </Style>

  <TextBox  x:Name="UserName" Height="30" 
                         Style="{DynamicResource UserNameTextBoxStyle}" FontSize="12" Width="200" />

可以直接参考这位网友的，比较详细，链接：c#笔记–WPF文本框和密码框添加水印效果(背景文字提示)

密码框PassWord加水印

由于密码框没有可以用于判断输入值非空的依赖属性，因此不能采用上述方法，对于我这种C#小白而言，看网友的解答有点费劲。这里提供一个比较简便的方法，大致思路是：

1. 在密码框上面加上一个TextBlock用于输入前的提示
2. 在C#代码中判断Password的输入是否为空
3. 为空则让TextBlock的内容为“请输入密码”，反之亦然

这里有一个TextBlock的IsHitTestVisible属性需要设置为False，当点击该框，无法定位，无法向该框输入内容。这样就可以避免在输入密码时点击到TextBlock导致无法输入。

XMAL 代码如下：

<PasswordBox x:Name="Password"  Grid.Row="1"  Height="30"
                    Style="{DynamicResource PasswordBoxStyle}"  FontSize="12"
                             common:PasswordHelper.Attach="True" PasswordChanged="Password_PasswordChanged"
                             common:PasswordHelper.Password="{Binding LoginModel.Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged }" 
                             Width="200"
                             />
<TextBlock x:Name="PassWordHelp" Grid.Row="1" Text="{DynamicResource InputPassWord}" FontSize="12" 	IsHitTestVisible="False" 
                            Margin="65,13.2,0,11.6" FontWeight="Normal" HorizontalAlignment="Left" 		VerticalAlignment="Center" Height="16" >
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="Gray" Opacity="0.5"/>
                    </TextBlock.Foreground>
  </TextBlock>

C#代码如下：

  private void Password_PasswordChanged(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(Password.Password))
            {
                PassWordHelp.Text = FindResource("InputPassWord") as string;
            }
            else
            {
                PassWordHelp.Text = "";
            }
        }