C#WPF实现TextBox控件水印效果的两种实现方法

在WPF实际项目中往往需要在TextBox中加入水印，来告诉使用者输入TextBox中的内容，如下图片所示：
下面介绍两种方式，来添加上图中的水印效果：
第一种方法：也是最简单的一种，使用第三方的组件库HandyControl来实现，
首先在Nuget中查找HandyControl，并安装，如图：
随后在WPF前端Xaml中引用这个库：

xmlns:hc="https://handyorg.github.io/handycontrol"

随后在App.xaml文件中加入以下代码，用以加入HandyControl样式资源：

<Application x:Class="WaterHole.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WaterHole"StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml" /><ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</Application>

到这边就差不多引用完毕了，在界面上画个TextBox，引用HandyControl样式，水印添加成功：

      <StackPanel HorizontalAlignment="Left"><TextBlock Text="HandyControl方式加水印" Margin="10"/><TextBox Width="200" Style="{StaticResource TextBoxExtend}"  hc:InfoElement.Placeholder="请输入用户名！" Margin="5"/></StackPanel>

第二种方法：是针对那些不愿意引用第三方库，坚持要自己画的小伙伴的，既然要自己画，那肯定会麻烦一点。
但也不会太麻烦，直接引用下面样式代码就行，在Window.Resources中画出自己想要的样式：

   <Window.Resources><Style TargetType="TextBox" x:Key="UserNameTextBoxStyle"><Setter Property="Height" Value="30"/><Setter Property="FontSize" Value="12"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TextBox"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" CornerRadius="5"><Grid><TextBlock Text="请输入用户名!" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="#BBB" Name="markText" Visibility="Collapsed" FontSize="12" Margin="10,0"/><ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"  VerticalAlignment="Center" MinHeight="20"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" TargetName="border" Value="0.56"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/></Trigger><Trigger Property="IsKeyboardFocused" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/></Trigger><DataTrigger Binding="{Binding Path=Text,RelativeSource={RelativeSource Mode=self}}" Value=""><Setter Property="Visibility" TargetName="markText" Value="Visible"/></DataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources>

随后在界面上画个TextBox，并引用这个自定义样式，水印添加成功：

   <StackPanel><TextBlock Text="自定义样式方式加水印" Margin="10"/><TextBox Width="200" Style="{StaticResource UserNameTextBoxStyle}"  Margin="5" HorizontalAlignment="Left"/></StackPanel>

下面是两种方式的添加效果：

两种方式都能实现水印效果，且自由度都比较高，第一种方法可以通过编辑模板副本的形式来对HandyControl的样式进行更改，以达到自己想要的效果。第二种方式直接在样式代码上更改自己想要的字体，颜色。

以上代码使用VS2022，.net 4.7.2完成和测试。

C#WPF实现TextBox控件水印效果的两种实现方法相关推荐

javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位方法一: document.all<"PanelSMS">.styl ...
VB.NET学习笔记：自定义控件之扩展TEXTBOX控件——水印文字提示效果
测试环境:windows 7和Microsoft Visual Studio 2017 看到一些优秀软件里的TEXTBOX文本框都有水印文字提示应该输入什么样的信息,获取光标后提示文字消失,光标离开后 ...
WPF（6）WPF之TextBox控件
系列文章目录 WPF(1)WPF工程创建 WPF(2)WPF之Image组件 WPF(3)WPF之Button组件 WPF(5)WPF之DataGrid控件文章目录系列文章目录 TextBox控件 ...
html左右滑动选择控件,jQuery让控件左右移动的三种实现方法
方法一 [注]需把控件的 CSS 的 position 属性设置为 relative 或 absolute. $(document).ready(function(){ $("#right1 ...
QT-在子控件上绘图的两种方式
Qt 在控件上面绘图 label,pushbutton..... 1.构建一个新类来调用该控件的绘图函数,新类重写 paintEvent(QPaintEvent *) ▶构建: class DrawG ...
WPF开发经验-WPF的TextBox控件的MouseDown事件不响应的解决方法
一问题的发现最近项目有个需求,大概是,当点击某个TextBox时,先执行一些业务上的逻辑处理. 于是按以往思维,将TextBox的MouseDown事件关联事件处理方法,将业务处理写在方法里. 调 ...
android如何绑定事件,Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
【写笔记】WPF 自定义简单的TextBox控件
效果图: 笔记分享: https://www.yuque.com/docs/share/4aac743b-1ff0-42d2-9ec3-c605c145a58e?# <WPF 自定义简单的Tex ...
WPF C# VS2013 TextBox控件限制只能输入数字
编码语言:C# 编码平台:VS2013 项目类型:WPF TextBox控件 PreviewKeyDown事件后台代码 //按键为: 非 ( 大键盘0~9 || 小键盘 0~9 || 退格键 ) ...

C#WPF实现TextBox控件水印效果的两种实现方法

C#WPF实现TextBox控件水印效果的两种实现方法

C#WPF实现TextBox控件水印效果的两种实现方法相关推荐

最新文章

热门文章