Dhananjay Kumar

In this tutorial in step by step manner we will learn to create watermark textbox in Windows Phone 8. Watermark textbox looks like below. You use watermark textbox in your app if you want to display readable text to user such that they can enter desired information in that particular textbox. In below app these two watermark textboxes are giving information that user should enter Name and Phone in first and second textboxes respectively.

Let us learn how we can create watermark textbox.

Step 1

Create two text boxes and set text property of textboxes as watermark text. Since we want to display Name and Phone as watermark text of two textboxes so we have set Text property as Name and Phone respectively.

<TextBox x:Name="txtName"
                     Text="Name"                     
                     GotFocus="txtName_GotFocus" 
                     LostFocus="txtName_LostFocus"
            />
                
            <TextBox x:Name="txtPhone" 
                     Text="Phone"                    
                     GotFocus="txtName_GotFocus"
                     LostFocus="txtName_LostFocus"
             />

I have also set GotFocus and LostFocus events of textboxes.

Step 2

In watermark textbox when user will click on the textbox prepopulated value should get erased and user can type in new value. In Windows Phone 8 for textbox GotFoucs event gets fired when user selects textbox, so on GotFocus we need to perform two tasks,

1. Erase prepopulated task
2. In case user has left textbox without putting any value then again set textbox text with previous prepopulated value.

        string data;
        private void txtName_GotFocus(object sender, RoutedEventArgs e)
        {

            TextBox t = sender as TextBox;
            data = t.Text;
            t.Text = string.Empty;

        }

In above code snippet we are typecasting as TextBox and then setting its Text property to string.empty. Before setting value to empty we are saving existing text value such that if user leaves textbox control without inserting any value then previous value can be used to prepopulate textbox.

Step 3

Assume that user clicked or touched textbox but did not type any value and went away. In this case pervious value should get prepopulated in textbox. So to do this when user will navigate from control we need to check that whether textbox contains any value. If textbox text is empty then we will set text property to previous value. This can be done as below,

   
private void txtName_LostFocus(object sender, RoutedEventArgs e)
        {
            TextBox t = sender as TextBox;
            if (t.Text.Equals(string.Empty))
            {
                t.Text = data;
            }

        }

This is what all you need to do to create watermark textbox in Windows Pone 8. I hope this post is useful. See demo of control below,