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.
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows.Data
Imports System.Windows
Namespace WaterMarkTextBox
Class Helper
Implements IMultiValueConverter
Public Function Convert(values As Object(), targetType As Type, parameter As Object, culture As
System.Globalization.CultureInfo) As Object
If TypeOf values(0) Is Boolean AndAlso TypeOf values(1) Is Boolean Then
Dim hasText As Boolean = Not CBool(values(0))
Dim hasFocus As Boolean = CBool(values(1))
If hasFocus OrElse hasText Then
Return Visibility.Collapsed
End If
End If
Return Visibility.Visible
End Function
Public Function ConvertBack(value As Object, targetTypes As Type(), parameter AsObject,
culture As System.Globalization.CultureInfo) As Object()
Throw New NotImplementedException()
End Function
End Class
End Namespace
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.