Friday, November 03, 2006
Watermarks seem to be all the rage these days for data entry input fields on websites.  In fact, even Vista seems to be jumping on the band wagon with the Search Box.

MSDN Search Box

Recently, the team and I did some UI work for the major project we've been working on. There are lots of neat Visio mockups we put together -- prototypes, etc.. I would add that the UI in general looks fairly slick, if I may say so myself. However out of all the things we did, we were missing this new cool watermark feature.

One of course could fairly trivially achieve this in Windows Forms by overriding the Paint event, among perhaps several other implementations. The problem of course lies in that this must be done for all controls one would like to display a watermark.

You may be asking yourself "how many could there be?". Well, lets see, of the top of my head I think of the following:

  • TextBox

  • MaskedTextBox

  • ComboBox

  • ListBox (Perhaps?)

Ok, five controls is not that bad right? Well let's consider that if you're using Menu and Toolbars, then we need to add at least 2 more, perhaps more if you do ToolStripControlHosting (see How to: Wrap a Windows Forms Control with ToolStripControlHost ).

  • ToolStripTextBox

  • ToolStripComboBox

Ah, so 7 controls, that implement basically the exact same logic. What about DataGridViews? Those have the TextBox cell. I think by now you get the point.

Of course, I have left out the dependencies you're creating for such a simple feature, in case you already have existing controls and or replacing existing ones.

Solution

My solution, instead of using inheritance and overriding, I thought this was a good case to use the IExtenderProvider . This interface does not directly refer to the pseudo pattern Microsoft has been using as an extensibility point in much of the .NET 2.0 stack.

Instead, the purpose of the IExtenderProvider is to let developers augment existing Components/Controls with additionally properties without using inheritance. This feature essentially adds properties to the design time on your control via the PropertyGrid. One of the most common used extender providers is the ToolTip component.

This then begs the question since this interface adds properties, that still does not solve how to draw when there is no text in the control and use the default behavior otherwise.

For this I decided to use an existing control to perform the rendering by superimposing it over the existing controls, namely the label control. To get the desired look, I simply set the background property to transparent and the forecolor to GrayText. That's all!

Part of using this alternative solution to was to prevent the covered control from knowing any implementation details about the watermark, this is just good object oriented design. The label should subscribe to certain events like when the covered control gets focus, then the label should be hidden. Also, when the covered control is resize this should be taken into account so that perhaps the watermark can be centered.

Additional Notes

I decided to use a separate label for each control that receives a watermark, however the WaterMarkColor property on the WaterMarkProvider sets the color for all. Keep in mind you can have multiple WaterMarkProviders on a given form.

BTW, currently there seems to be a bug with the combo box support. I'll look at this later unless someone takes the initative ;-)

Enjoy!

Download

11/3/2006 10:40:05 AM (Eastern Standard Time, UTC-05:00)  #    Comments [2]  | 
11/27/2006 3:34:13 PM (Eastern Standard Time, UTC-05:00)
Nice implementation Eddy. I have to say that was a simple solution that got the job done with a minimum amount of work, good thinking.
9/7/2007 7:15:39 AM (Eastern Standard Time, UTC-05:00)
The imagery needs to remain true to the brand. The splash screen, the favicon.ico on the sight, the tray icon, the web page, about screen, footer of support emails... everything needs to convey the brand through images. The eye patch is an icon of the product; lose it at your peril... In fact, make embroidered eyepatches with the smiley face...
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):

Theme design by Jelle Druyts