Create a Watermark TextBox Effect from Windows Phone 7

Introduction

Now it's time to create some special effects in Windows Phone 7. In this article we are going to create a watermark effect on the TextBox control from Windows Phone 7. Further as you know about the watermark effect which means that whenever we will click on the TextBox control and it will be hidden so that we can write the text inside the TextBox control. If we don't write inside the TextBox control then it again shows the watermark effect as well. So the information to use a watermark effect is that it tells you for which thing the TextBox control is used and what you have to do to write inside the TextBox. So this is the useful effect for building any page and if we have many entries through TextBox then to identify that which TextBox is used for what thing then we can identify it easily so let's we have to see the steps which is given below to implement such type of functionality.

Step 1: In this step we have to take the Windows Phone class library.

• First open the Visual Studio 2010
• Go to File->New->Project
• Select the template Silverlight for Windows Phone->Windows Phone Class library
• Give it a name as you choose
• Click OK.

Step 2: In this step we have to write the code for the WatermarkTextBox.cs file which will be the name of the class library.

Code:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace WatermarkedTextBoxControl
{
   public class WatermarkedTextBox : TextBox
   {
          ContentControl WatermarkContent;
          public static readonly DependencyProperty WatermarkProperty =
          DependencyProperty.Register("Watermark", typeof(object), typeof(WatermarkedTextBox), new PropertyMetadata(OnWatermarkPropertyChanged));
          public static readonly DependencyProperty WatermarkStyleProperty =
          DependencyProperty.Register("WatermarkStyle", typeof(Style), typeof(WatermarkedTextBox), null);
          public Style WatermarkStyle
          {
                  get { return base.GetValue(WatermarkStyleProperty) as Style; }
                  set { base.SetValue(WatermarkStyleProperty, value); }
          }
          public object Watermark
          {
                  get { return base.GetValue(WatermarkProperty) as object; }
                  set { base.SetValue(WatermarkProperty, value); }
          }
          public WatermarkedTextBox()
          {
                  DefaultStyleKey = typeof(WatermarkedTextBox);
          }
          public override void OnApplyTemplate()
          {
                  base.OnApplyTemplate();
                  this.WatermarkContent = this.GetTemplateChild("watermarkContent") as ContentControl;
                  if(WatermarkContent != null)
                  {
                    DetermineWatermarkContentVisibility();
                  }
          }
          protected override void OnGotFocus(RoutedEventArgs e)
          {
                  if (WatermarkContent != null && string.IsNullOrEmpty(this.Text))
                  {
                         this.WatermarkContent.Visibility = Visibility.Collapsed;
                  }
                  base.OnGotFocus(e);
          }
          protected override void OnLostFocus(RoutedEventArgs e)
          {
                  if (WatermarkContent != null && string.IsNullOrEmpty(this.Text))
                  {
                         this.WatermarkContent.Visibility = Visibility.Visible;
                  }
                  base.OnLostFocus(e);
          }
          private static void OnWatermarkPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
          {
                  WatermarkedTextBox watermarkTextBox = sender as WatermarkedTextBox;
                  if(watermarkTextBox != null && watermarkTextBox.WatermarkContent !=null)
                  {
                    watermarkTextBox.DetermineWatermarkContentVisibility();
                  }
          }
          private void DetermineWatermarkContentVisibility()
          {
                  if (string.IsNullOrEmpty(this.Text))
                  {
                         this.WatermarkContent.Visibility = Visibility.Visible;
                  }
                  else

                  {
                         this.WatermarkContent.Visibility = Visibility.Collapsed;
                  }
           }
     }
}

Step 3 : In this step you have to take a Windows Phone application to use the watermark TextBox control; see the figure given below.

• Start the Visual Studio 2010
• Take a Windows Phone application
• Give it a name
• Click OK.

Step 4: After taking the new project let you have to add the reference of the dll file which was created during build of the Windows Phone library; let us see from where you have to add that library reference and also add the project; see the figure given below.

