.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
satyapriyanayak
Sambanthamoorthy

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create Watermark TextBox in WPF Application

Posted By:Diptimaya Patra       Posted Date: March 16, 2010    Points: 25    Category: WPF    URL: http://dpatra.blogspot.com  

In this article we will see how we can make a Watermark Textbox in WPF Application. Watermark is nothing but an information text, which helps the user to type according to that.
 

Introduction

In this article we will see how we can make a Watermark Textbox in WPF Application. Watermark is nothing but an information text, which helps the user to type according to that.

Crating Silverlight Project

Fire up Expression Blend 3 and create a WPF Application. Name it as WatermarkTextInWPF.

image1.gif

Open the solution in Visual Studio 2008.

We need a helper class which can help us for this operation.

Add a class, name it as WatermarkHelper.cs

image2.gif

Now implement the Interface IMultivalueConverter.

As soon as you type the interface name you will get notification to add the namespace. Go ahead and add the Namespace System.Windows.Data

Choose the option "Implicitly Implement Interface IMultivalueConverter".

Now you will see the following methods are added.

#region IMultiValueConverter Members 
  public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
  throw new NotImplementedException();
  } 
  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
  {
  throw new NotImplementedException();
} 
#endregion 
Add the following code in Convert method:

if (values[0] is bool && values[1] is bool)
{
  bool hasText = !(bool)values[0];
  bool hasFocus = (bool)values[1]; 
  if (hasFocus || hasText)
  return Visibility.Collapsed;
} 
  return Visibility.Visible;

It says, whenever there is a text or focus then change the Visibility property to Collapsed and finally if not having text or focused return the Visibility.Visible.

For the time being we will not use the other method.

Go to the xaml code behind and add the Namespace to it, so that we can use the class WatermarkHelper.

image3.gif

Add styles to Window.Resources

 
  
  
   
  
   
   
 
And add the following two Grids inside the LayoutRoot Grid. And then add TextBlocks and TextBoxes to the Grid.

TextBlock is for the Watermark text and TextBox is for user input.


  
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  
  
  
  
 
Now that you have added the above xaml code to the Window.

Basically we will create two Watermark Textboxes. And we have done binding to the required properties we need for the Watermark behavior.

Now our application is ready to go, press F5 to run the application.

image4.gif

There are two TextBoxes which have watermark respectively as "Type First Name ..." and "Type Last Name".

When you start typing in the first textbox as soon as you type the watermark goes away. But in case of the second one when you mouse over (i.e. focus) the watermark goes away.

For the first text box we have used the default BooleanVisibilityConverter.

<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

And for the second one we have used the WatermarkHelper.

That's it, play with this more.

Enjoy Coding.

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend