One more quick UI experiment. Objective is to implement an watermarked textbox control. It is a normal textbox plus some text as a watermark when textbox is not in focus. On user click, the text will go away.

Bing showed me that, Watermark property ships with in Silverlight 4.0, but is not available for WP7. And there is an implementation available for Silverlight 2.0 (thanks Tim!). So an hour later, we have the following :).

WatermarkTextBox <phoneNavigation:PhoneApplicationPage 
    x:Class="WatermarkedTextBox.Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:wpsamples="clr-namespace:WPSamples.Controls;assembly=WPSamples.Controls.WatermarkedTextBox"
    >

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="WatermarkedTextBox.Test" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
            <TextBlock Text="Sample" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
        </Grid>

        <!--ContentGrid is empty. Place new content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <StackPanel>
                <TextBlock>A Watermarked TextBox</TextBlock>
                <wpsamples:WatermarkedTextBox Height="50" Watermark="Some text goes here..."/>
            </StackPanel>
        </Grid>
    </Grid>
    
</phoneNavigation:PhoneApplicationPage>

The source is available here, download link (MSPL license). Source code is provided as it is. Please report any issues in comments or drop me an email. There is a library (WPSamples.Control.WatermarkedTextBox) and a test project which uses the library.

So to create an user control, all you’d need to do is:

  • Add user control from “Project –> Add new item”.
  • Theme it up with a “Themes” folder and “Generic.xaml” file. You have to create the “Themes” folder in project and add the file “Generic.xaml”.
  • Set the “UserControl.DefaultStyleKey = typeof(UserControl)” in UserControl.xaml.cs.
  • Modify the “<ControlTemplate TargetType=”UserControl”>” in Generic.xaml.

Have fun!