In this article I am going to show how we can use watermark textbox in WPF application.
For this I have added a class file named as Helper.cs.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows;
namespace WaterMarkTextBox
{
class Helper : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
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;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
This is my XAML code..
<Window x:Class="WaterMarkTextBox.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WaterMark TextBox" Height="350" Width="525"
xmlns:local="clr-namespace:WaterMarkTextBox">
<Window.Resources>
<SolidColorBrush x:Key="brushWatermarkBackground" Color="White" />
<SolidColorBrush x:Key="brushWatermarkBorder" Color="Indigo" />
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<local:Helper x:Key="Helper" />
<Style x:Key="EntryFieldStyle" TargetType="Grid" >
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="20,0" />
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="tbFirstName">First Name</TextBlock>
</Grid>
<Grid Grid.Row="1" Grid.Column="2">
<TextBlock Margin="5,2" Text="First Name ..." Foreground="LightGray">
<TextBlock.Visibility>
<MultiBinding Converter="{StaticResource Helper}">
<Binding ElementName="txtFirstName" Path="Text.IsEmpty" />
<Binding ElementName="txtFirstName" Path="IsFocused" />
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
<TextBox Name="txtFirstName" Background="Transparent"
Width="140" MaxLength="50" />
</Grid>
<Grid Grid.Row="3" Grid.Column="1">
<TextBlock x:Name="tbLastName">Last Name</TextBlock>
</Grid>
<Grid Grid.Row="3" Grid.Column="2">
<TextBlock Margin="5,2" Text="Last Name ..." Foreground="LightGray" >
<TextBlock.Visibility>
<MultiBinding Converter="{StaticResource Helper}">
<Binding ElementName="txtLastName" Path="Text.IsEmpty" />
<Binding ElementName="txtLastName" Path="IsFocused" />
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
<TextBox Name="txtLastName" Background="Transparent" Width="140" MaxLength="50" />
</Grid>
<Grid Grid.Row="5" Grid.Column="1">
<TextBlock x:Name="tbEmail">Email</TextBlock>
</Grid>
<Grid Grid.Row="5" Grid.Column="2">
<TextBlock Margin="5,2" Text="Email..." Foreground="LightGray">
<TextBlock.Visibility>
<MultiBinding Converter="{StaticResource Helper}">
<Binding ElementName="txtEmail" Path="Text.IsEmpty" />
<Binding ElementName="txtEmail" Path="IsFocused" />
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
<TextBox Name="txtEmail" Background="Transparent"
Width="140" MaxLength="50" />
</Grid>
<Grid Grid.Row="7" Grid.Column="1">
<TextBlock x:Name="tbCountry">Country</TextBlock>
</Grid>
<Grid Grid.Row="7" Grid.Column="2">
<TextBlock Margin="5,2" Text="Country..." Foreground="LightGray">
<TextBlock.Visibility>
<MultiBinding Converter="{StaticResource Helper}">
<Binding ElementName="txtCountry" Path="Text.IsEmpty" />
<Binding ElementName="txtCountry" Path="IsFocused" />
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
<TextBox Name="txtCountry" Background="Transparent"
Width="140" MaxLength="50" />
</Grid>
<Grid Grid.Row="9" Grid.Column="2">
<Button x:Name="Submit" Content="Submit"></Button>
</Grid>
</Grid>
</Window>
When we run the application then window will look like this.
Image 1.
If we write in textbox then
Image 2.