How to: Add a Watermark to a TextBox

The following example shows how to aid usability of a TextBox by displaying an explanatory background image inside of the TextBox until the user inputs text, at which point the image is removed. In addition, the background image is restored again if the user removes their input. See illustration below.

A TextBox with a background image


The reason a background image is used in this example rather then simply manipulating the Text property of TextBox, is that a background image will not interfere with data binding.



    <TextBox Name="myTextBox" TextChanged="OnTextBoxTextChanged" Width="200">
        <ImageBrush ImageSource="TextBoxBackground.gif" AlignmentX="Left" Stretch="None" />
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace SDKSample
    public partial class TextBoxBackgroundExample : Page

        void OnTextBoxTextChanged(object sender, TextChangedEventArgs e)

            if (myTextBox.Text == "")
                // Create an ImageBrush.
                ImageBrush textImageBrush = new ImageBrush();
                textImageBrush.ImageSource =
                    new BitmapImage(
                        new Uri(@"TextBoxBackground.gif", UriKind.Relative)
                textImageBrush.AlignmentX = AlignmentX.Left;
                textImageBrush.Stretch = Stretch.None;
                // Use the brush to paint the button's background.
                myTextBox.Background = textImageBrush;


                myTextBox.Background = null;



Namespace SDKSample
    Partial Public Class TextBoxBackgroundExample
        Inherits Page

        Private Sub OnTextBoxTextChanged(ByVal sender As Object, ByVal e As TextChangedEventArgs)

            If myTextBox.Text = "" Then

                ' Create an ImageBrush.
                Dim textImageBrush As New ImageBrush()

                textImageBrush.ImageSource =
                    New BitmapImage(New Uri("TextBoxBackground.gif", UriKind.Relative))
                textImageBrush.AlignmentX = AlignmentX.Left
                textImageBrush.Stretch = Stretch.None

                ' Use the brush to paint the button's background.
                myTextBox.Background = textImageBrush


                myTextBox.Background = Nothing
            End If

        End Sub

    End Class

End Namespace

See Also

TextBox Overview
RichTextBox Overview