Watermark TextBox

Searching on the Internet about creating a watermark TextBox, there are many ways to achieve but finally I do it on my own.

<Grid Width="182" Margin="2">
    <Rectangle Fill="White"/>
    <TextBlock Margin="4,3" Text="Search..." FontFamily="Segoe UI"
    Foreground="#FFC0C0C0" FontSize="20" FontStyle="Italic"
    Visibility="{Binding ElementName=txtSearchBox, Path=Text.IsEmpty,
    Converter={StaticResource booleanToVisibilityConverter}}"/>
    <TextBox x:Name="txtSearchBox" BorderThickness="0" Margin="0,3"
    FontSize="20" FontFamily="Segoe UI Light" Background="Transparent"  />
</Grid>

With the above xaml code, you need BooleanToVisibilityConverter, simply put it inside Resources.

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter" />
</Window.Resources>

It’s done up to here. For customizing the width and height, do it in the outermost Grid, and also change the FontSize for both TextBlock and TextBox so that they are in sync 🙂

Result: