Pages

Friday 1 June 2012

Watermark Textbox in Silverlight

Hi ,
   I was in MSDN forums and there was a question on how to create a Watermark textbox  in silverlight.  The requirement was pretty simple,
1) If the user didnt type anything , then a watermark should appear on the textbox saying "Username" . 
2) If the user types a character, it should disappear.
3) If the user deletes the content again, it should appear.

Thinking about it, it seemed pretty basic to implement.  Here was the logic i finally decided to implement.
a) Place two textboxes, one behind the other.
b) Set the background for the upper textbox to Transparent. 
c) Bind the content of the first textbox to the second textbox, using a converter.
d) The converter will check the content length in first textbox. If  length is greater than 0, it will empty the lower textblock. else it will set it to the string "Username".

Simple enough , right. Here is the code.   My project name is WaterText .

MainPage.Xaml

<UserControl x:Class="WaterText.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WaterText"mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
 <UserControl.Resources>
<local:MyConv x:Key="myconverter"></local:MyConv>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<TextBox Height="23" HorizontalAlignment="Left" Margin="78,138,0,0" IsHitTestVisible="False" Text="{Binding ElementName=textBox2,Path=Text,Mode=OneWay,Converter={StaticResource myconverter} ,ConverterParameter='Username'}" Name="textBox1" VerticalAlignment="Top" Width="120" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="78,138,0,0" Background="Transparent" Name="textBox2" VerticalAlignment="Top" Width="120" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="88,196,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</UserControl>
MainPage.Xaml.cs

Just add this converter class in the code behind file. 

   public class MyConv : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string param = parameter.ToString();
            string val = value.ToString();
            if (val == "")
            {
                if (param == "Username")
                {
                    return "Username";
                }
                else
                {
                    return "Password";
                }
            }
            else
            {
                return "";
            }
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

You can see that all the requireements are satisfied now . If you want the Username to appear in a grayed out color, then change the foreground of the lower Textbox  to grey. 

Hope someone searching for this finds it useful :)

1 comment: