How do you implement default text for a search box

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.

Answer 1

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

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

Answer 2

You could transform the textbox to have gray text whenever its empty and a variable that would tell you that is empty, so that when you clicked Search it would not go searching for "Search..."

Or you could use something similar to what you are saying, but instead of a textbox above you could have text below. If on top you have a textbox with transparent background and on the bottom you have a label that has "Search" when the top textbox is empty that should solve the problem.

Answer 3

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

Answer 4

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/

Answer 5

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>

Answer 6

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.