×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

In the early days of Silverlight 2, one of the included controls was the WatermarkedTextBox.  In Beta 2 the control was removed from the runtime for among other things, WPF compatibility.  The control source code was made available for people to look at as it was referenced in a few projects, namely ScottGu’s Digg sample application.  There was hinting about future plans but nothing concrete. 

Now that Silverlight 2 is released, the control is not there :-).  I’ve gotten enough requests about it that I wanted to provide some action for you.  First, let me say that there are no concrete plans for WatermarkedTextBox at this time that I have to share.  I’m not saying there isn’t plans, but just that none at a point to make any worthwhile announcements.  Perhaps something like this would show up in the Silverlight Toolkit, but at this time no plans have been defined.

Again, as I’ve received enough requests, I’ve modified the source code for WatermarkedTextBox for Silverlight 2 release and am making it available for you to consume.  The code has been updated for use in Silverlight 2 and also updated to reflect the default styling of the released controls (namely to match TextBox).

If you aren’t familiar with the concept, it’s basically a TextBox with a value you can set for some helper text if the value is not set.  Typically you use this when you want to provide “prompt” text for some input, as an example here:

As you can see the TextBox provides a '”faded” default text that isn’t the TextBox.Text property of the control, but rather the Watermark property of this control.  Once data is entered in the control, the watermark goes away.  As long as data is input the watermark isn’t displayed…if the value is empty, the watermark displays.  Simple enough.

The XAML for the above looks like this:

   1: <UserControl x:Class="WatermarkTester.Page"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:local="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"
   5:     Height="300" Width="600" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
   6:     <Grid x:Name="LayoutRoot" Background="White">
   7:         <StackPanel Orientation="Vertical">
   8:             <Grid Margin="15">
   9:                 <Grid.RowDefinitions>
  10:                     <RowDefinition Height="Auto" />
  11:                     <RowDefinition Height="Auto" />
  12:                     <RowDefinition Height="Auto" />
  13:                     <RowDefinition Height="Auto" />
  14:                 </Grid.RowDefinitions>
  15:                 <Grid.ColumnDefinitions>
  16:                     <ColumnDefinition Width="Auto" />
  17:                     <ColumnDefinition Width="Auto" />
  18:                 </Grid.ColumnDefinitions>
  19:                 <TextBlock Text="First Name:" Margin="5" Grid.Column="0" Grid.Row="0" />
  20:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="0" Watermark="Enter your first name here..."/>
  21:                 <TextBlock Text="Last Name:" Margin="5" Grid.Column="0" Grid.Row="1" />
  22:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="1" Watermark="Enter your last name here..." />
  23:                 <TextBlock Text="Phone Number:" Margin="5" Grid.Column="0" Grid.Row="2" />
  24:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="2" Watermark="(xxx) xxx-xxxx" />
  25:             </Grid>
  26:         </StackPanel>
  27:     </Grid>
  28: </UserControl>

Note the xmlns:local declaration in the user control which references the binary.

The control is also Blend compatible if you want to change the style/control template so if you wanted to change the Watermark color or something like that you could easily do that with Blend:

So if you’ve been looking for this control, here you go.  You can download the bits here:

The source is available as Ms-Pl.  Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


Gravatar
10/22/2008 8:26 AM | # re: Silverlight 2 Watermarked TextBox Control
l
10/22/2008 9:47 AM | # re: Silverlight 2 Watermarked TextBox Control
Thanks Tim - this is really helpful. Both from the standpoint of getting the control back out there, but also on good practices for control creation.
10/22/2008 4:52 PM | # re: Silverlight 2 Watermarked TextBox Control
Hi Tim,

For those of us that might not posess the know-how : How does one use the code in their C# SL2 projects?
10/22/2008 4:59 PM | # re: Silverlight 2 Watermarked TextBox Control
Maciek: Good point, we should probably put up a quick how-to on that. The steps that I follow are:

1 - Add a reference to the assembly in Visual Studio (or Blend).
2 - In the XAML above look at the xmlns:local declaration -- you'll want to add that
3 - Then anywhere you want to use it you would use local:WatermarkedTextBox as your element name

In Visual Studio you could also add this to your toolbox for drag/drop capabilities and it would add the xmlns declaration for you.
10/22/2008 8:28 PM | # re: Silverlight 2 Watermarked TextBox Control
Nice job, Tim! Thank you!
10/23/2008 1:24 AM | # re: Silverlight 2 Watermarked TextBox Control
nice one! thanks
10/23/2008 2:27 AM | # re: Silverlight 2 Watermarked TextBox Control
Thanks for the reply Tim,

