WPF 文本框添加水印效果

  有的时候我们需要为我们的WPF文本框TextBox控件添加一个显示水印的效果来增强用户体验,比如登陆的时候提示输入用户名,输入密码等情形。如下图所示:

  这个时候我们除了可以修改TextBox控件的控件模板之外,其实还有一种比较简单的方式来处理。就是为我们的TextBox控件添加一个触发器,当它的文本值为空并且当它没有焦点的时候,我们就修改TextBox控件的背景样式,我们将它的背景样式设置为VisualBrush,并且在VisualBrush中添加一个TextBlock控件来显示我们需要提示的水印信息。

  比如我们可以下面的代码来实现:

 1   <TextBox  Margin="50,10" TextWrapping="Wrap" Name="tb1" Visibility="Visible" Grid.Row="1"  Height="30">
 2             <TextBox.Style>
 3                 <Style TargetType="TextBox">
 4                     <Style.Triggers>
 5                         <MultiTrigger>
 6                             <MultiTrigger.Conditions>
 7                                 <Condition Property="IsFocused" Value="False"></Condition>
 8                                 <Condition Property="Text" Value=""></Condition>
 9                             </MultiTrigger.Conditions>
10                             <Setter Property="Background">
11                                 <Setter.Value>
12                                     <VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None">
13                                         <VisualBrush.Visual>
14                                             <TextBlock Padding="5,2" Background="Transparent" Foreground="Silver"  FontSize="14">请输入用户名</TextBlock>
15                                         </VisualBrush.Visual>
16                                     </VisualBrush>
17                                 </Setter.Value>
18                             </Setter>
19                         </MultiTrigger>
20                     </Style.Triggers>
21                 </Style>
22             </TextBox.Style>
23         </TextBox>

PS:VisualBrush里面的内容我们可以自由发挥,你甚至可以添加一个图片加一段文字来描述你的水印信息都可以。

时间: 2024-12-26 02:35:42

WPF 文本框添加水印效果的相关文章

WPF 之 文本框及密码框添加水印效果

1.文本框添加水印效果 文本框水印相对简单,不需要重写模板,仅仅需要一个 VisualBrush 和触发器验证一下Text是否为空即可. <TextBox Name="txtSerachDataName" Width="120" Height="23" Grid.Column="3" Grid.Row="1"> <TextBox.Resources> <VisualBrush

WPF文本框密码框添加水印效果

WPF文本框密码框添加水印效果 来源: 阅读:559 时间:2014-12-31 分享: 0 按照惯例,先看下效果 文本框水印 文本框水印相对简单,不需要重写模板,仅仅需要一个VisualBrush   和触发器验证一下Text是否为空即可. 上代码: <TextBox Name="txtSerachDataName" Width="120" Height="23" Grid.Column="3" Grid.Row=&q

设置input文本框只读效果

设置input文本框只读效果:在实际应用中可能需要将input文本框设置为只读状态,代码实际非常简单,只要添加一个属性即可.代码如下: <input type="text" value="蚂蚁部落" readonly/> 使用readonly属性即可将文本框设置为只读状态,具体可以参阅<input>标签的readonly属性一章节. 原文地址:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/21

input文本框圆角效果代码实例

input文本框圆角效果代码实例:本章节分享一段代码实例,它实现了将input文本框设置为圆角的功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</tit

图片上面添加文本框重叠效果

根据修的图的效果,通过切片,实现文本框和图片重叠. 好的css习惯都是去掉外内边距,为了适应更多的浏览器兼容性. 样式部分: <style tyle="text/css"> *{ padding:0px; margin:0px; } </style> 标签部分: <div style="position: relative; z-index: 1;"> <div> <img src="images/na

Android文本框振动效果的实现

今天尝试了一下文本框的振动效果.一般我们会在输入的时候,要是输入的内容不符合我们的要求的时候,我们可以做一个反馈.很多程序上会有这一个文本输入框的左右反复运动的效果来提示我们输入不符合要求.这个效果其实API Demo里面也有所以我就直接根据里面的使用方法来实现. 1.首先先findViewById到EditText EditText etNumber = (EditText) findViewById(R.id.et_number); 2.然后在res文件夹里面新建一个anim文件夹(里面主要

WPF文本框只允许输入数字

XAML代码 < TextBox Height="23" HorizontalAlignment="Left" Margin="100,5,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" DataObject.Pasting="textBox1_Pasting" PreviewKeyDown=&q

动画综合练习(延迟进入+页面向导+文本框抖动)

1.activity_welcome.xml(界面刚加载进入欢迎界面的布局) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_welcome_root" android:layout_width="fill_parent" android:layout_height="fill_parent&q

easyui 给文本框 checkbox赋值问题

刚进公司 要做一个后台维护系统,选择easyui 从未接触过 对于页面给文本框赋值遇到一些问题 写下了来 我之前使用了好几种方式都未能成功给input 文本框赋值 第一尝试传统的JavaScript代码: document.getElementById("itemvalue").value="值"; 第二尝试jquery中的好些方法也未能生效 $("#itemvalue").val('值');//通过val      $("#itemv