wpf提示背景

Posted 2020-08-09

        <TextBox FontSize="17" Height="26" Margin="230,150,189,0" Name="txt_Account" VerticalAlignment="Top" Foreground="Indigo" TabIndex="0" BorderThickness="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">
                    <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>

在传统的WinForm中这种文本框提示水印通常直接在控件的事件中实现。但是在WPF的设计理念中，这种和View强相关的内容不应该暴露在相关的逻辑代码中；而WPF也确实提供了类似的机制达成目的。

对于普通的文本框

因为TextBox的Text属性是一个dependency property，所以直接利用WPF的Data Trigger即可做到

YAML

<TextBox  Width="250"  VerticalAlignment="Center" HorizontalAlignment="Left" x:Name="SearchTermTextBox" Margin="5"/>
<TextBlock IsHitTestVisible="False" Text="Enter Search Term Here" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" Foreground="DarkGray">
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Text, ElementName=SearchTermTextBox}" Value="">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

效果大概如图所示

对于PasswordBox

因为PasswordBox的Password属性不是dependency property，不能附加上data trigger，所以事情瞬间变得困难得多。

一个靠谱的做法是自己提供了一个类，通过attach dependency property得方式为PasswordBox挂接一个用来显示watermark text的属性，然后再利用XAML template为这个属性设置相应的data trigger。

这种方式虽然也要自己写大量的stub code，但是好处在于，这些代码和具体控件完全是分离的；并且这个由我们提供的属性可以和内建属性一样，直接通过XAML，在运行前就绑定好，不需要我们往控件的逻辑中做任何修改。

方法分三步，分别是

1. 提供dependency property的代码
2. 在XAML的resource dictionary中提供我们的template，这部分包含实现事件切换的data trigger
3. 在控件设计的XAML中进行绑定

代码部分请参考 这里

效果大概如下

这个图上看起来很酷炫的淡出淡入也是直接有template的animation完成…

GIF图这里动不起来了……

方法1来自StackOverflow上的 这个回答

方法2来自 此处 ，我对watermarktext.cs做了修改，让这部分代码看起来更自然一些，顺带提高了代码的优雅度。XAML部分是直接复制粘贴的的，这部分完全摊手。

在此对他们表示感谢。