I was examining the code and it occured to me that having a quick "how to make a watermarked textbox" tutorial would be pretty cool. I understand the xaml/c# stuff but there's some things that I've not seen yet. For instance, what's the purpose of the resource file ?
10/23/2008 5:15 AM | # re: Silverlight 2 Watermarked TextBox Control
Tim, any plans on a WatermarkedPasswordBox? Would be really useful to be paired with a WatermarkedTextbox in a login.
10/23/2008 7:42 AM | # re: Silverlight 2 Watermarked TextBox Control
Maciek: The resource file simply holds some default text right now.

Santiago: It would have been easy to change the inheritence, but unfortunately PasswordBox is sealed (not sure why), but maybe I can put something together.
10/23/2008 1:32 PM | # re: Silverlight 2 Watermarked TextBox Control
Thank you, Tim! Works the way it was advertised :)) Your blog is on my list of daily checks.
10/24/2008 10:08 AM | # re: Silverlight 2 Watermarked TextBox Control
Just a thought. . .
I've been reading alot on the WatermarkedTextBox missing from Beta2 and it occured to me that every attempt to rectify the situation has been to add a reference to create the control. I'm not sure why anyone would go to these great lengths and sownload, or write, the code and then have to reference in every project they wish to use this control in. A much simpler silution for me was to change the Forground color to grey and then add a GotFocus event to erase the text. This is a simpler and easier method for me. Just a thought, I like to keep things simple. Although, creating a control is great practice if you desire something alot different than what's available. I just don't think it's necessary in this instance
10/24/2008 11:04 AM | # re: Silverlight 2 Watermarked TextBox Control
James: True, but some people just want controls and not have to worry about writing any more code to maintain. Ideally in future versions of Silverlight, TextBox will just have a Watermark property itself...this is merely a stop gap for those who asked for it.
10/27/2008 6:33 PM | # re: Silverlight 2 Watermarked TextBox Control
off-the-topic:

hi, I remembered that there are several skins shipped with silverlight, like the red and black, but I could not find the tutorial anymore. Any idea where is it?
10/28/2008 2:45 PM | # re: Silverlight 2 Watermarked TextBox Control
unruled: No skins shipped with Silverlight. Check out timheuer.com/.../...with-charting-databinding.aspx for info on the new Silverlight Toolkit which ships with 6 themes.
11/6/2008 6:11 AM | # re: Silverlight 2 Watermarked TextBox Control
Hi

This was really helpful.
Thanks
11/11/2008 2:06 PM | # re: Silverlight 2 Watermarked TextBox Control
Excuse my naivety... Can you point me towards a resource on how to modify the watermark style? I see you changed it's color via Blend in the article, but I see no other watermark specific properties. I'm interested in changing the watermark padding to match the text padding I'm using (notice how the watermark is near the top of the textbox in your example).

Thanks for the code.
11/11/2008 2:08 PM | # re: Silverlight 2 Watermarked TextBox Control
David: Take a look at the default control template in the generic.xaml. You could also use Blend to just create a style for this as well and style the ContentPresenter control that is a part of this WatermarkedTextBox.
11/12/2008 7:49 AM | # re: Silverlight 2 Watermarked TextBox Control
Thanks Tim! Obviously there are a few gaps in my Silverlight knowledge and this helps tremendously. Appreciate it.
12/2/2008 3:17 AM | # re: Silverlight 2 Watermarked TextBox Control
Hi
this was really helpfull,
thanks.
Gravatar
1/12/2009 8:36 AM | # re: Silverlight 2 Watermarked TextBox Control
Hi Tim, this is a very useful control that I've added this to a number of projects. It would be handy to have as part of a larger library such as SilverlightContrib or Blacklight. Is there any chance that it could ever be put in one of those libraries? Thank you again for making it available.
1/12/2009 1:41 PM | # re: Silverlight 2 Watermarked TextBox Control
Thanks Rob, I haven't submitted it to the SilverlightContrib project only because I suspect that eventually Watermark will be a property on TextBox. But I'll see if the guys want to pick it up.
2/24/2009 7:16 PM | # re: Silverlight 2 Watermarked TextBox Control
Thank you Tim,
Maybe there could be a link included with ScottGu’s Digg sample application as it might help someone to not spend a few hours trying to figure out what is wrong.
2/28/2009 3:43 AM | # re: Silverlight 2 Watermarked TextBox Control
Thanks for providing this - saved me the time of trying to implement one myself.
3/4/2009 4:15 PM | # re: Silverlight 2 Watermarked TextBox Control
Thanks Tim for this great control! It can make any application much more intuitive.

For those interested, if you want to change the default style to show the watermark in the exact same place as the text, simply change the following and rebuild:

