Search for a command to run...
I create scalable software, help clients to design and develop dynamic applications as well as provide consultation for the business optimization solutions and integration services.
I am a people-person and I especially value humour, being able to communicate, respect for culture, staying healthy, and the freedom to think out of the box.
My interests range from technology to photography. I am also interested in travel, design and food.
No comments yet. Be the first to comment.
As we know in WPF there is no direct way to set Watermark to a TextBox. However, many times we may need to add a watermark to improve the user experience. In WPF, we can create a watermark using System.Windows.Interactivity.Behavior<T> Here, the pla...
New Features, Price, System Requirements & Release Date - Everything You Need To Know About Windows 11
As we know in WPF there is no direct way to set Watermark to a TextBox. However, many times we may need to add a watermark to improve the user experience. In WPF, we can create a watermark using System.Windows.Interactivity.Behavior<T> Here, the pla...
⏺ Doing too much multi-tasking ⏺ Skipping breakfast and morning hydration ⏺ Not prioritizing calm ⏺ Starting the day in 'reactive mode' rather than 'proactive mode' ⏺ You think you can do everything by yourself ⏺ You overestimate how m...
As I mentioned in my last article, when you are designing UI, sometimes you may find a scenario where you need to transform an user entered value to another form to improve the user experience and present it in a more friendly way. For example, you m...
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:
After adding Watermark it will look something like below :
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.
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.
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>
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 } });
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.