[WPF] Hướng dẫn tạo Textbox với Watermark trong WPF

Csharpcanban.com sẽ hướng dẫn các bạn tạo Textbox kèm theo Watermark trong WPF như trên hình cực kỳ đơn giản.

Bước 1. Thêm đoạn mã XAML như sau vào dự án của bạn

<Window.Resources>
        <Style x:Key="MyWaterMarkStyle" TargetType="{x:Type TextBox}">   
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid>
                            <Border Background="White" BorderBrush="#FF7D8683" BorderThickness="1"/>
                            <ScrollViewer x:Name="PART_ContentHost" Margin="5,0,0,0" VerticalAlignment="Center" />
                            <Label Margin="5,0,0,0" x:Name="WaterMarkLabel" Content="{TemplateBinding Tag}" VerticalAlignment="Center"
                               Visibility="Collapsed" Foreground="Gray" FontFamily="Arial"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Text" Value=""/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Visibility" TargetName="WaterMarkLabel" Value="Visible"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="DimGray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

Bước 2. Thêm vào XAML một Textbox như dưới đây

<TextBox Style="{StaticResource MyWaterMarkStyle}" Height="25" Tag="Please write something here!"/>

Tất cả đoạn mã XAML được mô tả như sau:

<Window x:Class="SampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="700">

    <Window.Resources>
        <Style x:Key="MyWaterMarkStyle" TargetType="{x:Type TextBox}">   
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Grid>
                            <Border Background="White" BorderBrush="#FF7D8683" BorderThickness="1"/>
                            <ScrollViewer x:Name="PART_ContentHost" Margin="5,0,0,0" VerticalAlignment="Center" />
                            <Label Margin="5,0,0,0" x:Name="WaterMarkLabel" Content="{TemplateBinding Tag}" VerticalAlignment="Center"
                               Visibility="Collapsed" Foreground="Gray" FontFamily="Arial"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Text" Value=""/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Visibility" TargetName="WaterMarkLabel" Value="Visible"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="DimGray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

<Grid >
   <TextBox Style="{StaticResource MyWaterMarkStyle}" Height="25" Tag="Please write something here!"/>
</Grid>

</Window>

Bước 3. Chạy ứng dụng và BOOM !!!! kết quả là