File: themes\generic.xaml
Line: 103
Change: Margin="0,-2,0,0"
Into: Margin="1,1,0,0"
4/24/2009 12:10 PM | # re: Silverlight 2 Watermarked TextBox Control
Tim,

Thanks so much for this info and for making the control available to us. I've been playing with this and with the source.

I'd like to change the behavior slightly and am having difficulty. Right now, the state changes to an unwatermarked state and the watermrk disappears any time the textbox has focus. I'd like to modify the behavior so that as long as the text property is empty, the watermark will be visible, regardless of whether the control has focus or not. Can you direct me as to what I'll need to do to accomplish this?

Thanks in advance
4/25/2009 3:34 PM | # re: Silverlight 2 Watermarked TextBox Control
Steve - that's the default behavior, if there is no value it displays the watermark text you provide.
5/13/2009 2:02 AM | # re: Silverlight 2 Watermarked TextBox Control
Thank you very much. Very nice helper!=) Was implementing this behaviour myself in the .cs file, but this is way nicer!=)
5/14/2009 4:47 AM | # re: Silverlight 2 Watermarked TextBox Control
Hello,

is there a quick way to check if a WatermarkedTextBox has a real input text? Should I check if the Text of the element is null or something?

Thank you again!
5/14/2009 4:49 AM | # re: Silverlight 2 Watermarked TextBox Control
Forget my previous comment. I just compared the Text property with "". =) It works!
6/5/2009 9:07 AM | # re: Silverlight 2 Watermarked TextBox Control
I tried the watermarkedtextbox, and my application threw an exception during "InitializeComponent();". version issue?
6/19/2009 1:20 AM | # re: Silverlight 2 Watermarked TextBox Control
Hello, how can i add the watermarked textbox control in my silverlight app??

Thanks
6/23/2009 10:11 PM | # re: Silverlight 2 Watermarked TextBox Control
Thanks Tim, I was also trying to follow that tutorial, but got stuck on that part with the watermark. Somehow after about forty minutes of trying to this code to work I was finally able to do it.
7/6/2009 7:16 AM | # re: Silverlight 2 Watermarked TextBox Control
I'd like to add my thanks as well. This is a feature long available in XCode, nice to see it in Silverlight!
7/8/2009 8:36 AM | # re: Silverlight 2 Watermarked TextBox Control
Many thanks Tim! :)
8/18/2009 2:03 PM | # re: Silverlight 2 Watermarked TextBox Control
shuld I be referencing the Binary version?
8/18/2009 2:25 PM | # re: Silverlight 2 Watermarked TextBox Control
Patrick, yes you can build it yourself using the code provided, but in your Silverlight app it is easiest to reference the binary.
8/18/2009 4:50 PM | # re: Silverlight 2 Watermarked TextBox Control
I reference it in the bin folder of my web project and added the code and I still get the following error:AG_E_PARSER_BAD_TYPE [Line: 20 Position: 114]. I'm new to silverlight and so I'm sure I'm doing something wrong or not doing something I should. Here is the code I added:
<UserControl x:Class="WaterMark.Page"
xmlns="schemas.microsoft.com/.../presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"
Height="300" Width="600" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Vertical">
<Grid Margin="15">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="First Name:" Margin="5" Grid.Column="0" Grid.Row="0" />
<local:WatermarkedTextBox Grid.Column="1" Grid.Row="0" Watermark="Enter your first name here..."/>
<TextBlock Text="Last Name:" Margin="5" Grid.Column="0" Grid.Row="1" />
<local:WatermarkedTextBox Grid.Column="1" Grid.Row="1" Watermark="Enter your last name here..." />
<TextBlock Text="Phone Number:" Margin="5" Grid.Column="0" Grid.Row="2" />
<local:WatermarkedTextBox Grid.Column="1" Grid.Row="2" Watermark="(xxx) xxx-xxxx" />
</Grid>
</StackPanel>
</Grid>
</UserControl>


Thanks for your help
patrick
8/18/2009 4:53 PM | # re: Silverlight 2 Watermarked TextBox Control
Patrick send me your project and I'll take a look timheuer at microsoft dot com.
8/18/2009 5:06 PM | # re: Silverlight 2 Watermarked TextBox Control
Sure I'll get it ready to send now.
8/18/2009 5:10 PM | # re: Silverlight 2 Watermarked TextBox Control
Patrick -- I just reread your post. You need to reference it in your *Silverlight* project. It does no good in your web project :-).
8/18/2009 5:36 PM | # re: Silverlight 2 Watermarked TextBox Control
OK Sorry I'm primarily a Database Developer, so I'm very Comfortable with SQL and C# etc... But new for front end and I like the Silverlight so I'm on a learning curve. But so far I'm enjoying it.Question: So when I extract the Binary Dll where should I put it before I reference it in Silverlight?

