仅使用 XAML 的 WPF 带水印 TextBox

• 下载源代码 - 11.4 KB
• 在 GitHub 上 Fork 源代码

引言

我找到的许多关于如何为 TextBox 添加水印的示例都涉及大量的代码隐藏、处理文本更改事件，或者使用自定义 IValueConverter 或 IMultiValueConverter。 在本文中，我将展示如何仅使用 XAML 标记为 TextBox 添加水印。

背景

我最近参与的一个演示项目预先设置了 TextBox 的文本，作为一种简陋的水印。 但是，当你开始在框中键入时，你必须先清除默认值。 这不是水印，这只是令人恼火。 我想修复这个问题，但我不想编写大量的 C# 代码来实现它。 我知道这可以在 XAML 中完成。

使用代码

让我们直接开始吧

<Grid x:Name="WatermarkWrapper">
    <TextBox x:Name="WaterMarkedTextBox" Text="{Binding Text, FallbackValue='Hello World'}" />
    <TextBlock IsHitTestVisible="False" Text="{Binding WatermarkText}" 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>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Text}" Value="" />
                            <Condition Binding="{Binding ElementName=WaterMarkedTextBox, Path=IsKeyboardFocused}" Value="False" />
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.Setters>
                            <Setter Property="Visibility" Value="Visible" />
                        </MultiDataTrigger.Setters>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</Grid>

首先，我们将所有内容包装在 Grid 中。 我们将使用它作为容器来定义我们的整体布局。 然后，我们添加 TextBox 用于用户输入，以及 TextBlock 作为我们的水印。 由于我们没有指定行和列定义，这些控件将重叠——我们希望这样；水印应该在视觉上出现在 TextBox 的顶部。 但是，我们不希望 TextBlock 包含在任何点击测试结果中，因此我们将 IsHitTestVisible 属性设置为 false。

对于 TextBlock 的样式，我们将默认将其折叠起来，然后在 DataContext 的 Text 属性没有内容 *并且* TextBox 没有键盘焦点时将其设置为可见。

就这样了！ 没有转换器，没有扩展，只有纯粹的 XAML。

致谢

• AndyL2s 原始文章
• APC 的回答 来自 Stack Overflow

历史

2015-03-04：初始发布