WPF Watermark TextBox using XAML Style

What is watermarked TextBox

Watermarked TextBox is a special type of text input control which displays a message or image when it is empty.Usually the message will be "Enter the text" and sometimes it may be description about that data field.

When we click on the TextBox ie getting focus the watermark text ("Enter the text") will disappear and it will become an ordinary TextBox.

Developing Watermark TextBox

The tasks of developer are hiding the watermark on getting focus and showing again on lost focus, if the user doesn't entered value in that.ie if the TextBox is empty watermark should come again.

In earlier days this itself was a control which is inherited from normal TextBox.But with the help of Templating and Trigger support in WPF we could achieve it very easily without inheriting.Just by Stying and Templating an ordinary TextBox.

Structure of Watermark TextBox Style

The style can be based on the style of TextBox itself.This reduces our effort in implementing normal TextBox behaviors.We are just going to concentrate on Template.

The normal TextBox template contains a ScrollViewer to hold the data.We are just going to put a TextBlock over that which is going to hold the Watermark text("Enter the Text").By default the visibility of this new TextBlock will be hidden.

Inside ControlTemplate

<Grid>

    <ScrollViewer x:Name="PART_ContentHost"

                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

    <TextBlock x:Name="textBlock"

               Opacity="0.345"

               Text="Enter Text Here"

               TextWrapping="Wrap"

               Visibility="Hidden" />

</Grid>

Now we write Trigger to  show this TextBlock on demand.There are two conditions which shows this watermark.They are "IsFocused=False" and Length of the Text=0.So we write a MultiTrigger with 2 conditions in it.One is for LostFocus and other is for Text.Length respectively.

<ControlTemplate.Triggers>

    <MultiTrigger>

        <MultiTrigger.Conditions>

            <Condition Property="IsFocused"

                       Value="False" />

            <Condition Property="Text"

                       Value="" />

        </MultiTrigger.Conditions>

        <Setter Property="Visibility"

                TargetName="textBlock"

                Value="Visible" />

    </MultiTrigger>

</ControlTemplate.Triggers>

Now whenever the TextBox comes in a state where the IsFocused=False and Text="" the Watermark TextBlock will get displayed.You can replace the watermark TextBlock by any image or what ever you want..

Complete Style

<Style x:Key="WaterMarkTextBoxStyle"

       BasedOn="{StaticResource {x:Type TextBox}}"

       TargetType="{x:Type TextBox}">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type TextBox}">

                <Grid>

                    <ScrollViewer x:Name="PART_ContentHost"

                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

                    <TextBlock x:Name="textBlock"

                               Opacity="0.345"

                               Text="Enter Text Here"

                               TextWrapping="Wrap"

                               Visibility="Hidden" />

                </Grid>

                <ControlTemplate.Triggers>

                    <MultiTrigger>

                        <MultiTrigger.Conditions>

                            <Condition Property="IsFocused"

                                       Value="False" />

                            <Condition Property="Text"

                                       Value="" />

                        </MultiTrigger.Conditions>

                        <Setter Property="Visibility"

                                TargetName="textBlock"

                                Value="Visible" />

                    </MultiTrigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

This can be done by a graphics designer alone.That means using Expression Blend.Will be posting steps later.