Thanks for be patient
patrick
8/18/2009 5:37 PM | # re: Silverlight 2 Watermarked TextBox Control
Patrick you can put it anywhere. When you add the reference and compile, it will be packaged with your XAP (Silverlight application package) and copied to your web site.
8/18/2009 5:44 PM | # re: Silverlight 2 Watermarked TextBox Control
Thanks for the info I'll give it a try.
8/18/2009 5:59 PM | # re: Silverlight 2 Watermarked TextBox Control
Oh My Gosh it Work! :). This is cool stuff, Just doig totorials, but have some Idea's for Interactive Data Dictionary for SQL Server
8/18/2009 6:03 PM | # re: Silverlight 2 Watermarked TextBox Control
Hey Thanks Tim, I keep this page in my Favorites
8/25/2009 7:00 AM | # re: Silverlight 2 Watermarked TextBox Control
I'm completely new to Silverlight. I spent half a day trying to figure out how to fix Scott's tutorial, even tried using a TextBlock without success, until I came upon your blog. I am using Silverlight 3 (missed Silverlight 1 and 2), and it worked fine.
9/23/2009 2:16 PM | # re: Silverlight 2 Watermarked TextBox Control
This is what Tim says:

Tim,

"Thanks so much for this info and for making the control available to us. I've been playing with this and with the source.

I'd like to change the behavior slightly and am having difficulty. Right now, the state changes to an unwatermarked state and the watermrk disappears any time the textbox has focus. I'd like to modify the behavior so that as long as the text property is empty, the watermark will be visible, regardless of whether the control has focus or not. Can you direct me as to what I'll need to do to accomplish this?"

