How do you implement default text for a search box in WPF?

Question

I want to implement something exactly like "Changing the Default Text in the Search Box" for a WPF search TextBox. The box should show some greyed out "Search.." text when it's empty, and then it should function normally when text is typed in. The linked article shows how to do this in javascript. How would one start down this path in WPF? The best idea I've had so far is another text box on top of the main one that goes invisible whenever the search textbox gets focus or text.

Solution 1

Try the InfoTextBox sample from Kevin Moore's Bag-o-Tricks. You can download it from http://work.j832.com/2008/01/real-update-to-bag-o-tricks.html

Solution 2

This style will show text using a the background property and a visualbrush. Once control gets focus the text is removed.

    <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>

Solution 3

The best way I think for these types of things is to set the background using a visual brush. The visual brush lets you paint a background using Visual Elements, combine it with a trigger based on text being empty and it's done.

Example for Empty List Box message is here, basically the same thing. http://adammills.wordpress.com/2010/08/04/simple-empty-template-for-itemscontrols/

Solution 4

I think the WatermarkTextBox included in the WPF extended toolkit does exactly what you want.

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

Solution 5

As always in WPF, there are many ways to achieve your goal.

Perhaps the cleanest way is to subclass TextBox and add a new property called HintText. The template for your control would display HintText (probably in italics and gray) as long as Text is empty (""). Otherwise, it would display the Text just like a regular TextBox.

An alternative that doesn't involve writing your own control is to re-template TextBox and use the Tag property to store the hint text.

Another alternative is to write a UserControl that combines a TextBox with, say, a TextBlock inside the same Grid. The TextBlock would contain the hint text and would only be displayed if the TextBox's Text is empty. This is probably the easiest to achieve, but is also the least flexible.

View more solutions

Comments

[Adam Szabo]

Straightforward, in my opinion this should be marked as the good answer.

[Grault]

This makes the background of the textbox gray. My attempts to resolve that caused the default text to stretch.