Add Watermark/Placeholder Text Using Behavior In XAML

Add Watermark/Placeholder Text Using Behavior In XAML

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

As I mentioned in my last article, there is no direct way to set Watermark/Placeholder Text to WPF TextBoxes. However, many times we may need to add a Watermark to improve the user experience.

For example, you may want to add Watermark to below credit card input form to make it more user-friendly:

cc-without-watermark.png

After adding Watermark it will look something like below :

cc-with-watermark.png

You can notice, after adding watermark it indicates the expected length of user input for each TextBox and also inside Expiration section which TextBox is meant for 'month' input and which one is for 'year' input.

This article demonstrates how you can add Watermark to a TextBox using Behaviour in XAML.

First, you will need to create a behaviour which will set the watermark to a TextBox when it's Text property is null or does not hold any value, as well as the other way around.

Create Watermark behavior

You can follow my below article for a guide on - how to create a Watermark in WPF:

Now, once you have created a Watermark behavior for TextBox for e.g. WatermarkBehavior.

You will need to attach the above behavior to a TextBox control. You can attach it both ways - XAML or C# code.

Attach behavior on XAML

You can attach behavior on XAML by adding xmlns:behaviors="clr-namespace:WPFDemo" to the XAML page where you want to use.

<Window x:Class="WPFDemo.CreditCardFormWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:behaviors="clr-namespace:WPFDemo"
        Height="700" Width="1000">

Now, you can use the above behavior in any TextBox inside this XAML page where you want to add Watermark Text by adding below behavior to the control:

<i:Interaction.Behaviors>
   <behaviors:WatermarkBehavior Text="MM" Foreground="Gray" />
</i:Interaction.Behaviors>

See below example of a textbox with Watermark behavior:

<TextBox x:Name="ExpirationMonthTextBox" Text="{Binding ExpirationMonth, Mode=TwoWay}" MaxLength="2">
  <i:Interaction.Behaviors>
      <behaviors:WatermarkBehavior Text="MM" Foreground="Gray" />
   </i:Interaction.Behaviors>
</TextBox>

Attach behavior on C# code

You can also attach the behavior on C# code as below:

System.Windows.Interactivity.Interaction.GetBehaviors(ExpirationMonthTextBox).Add(new MyWatermarkBehavior { Text = "MM", Foreground = new SolidColorBrush { Color = Colors.Gray } });

Here's the sample running:

Watermark-Behavior.png

Note: I added some additional fields in my demo app which is not mentioned in this article.

You can modify this behavior if you want to add more styling and etc. to the Watermark Text as per business need.

You can also create custom behavior for achieving many other goals like: for auto-scale a font-size (zoom in/out effect), to capitalize the first letter, and etc. The list of possible behaviors is very long.

I hope, this example is helpful in understanding how to use Behavior in XAML.

 
Share this