WPF实现placeholder效果

 

概述：WPF中通过`Style`实现TextBox水印文本，使用`WatermarkTextBox`类及`ControlTemplate`。这个示例通过`VisualStateManager`在文本框失去焦点且内容为空时显示水印文本。通过`Watermark`属性简化水印文本设置，提高可维护性。

在WPF中，通过Style实现TextBox中的水印文本（水印、提示、占位符文本）通常使用ControlTemplate和VisualStateManager。以下是一个详细的实例源代码：

using System.Windows;
using System.Windows.Controls;

namespace WpfWatermarkExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class WatermarkTextBox : TextBox
    {
        public static readonly DependencyProperty WatermarkProperty =
            DependencyProperty.Register("Watermark", typeof(string), typeof(WatermarkTextBox));

        public string Watermark
        {
            get { return (string)GetValue(WatermarkProperty); }
            set { SetValue(WatermarkProperty, value); }
        }

        static WatermarkTextBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(WatermarkTextBox), new FrameworkPropertyMetadata(typeof(WatermarkTextBox)));
        }
    }
}

XAML文件：

<Window x:Class="WpfWatermarkExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <local:WatermarkTextBox Watermark="请输入内容" Width="200" Height="30"/>
    </Grid>
</Window>

Themes/Generic.xaml文件：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfWatermarkExample">

    <Style TargetType="{x:Type local:WatermarkTextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:WatermarkTextBox}">
                    <Grid>
                        <TextBox x:Name="PART_TextBox"
                                 Text="{TemplateBinding Text}"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Stretch"/>

                        <TextBlock x:Name="PART_Watermark"
                                   Text="{TemplateBinding Watermark}"
                                   Foreground="Gray"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Left"
                                   Visibility="Collapsed"/>

                    </Grid>

                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsFocused" Value="False"/>
                                <Condition Property="Text" Value=""/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Watermark" Property="Visibility" Value="Visible"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

看效果：

 

这个例子中，自定义了WatermarkTextBox类，其中包含一个Watermark属性。在Themes/Generic.xaml中，定义了WatermarkTextBox的ControlTemplate，通过VisualStateManager在未获得焦点且文本为空时显示水印文本。在MainWindow.xaml中使用了WatermarkTextBox并设置了水印文本。

源代码获取：https://pan.baidu.com/s/1YCuKZhEOrs-C3nGqjNB-lA?pwd=6666