Question

I’m writing an application in WPF using the MVVM-pattern and will really often use TextBoxes.
I don’t want to use labels for the user to know user what the text box is for, i.e. I don’t want something like this:

<TextBlock> Name: </TextBlock>
<TextBox />

Instead, I would like the TextBox to contain its own label. Statically, you would express it like this:

<TextBox>Name</TextBox>

If the cursor is displayed in the textbox, i.e. the TextBox gains focus, I want the description text to disappear. If the TextBox is left empty and it loses the focus, the description text should be shown again. It’s similar to the search textbox of StackOverflow or the one of Firefox. (please tell me if your not sure what I mean).

One TextBox’s label may change at runtime, dependending on e.g. a ComboBox‘s selected element or a value in my ViewModel. (It’s like in Firefox’s search TextBox, if you select google from the search engins’ menu, the TextBox’s label changes to “Google”, if you select “Yahoo” its set to “Yahoo”). Thus I want to be able to bind the label’s content.

Consider that I may already have a Binding on the Text-Property of the TextBox.

How can implement such a behaviour and make it reusable for any of my TextBox‘s? Code is welcome but not needed; a description of what to do is enough.

Thank you in advance.

Answer 1

Here is a style I think is exactly what you are looking for, and it’s pure XAML.

<Style x:Key="WatermarkTextBox" TargetType="{x:Type TextBox}">
     <Setter Property="Template">
          <Setter.Value>
               <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                         <Border x:Name="BorderBase" Background="White" BorderThickness="1.4,1.4,1,1" BorderBrush="Silver"> 
                             <Label x:Name="TextPrompt" 
                                Content="{Binding RelativeSource={RelativeSource  Mode=TemplatedParent}, Path=Tag}" 
                                Background="{TemplateBinding Background}" Visibility="Collapsed" 
                                Focusable="False" Foreground="Silver"/>
                         </Border>
                         <ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="Black"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                         <MultiTrigger>
                              <MultiTrigger.Conditions>
                                   <Condition Property="IsFocused" Value="False"/>
                                   <Condition Property="Text" Value=""/>
                              </MultiTrigger.Conditions>
                              <Setter Property="Visibility" TargetName="TextPrompt" Value="Visible"/>
                         </MultiTrigger>
                         <Trigger Property="IsFocused" Value="True">
                              <Setter Property="BorderBrush" TargetName="BorderBase" Value="Black"/>
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="False">
                              <Setter Property="Foreground" Value="DimGray" />
                         </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
           </Setter.Value>
      </Setter>
 </Style>

Usage is:

<TextBox Style="{StaticResource WatermarkTextBox}" Tag="Full Name"/>

where Tag is the help message you want to show.

You could clean up this style for your own use, but the most important part is the which controls hiding/showing the helper text.

It’s worth noting as well, there is already a DependencyObject available for storing the helper text, so you don’t need to create your own with this method.

FrameworkElement.Tag is available for holding arbitrary information about this element. That’s why we set the Tag property:

http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.tag.aspx