WPF的TextBox水印效果详解
一种自以为是的方式:
本来只是想简单的做个水印效果,在文本框内容为空的时候提示用户输入,这种需求挺常见。网上一搜 都是丢给你你一大段xaml代码。用c#代码实现我是不倾向了 既然用wpf就得Xaml啊。首先我想到的是template嘛 wpf到处离不开template 。我想到的是一个border 套一个textblock嘛 然后让文本内容通过templateBinding到Text嘛 搞得不亦乐乎 ,并且也确实很快就达到了我要的效果:
- <TextBox>
- <TextBox.Template>
- <ControlTemplate TargetType="TextBox">
- <Border BorderThickness="1" Name="border" BorderBrush="Red">
- <TextBlock Text="{TemplateBinding Text}"></TextBlock>
- </Border>
- <ControlTemplate.Triggers>
- <MultiTrigger>
- <MultiTrigger.Conditions>
- <Condition Property="Text" Value=""></Condition>
- </MultiTrigger.Conditions>
- <Setter Property="Background" TargetName="border">
- <Setter.Value>
- <VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None">
- <VisualBrush.Visual>
- <TextBlock Width="500" Height="100" Background="#FFE8DBDB">请输入内容22</TextBlock>
- </VisualBrush.Visual>
- </VisualBrush>
- </Setter.Value>
- </Setter>
- </MultiTrigger>
- </ControlTemplate.Triggers>
- </ControlTemplate>
- </TextBox.Template>
- </TextBox>
最后仔细一看杯具的发现文本内容输入的时候没有光标,然后我想到的就是把模板里的textblock改为textbox就完了嘛。好 一改更杯具了 水印效果抽风了 最后发现 用c#代码 强制让文本框Focus() 貌似就可以 ,也许本身元素就是TextBox 模板里面 再放TextBox 就会导致焦点无法获取造成各种混乱吧。最后弄不好 。
通过尝试更改TextBox自带的模板来达到效果
导出系统默认textBox的模板visualTree ,经过尝试成功达到效果,值得一提的是 我纳闷儿网上那些人为甚有的一贴出的xaml代码里面就是scrollviewer呢 并且还能够正确运行 让我很难理解 ,一看原来系统默认的就是scrollviewer 原来如此 还有Name=PART_ContentHost 只要写成他自然而然就能被当初内容宿主处理。看来PART_ContentHost 是个很特殊的系统名称,还有就是多行文本框通过 设置AcceptsReturn="True" VerticalScrollBarVisibility="Auto" 属性来达到:
- <TextBox Text="" Height="60" Name="nihao" Width="300" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" >
- <TextBox.Template>
- <ControlTemplate TargetType="TextBox">
- <!--下面必须写成PART_ContentHost 才能正常 无语又是一个神秘硬编码
- 我就纳闷儿 为甚网上的人要写 scrollviewer 而且自然而然的就成了宿主 让文本显示在里面
- 原来通过代码导出的默认的visualtree就是这样的。只有decorator 或scrollviewer元素可以用作PART_ContentHost
- -->
- <Border Name="borderContent" CornerRadius="10 0 0 10" BorderThickness="1" BorderBrush="Blue" Background="#FFE8DBDB" SnapsToDevicePixels="True">
- <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Name="PART_ContentHost" Focusable="False"/>
- </Border>
- <ControlTemplate.Triggers>
- <MultiTrigger >
- <MultiTrigger.Conditions>
- <Condition Property="IsFocused" Value="False"/>
- <Condition Property="Text" Value=""/>
- </MultiTrigger.Conditions>
- <Setter Property="Background" TargetName="borderContent" >
- <Setter.Value>
- <VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None">
- <VisualBrush.Visual>
- <!--这里是无论何种手段都无法取得父元素 的宽度我无语 所以只能尽量把宽度 高度往大了写
- {Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Width}
- -->
- <TextBlock Width="500" Height="100" Background="#FFE8DBDB">请输入内容</TextBlock>
- </VisualBrush.Visual>
- </VisualBrush>
- </Setter.Value>
- </Setter>
- </MultiTrigger>
- <Trigger Property="IsFocused" Value="True">
- <Setter Property="Background" TargetName="borderContent" Value="#FFE8DBDB"></Setter>
- </Trigger>
- </ControlTemplate.Triggers>
- </ControlTemplate>
- </TextBox.Template>
- </TextBox>
另一种方式:
还有一种方式就是直接控制外围的style trigger也可达到效果,只不过圆角border你必须要在text控件外再套border才能实现:
- <TextBox Text="" Height="30" BorderThickness="1" BorderBrush="Blue" Margin="10">
- <TextBox.Style>
- <Style TargetType="TextBox">
- <!--这种方式直接控制外围的 background 也可以达到效果 ,只不过圆角边框不能实现-->
- <Setter Property="Background" Value="#FFE8DBDB"></Setter>
- <Style.Triggers>
- <MultiTrigger>
- <MultiTrigger.Conditions>
- <Condition Property="Text" Value="" ></Condition>
- </MultiTrigger.Conditions>
- <Setter Property="Background" >
- <Setter.Value>
- <VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None" >
- <VisualBrush.Visual >
- <Border Background="#FFE8DBDB" Width="500" Height="100">
- <TextBlock >请输入内容</TextBlock>
- </Border>
- </VisualBrush.Visual>
- </VisualBrush>
- </Setter.Value>
- </Setter>
- </MultiTrigger>
- </Style.Triggers>
- </Style>
- </TextBox.Style>
- </TextBox>
最终效果:
WPF的TextBox水印效果详解的更多相关文章
- WPF实现TextBox水印效果
在日常项目中,一个TextBox需要输入用户名,我们通常的做法是先用一个TextBlock来说明,例如下面的截图: 今天将使用另外一种方式来展示,使用水印的方式.请参考下面的代码: <Windo ...
- 自定义一个更好用的SwipeRefreshLayout(弹力拉伸效果详解)(转载)
转自: 自定义一个更好用的SwipeRefreshLayout(弹力拉伸效果详解) 前言 熟悉SwipeRefreshLayout的同学一定知道,SwipeRefreshLayout是android里 ...
- jQuery实现滚动效果详解1
声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...
- JS组件系列——JsPlumb制作流程图及相关效果详解
上 篇 前言:之前项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. Jsplumb官网:htt ...
- WPF中图形表示语法详解(Path之Data属性语法)ZZ
大可山 [MSN:a3news(AT)hotmail.com] http://www.zpxp.com 萝卜鼠在线图形图像处理 ------------------------------------ ...
- WPF中图形表示语法详解(Path之Data属性语法)
原文 http://blog.csdn.net/johnsuna/article/details/1885597 老规矩,看图说话. 先看显示效果:(图1) XAML(代码A):<Page xm ...
- WPF系列 Path表示语法详解(Path之Data属性语法)
示例: XAML(代码A): <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
- Android中xml设置Animation动画效果详解
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- Android 吸入动画效果详解
1,背景 吸入(Inhale)效果,最初我是在iOS上面看到的,它是在Note程序中,用户可能添加了一页记录,在做删除时,它的删除效果是:这一页内容吸入到一个垃圾框的图标里面.请看下图所示: ==== ...
随机推荐
- cve-2017-8464 复现 快捷方式远程代码执行
cve-2017-8464 2017年6月13日,微软官方发布编号为CVE-2017-8464的漏洞公告,官方介绍Windows系统在解析快捷方式时存在远程执行任意代码的高危漏洞,黑客可以通过U盘.网 ...
- Redis环境搭建(MacOS)
Redis是一个开源的key-value类型的存储系统,大部分数据存在于内存中,所有读写速度十分快.其支持的存储value数据类型有多种,如:strings.hashes.lists.sets.sor ...
- 第一阶段项目(2 body)
body属性 <div class="H1"> <div class="top-nav"> <div class="tn ...
- UnitOfWork知多少
1. 引言 Maintains a list of objects affected by a business transaction and coordinates the writing out ...
- JSP向后台传递参数的四种方式
Jsp页面传值的方法 一.通过Form表单提交传值 客户端通过Form表单提交到服务器端,服务器端通过 Java代码 request.getParameter(String xx); 来取得参数(xx ...
- Android开发 去掉标题栏方法 摘记
1.用代码里实现 提示:这句代码要写在Activity中的setContentView()方法前面. 2.在清单文件(Androidmanifest.xml)里面实现 android:theme= ...
- C++编程规范(不断更新)
本文总结一些经验教训,以使编出来的代码更为健壮. 1.定义类/结构体的时候不要和系统函数冲突(尤其是不同系统/平台之间移植的时候) 有时候在windows系统下编译没问题,但是在linux系统下就不行 ...
- 'JAVAC' 不是内部或外部命令的解决方法
'JAVAC' 不是内部或外部命令解决方法.. 在cmd里边输入javac就会提示”'JAVAC' 不是内部或外部命令,也不是可运行的程序 或批处理文件..此时原因分析: 一.确定是否安装了jdk ...
- poj 3013 Big Christmas Tree
Big Christmas Tree Time Limit: 3000MS Memory Limit: 131072K Total Submissions: 20974 Accepted: 4 ...
- .net core 2.0 登陆权限验证
首先在Startup的ConfigureServices方法添加一段权限代码 services.AddAuthentication(x=> { x.DefaultAuthenticateSche ...