Step 5: In this step you have to add the whole library to the Windows Phone application; for adding the project you have to see the images given below.

• Go to solution explorer
• Select add new project 
• Select the name of the library project you made
• Click OK.

Step 6: In this step we will see how the project will be added whenever we add the existing project; see the figure given below.

Step 7: In this step you will see how it will appear inside your toolbox item; see the figure given below:

Step 8: In this step you will see that if we want to create the watermark TextBox using the button click then you can easily do that; have a look at the code given below:

Code: MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using WatermarkedTextBoxControl;

namespace WP7WatermarkTextBoxSample
{
  public partial class MainPage : PhoneApplicationPage
  {
         // Constructor
         public MainPage()
         {

         }
 
   private void Button_Click(object sender, RoutedEventArgs e)
   {
       WatermarkedTextBox textBox = new WatermarkedTextBox();
       textBox.Watermark = "Test Watermark";
       this.ContentPanel.Children.Add(textBox);
   }
  }
}

Step 9: In this step we will see the MainPage.xaml

Code:

<phone:PhoneApplicationPage
    x:Class="WP7WatermarkTextBoxSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    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="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
       xmlns:watermark="clr-namespace:WatermarkedTextBoxControl;assembly=WatermarkedTextBoxControl"
    shell:SystemTray.IsVisible="True">
       <phone:PhoneApplicationPage.Resources>
              <Style x:Key="styleGreen" TargetType="ContentControl">
                      <Setter Property="FontStyle" Value="Italic"/>
                      <Setter Property="Foreground" Value="Green"/>
              </Style>
              <Style x:Key="styleRed" TargetType="ContentControl">
                      <Setter Property="FontStyle" Value="Italic"/>
                      <Setter Property="FontSize" Value="40"/>
                      <Setter Property="Foreground" Value="Red"/>
              </Style>
       </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="PageTitle" Text="My WaterMark" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"
         FontFamily="Comic Sans MS" FontSize="64" Foreground="#FFE7EE3F" />
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                  <watermark:WatermarkedTextBox Watermark="Password" FontFamily="Comic Sans MS" FontSize="48" BorderBrush="#BF53D9FF" Foreground="#FF4B00FF" />
            <watermark:WatermarkedTextBox Watermark="Enter Name" WatermarkStyle="{StaticResource styleRed}"
                       BorderBrush="Yellow" FontFamily="Comic Sans MS" FontSize="56" Foreground="Black" />
                      <watermark:WatermarkedTextBox WatermarkStyle="{StaticResource styleGreen}" x:Name="text" BorderBrush="#FFC123FF" Height="114" Width="452">
                             <watermark:WatermarkedTextBox.Watermark>
                                    <StackPanel Orientation="Horizontal">
                                    <Image Source="logo.png" Stretch="None"/>
                                           <TextBlock Text="Enter Password" Foreground="#FF004BFF" Height="53" Width="282" FontSize="40" />
                                    </StackPanel>
                             </watermark:WatermarkedTextBox.Watermark>
                      </watermark:WatermarkedTextBox>
                      <Button Content="Create New Watermark textbox" Click="Button_Click" FontFamily="Comic Sans MS" FontSize="26" Foreground="#FF49FFFF" BorderBrush="#FFFF2CA6" />
              </StackPanel>
       </Grid>
</phone:PhoneApplicationPage>

Step 10: In this step we are going to take the look on the design of the MainPage.xaml file

Step 11: Now in this step we are going to run the application by pressing F5.

In this figure we will see the default run of the application.

In this figure we will see that whenever we will click on the first textbox then we see that the text was written inside the hidden TextBox.

In this figure we will see that when we click on the other TextBox this will also hide its text but the watermark effect also appears again in the first TextBox.

In this output we will see that whenever we will click on the button then it will create a new instance of the watermark TextBox and generate a new watermark TextBox.

Thanks hope it may help you.