I can confirm this is the default behavior unlike what Tim says (that it's the default behavior). I am having trouble modifying it too.

When I click into the textbox I don't want the watermark to go away until I start typing. This current example does not do that. Any ideas?
9/23/2009 2:39 PM | # re: Silverlight 2 Watermarked TextBox Control
Brian -- It does not, that's correct -- you'd have to fiddle with the VisualStates and the sequence at which they would be initiated (perhaps looking at OnTextChanged to determine when there is actual Text there) to keep the watermarked state.
10/6/2009 8:15 AM | # re: Silverlight 2 Watermarked TextBox Control
This water Mark doesn't work with DateForm.DateField in RIA.
The problem is that the validation error detail doesn't show up and the control is not red around when validate fails.

Any idea?
11/8/2009 4:50 AM | # re: Silverlight 2 Watermarked TextBox Control
I have upgraded this source code into Silverlight 3.0.. it is working fine.. Why it is not added regular toolbox?
11/8/2009 5:21 AM | # re: Silverlight 2 Watermarked TextBox Control
Sivakumar - do you mean the Toolkit? Technically it's already in there -- DateTimePickerTextBox (same code)
11/10/2009 4:20 PM | # re: Silverlight 2 Watermarked TextBox Control
Vincent -- I did not update the code for data validation rendering -- that's definitely something I need to do!
11/11/2009 7:43 AM | # re: Silverlight 2 Watermarked TextBox Control
Thanks Tim. Great to hear that and certainly looking forward to it.
12/3/2009 12:35 AM | # re: Silverlight 2 Watermarked TextBox Control
Hi Tim,

Thanks for sharing this stuff - it looks like a lot of work. I really appreciate it - this, and all your other posts. They have helped me immensely whilst trying to find my footing with Silverlight.
12/17/2009 8:59 AM | # re: Silverlight 2 Watermarked TextBox Control
Hi Tim.

Thanks for the great work!
I'm also trying to use validation with the Watermark control.
It seems I should be able to add it to my own style but I'm not realy sure where to start. Seems I should be able to steal the ValidationStates from TextBox but it's a little beyond me at the moment (g)

Any advice..

Pat NH USA..
12/17/2009 9:09 AM | # re: Silverlight 2 Watermarked TextBox Control
Pat -- use a tool like Expression Blend to really help change things visually.
2/25/2010 4:26 AM | # re: Silverlight 2 Watermarked TextBox Control
hi, thanks for this post.actually i want to do the same means,to change the color of "watermark" property of watermark textbox.plz tell me is this any property of watermark to change the color ? or on which event of watermark i can change this..
Thanks.
6/8/2010 11:23 PM | # re: Silverlight 2 Watermarked TextBox Control
Tim,

SL4 TextBox.Watermark property is broken.
Any chance MS can fix it?
6/8/2010 11:27 PM | # re: Silverlight 2 Watermarked TextBox Control
Thomas -- even though you can see it, it is only for compat purposes and not what you think. Yes I know this sounds odd. But I guess 'intentionally broken' is the best way to describe it. There is no watermarked textbox in SL4...you can still use the SL2/3 methods. Hint: DateTimePickerTextBox (primitive) is essentially the same watermarked textbox.
6/17/2010 3:32 AM | # re: Silverlight 2 Watermarked TextBox Control
Dear Tim,

If i use the regular textbox like:
<TextBox Name="filterTextbox" HorizontalAlignment="Stretch" />
It stretches nicely.

Using your WaterMarkedTextbox like:
<waterMarkedTextbox:WatermarkedTextBox Name="filterTextbox" HorizontalAlignment="Stretch" Watermark="Here watermark" Padding="0"/>

it will not stretch larger than the content inside the Watermark property.

I also tried:
<waterMarkedTextbox:WatermarkedTextBox Name="filterTextbox" HorizontalAlignment="Stretch" Watermark="Here watermark" Padding="0" HorizontalContentAlignment="Stretch" />

But that doesn't work either.

Is it possible to stretch the Watermarked textbox anyhow?

Thanks in advance!

Ardon Hendrickx
6/18/2010 3:57 AM | # re: Silverlight 2 Watermarked TextBox Control
Hi Tim,
I'm glad that found the wonderful control in your blog. But when i use WTB control, my watermarked text is always align center horizontally. Could i set it to align left?

<wtb:WatermarkedTextBox x:Name="WTextBox" Height="100" Width="300" FontSize="36" Watermark="Default text" InputScope="Text" Margin="78,6,102,511" Background="Transparent" HorizontalContentAlignment="Left" TextAlignment="Left" />
10/1/2010 2:13 AM | # re: Silverlight 2 Watermarked TextBox Control
I want bind my watermark textbox and i required validation on it.
like when we use noramal textbox it will display field required on empty.
10/27/2010 12:37 AM | # re: Silverlight 2 Watermarked TextBox Control
I want to learn the technology, but not start. What you give me pointers. Thank you
11/12/2010 7:40 PM | # re: Silverlight 2 Watermarked TextBox Control
Hi, Tim it seems very easy to use implement watermarking using this Control.
I am getting an error though. I added this to a Silverlight 3 Library, but not working. It says AG_E_PARSER_BAD_TYPE [Line: 100Position: 118].. Any thoughts...?
Thanks....
4/9/2011 12:22 AM | # Mr.
It is pleasing to go through and learn this useful feature. Thanks for the nice lesson on the subject.
love life quotes
4/24/2011 10:22 PM | # Mr.

Someone is nicely cater and it contains numerous lordly things for me. I am grinning to get your tec way of someone the representation. Now it prettify superlative for me to see and obligate the hermetic. Thanks for taradiddle the mercantilism.
funny wishes
6/21/2011 10:35 AM | # re: Silverlight 2 Watermarked TextBox Control
I been looking for research materials that I can use on my blog. I been building 2 blogs now. Then I stumbled upon your article and it after I read it, I realized this is a good material for my blog. The commenter believes that readers can find and use so many valuable information here. Surely I will recommend your site. You really helped me a lot and contributed o my researches. tenant screening
7/28/2011 9:56 AM | # re: Silverlight 2 Watermarked TextBox Control
I been looking for research materials that I can use on my blog. I been building 2 blogs now. Then I stumbled upon your article and it after I read it, I realized this is a good material for my blog. The commenter believes that readers can find and use so many valuable information here. Surely I will recommend your site. You really helped me a lot and contributed o my researches.
Abilene Roofing Contractors
7/9/2012 11:44 PM | # re: Silverlight 2 Watermarked TextBox Control
HI,I want to know about the events occured by Watermark text box,if any one knows about it then please inform me
9/20/2012 10:27 AM | # re: Silverlight 2 Watermarked TextBox Control
I have found another interesting way to do this, although it is somewhat of a kludge, but it also works with PasswordTextBox.

Place a TextBlock beneath the TextBox/PasswordTextBox and set the Background brush of those controls to partially transparent so the TextBlock shows through. You will also need a DispatcherTimer on the Window/Control that will set the Visibility of the TextBlock to Collapsed should there be any Text in the TextBox.
3/11/2013 2:02 AM | # re: Silverlight 2 Watermarked TextBox Control
Hi Timheuer,
I am trying to put validation for watermark text box. I want bind my watermark textbox and i required validation on it .Like when we use normal textbox it will display field required on empty.

 
Please add 4 and 6 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.