如何在 WPF 中实现搜索框的默认文本？答案

【问题标题】：How do you implement default text for a search box in WPF?如何在 WPF 中实现搜索框的默认文本？
【发布时间】：2010-09-27 21:49:14
【问题描述】：

我想为 WPF 搜索文本框实现与“Changing the Default Text in the Search Box”完全相同的东西。该框应在为空时显示一些灰色的“搜索..”文本，然后在输入文本时应正常运行。链接的文章显示了如何在 javascript 中执行此操作。在 WPF 中如何开始这条道路？到目前为止，我的最佳想法是在主文本框之上的另一个文本框，只要搜索文本框获得焦点或文本，该文本框就会不可见。

【问题讨论】：

我刚刚回答了另一个问同样问题的问题：stackoverflow.com/a/10693516/862501

标签： wpf search textbox

【解决方案1】：

此样式将使用背景属性和可视笔刷显示文本。一旦控件获得焦点，文本就会被删除。

    <TextBox.Style>
            <Style TargetType="TextBox">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
                        <Setter Property="Background">
                            <Setter.Value>
                                <VisualBrush Stretch="None">
                                    <VisualBrush.Visual>
                                        <TextBlock Text="Enter value" Foreground="Gray"/>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="{x:Null}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <VisualBrush Stretch="None">
                                    <VisualBrush.Visual>
                                        <TextBlock Text="Enter value" Foreground="Gray"/>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsFocused}" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <VisualBrush Stretch="None">
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBox.Style>

【讨论】：

直截了当，我认为这应该被标记为好的答案。
这会使文本框的背景变灰。我试图解决这个问题会导致默认文本拉伸。

【解决方案2】：

试试 Kevin Moore 的 Bag-o-Tricks 中的 InfoTextBox 示例。你可以从 http://work.j832.com/2008/01/real-update-to-bag-o-tricks.html

【讨论】：

【解决方案3】：

对于这些类型的事物，我认为最好的方法是使用视觉画笔设置背景。视觉画笔可让您使用视觉元素绘制背景，将其与基于文本为空的触发器结合起来，就完成了。

Empty List Box 消息的示例在这里，基本上是一样的。 http://adammills.wordpress.com/2010/08/04/simple-empty-template-for-itemscontrols/

【讨论】：

【解决方案4】：

在 WPF 中，有很多方法可以实现您的目标。

也许最简洁的方法是继承TextBox 并添加一个名为HintText 的新属性。只要Text 为空("")，控件的模板就会显示HintText（可能是斜体和灰色）。否则，它将像普通的TextBox 一样显示Text。

不涉及编写您自己的控件的替代方法是重新模板TextBox 并使用Tag 属性来存储提示文本。

另一种选择是编写一个UserControl，将TextBox 与TextBlock 组合在同一个Grid 中。 TextBlock 将包含提示文本，并且仅当 TextBox 的 Text 为空时才会显示。这可能是最容易实现的，但也是最不灵活的。

【讨论】：

【解决方案5】：

我认为 WPF 扩展工具包中包含的 WatermarkTextBox 正是您想要的。

http://wpftoolkit.codeplex.com/wikipage?title=WatermarkTextBox&referringTitle=Documentation

【讨论】：

【解决方案6】：

您可以在文本框为空时将文本框转换为灰色文本，并使用一个变量告诉您该文本为空，这样当您单击“搜索”时，它就不会搜索“搜索...”

或者您可以使用与您所说的内容类似的内容，但不是上面的文本框，而是下面的文本。如果在顶部有一个透明背景的文本框，而在底部有一个标签，当顶部文本框为空时，该标签应该可以解决问题。

【讨论】：