Watermark TextBox for Windows Phone

Fri, April 22, 2011, 08:01 PM under MobileAndEmbedded

In my Translator by Moth app, in the textbox where the user enters a translation I show a "prompt" for the user that goes away when they tap on it to enter text (and returns if the textbox remains/becomes empty). imageSee screenshot on the right (or download the free app to experience it).

Back in June 2006 I had shown how to achieve this for Windows Vista (TextBox prompt), and a month later implemented a pure managed version for both desktop and Windows Mobile: TextBox with Cue Banner.

So when I encountered the same need for my WP7 app, the path of least resistance for me was to convert my existing code to work for the phone.

Usage:

  1. Instead of TextBox, in your xaml use TextBoxWithPrompt.
  2. Set the TextPrompt property to the text that you want the user to be prompted with.
  3. Use the MyText property to get/set the actual entered text (never use the Text property).
  4. Optionally, via properties change the default centered alignment and italic font, for the prompt text.

It is that simple! You can grab my class here: TextBoxWithPrompt.cs

Note, that there are many alternative (probably better) xaml-based solutions, so search around for those. Like I said, since I had solved this before, it was easier for my scenario to re-use my implementation – this does not represent best practice :-)