使用XAML使"默认"文本显示在没有焦点的空TextBox中

Question

我想创建一个TextBox,如果有的话,它会出现一个灰色的"默认"文本

a)空的

b)失去了焦点

当用户进入文本框时,灰色的"默认"文本应该消失.

我尝试过这样做ControlTemplate.Triggers,但我似乎无法找到HasFocus属性.

使用XAML最好的方法是什么？

Answer 1

虽然重新发明轮子没有真正的好处,但看看如何做到这一点可能会很有趣.最简单的方法(在纯XAML中)是在没有聚焦且不包含文本的情况下ControlTemplate为TextBox覆盖创建一个TextBlock:

<ControlTemplate TargetType="TextBox">
<Grid>
    <TextBox Text="{Binding Text, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}" />
    <TextBlock HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="Your Prompt Here"
                Margin="5,0,5,0"
                Foreground="#FF808080"
                FontStyle="Italic"
                IsHitTestVisible="False"
                x:Name="UserMessage"
                Visibility="Hidden"/>
</Grid>
<ControlTemplate.Triggers>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="Text" Value=""/>
            <Condition Property="IsKeyboardFocusWithin" Value="False"/>
            </MultiTrigger.Conditions>
        <Setter Property="Visibility" TargetName="UserMessage" Value="Visible"/>
    </MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

该MultiTrigger手段"显示设置更改为可见,如果Text属性是空的,文本框没有键盘焦点"

如果你想让它更可重用,那么你可以创建一个自定义控件作为它的默认模板和一个包含提示信息的Dependency属性

Answer 2

您可以简单地使用Extended WPF Toolkit的WatermarkTextBox.

我根据您对如何在项目中添加和使用库的评论撰写了一个小指南.

步骤1)References在项目中右键单击并选择Add Reference.

步骤2)找到并添加dll文件WPFToolkit.Extended.dll.

步骤3)最后您需要添加XAML代码.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:extToolkit="http://schemas.xceed.com/wpf/xaml/toolkit"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <extToolkit:WatermarkTextBox Watermark="Enter First Name" />
    </Grid>
</Window>

这里的关键是添加reference到dll文件.

xmlns:extToolkit="http://schemas.xceed.com/wpf/xaml/toolkit"

然后你可以XAML像这样简单地使用它.

<extToolkit:WatermarkTextBox Watermark="Enter First Name" />