WPF的TextBox水印效果详解

一种自以为是的方式:

本来只是想简单的做个水印效果,在文本框内容为空的时候提示用户输入,这种需求挺常见。网上一搜 都是丢给你你一大段xaml代码。用c#代码实现我是不倾向了 既然用wpf就得Xaml啊。首先我想到的是template嘛 wpf到处离不开template 。我想到的是一个border 套一个textblock嘛 然后让文本内容通过templateBinding到Text嘛 搞得不亦乐乎 ,并且也确实很快就达到了我要的效果:

 1 <TextBox>
 2     <TextBox.Template>
 3         <ControlTemplate TargetType="TextBox">
 4             <Border BorderThickness="1" Name="border" BorderBrush="Red">
 5                 <TextBlock Text="{TemplateBinding Text}"></TextBlock>
 6             </Border>
 7             <ControlTemplate.Triggers>
 8                 <MultiTrigger>
 9                     <MultiTrigger.Conditions>
10                         <Condition Property="Text" Value=""></Condition>
11                     </MultiTrigger.Conditions>
12                     <Setter Property="Background" TargetName="border">
13                         <Setter.Value>
14                             <VisualBrush AlignmentX="Left" AlignmentY="Top"  Stretch="None">
15                                 <VisualBrush.Visual>
16                                     <TextBlock Width="500" Height="100" Background="#FFE8DBDB">请输入内容22</TextBlock>
17                                 </VisualBrush.Visual>
18                             </VisualBrush>
19                         </Setter.Value>
20                     </Setter>
21                 </MultiTrigger>
22             </ControlTemplate.Triggers>
23         </ControlTemplate>
24     </TextBox.Template>
25 </TextBox>

最后仔细一看杯具的发现文本内容输入的时候没有光标,然后我想到的就是把模板里的textblock改为textbox就完了嘛。好 一改更杯具了 水印效果抽风了 最后发现 用c#代码 强制让文本框Focus() 貌似就可以 ,也许本身元素就是TextBox 模板里面 再放TextBox 就会导致焦点无法获取造成各种混乱吧。最后弄不好 。

通过尝试更改TextBox自带的模板来达到效果

导出系统默认textBox的模板visualTree ,经过尝试成功达到效果,值得一提的是 我纳闷儿网上那些人为甚有的一贴出的xaml代码里面就是scrollviewer呢 并且还能够正确运行 让我很难理解 ,一看原来系统默认的就是scrollviewer 原来如此 还有Name=PART_ContentHost  只要写成他自然而然就能被当初内容宿主处理。看来PART_ContentHost  是个很特殊的系统名称,还有就是多行文本框通过 设置AcceptsReturn="True" VerticalScrollBarVisibility="Auto" 属性来达到:

 1
 2 <TextBox Text="" Height="60" Name="nihao" Width="300" AcceptsReturn="True" VerticalScrollBarVisibility="Auto"  >
 3     <TextBox.Template>
 4         <ControlTemplate TargetType="TextBox">
 5             <!--下面必须写成PART_ContentHost 才能正常 无语又是一个神秘硬编码
 6                         我就纳闷儿 为甚网上的人要写 scrollviewer 而且自然而然的就成了宿主 让文本显示在里面
 7                         原来通过代码导出的默认的visualtree就是这样的。只有decorator 或scrollviewer元素可以用作PART_ContentHost
 8                         -->
 9             <Border Name="borderContent" CornerRadius="10 0 0 10"  BorderThickness="1" BorderBrush="Blue" Background="#FFE8DBDB"  SnapsToDevicePixels="True">
10                 <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Name="PART_ContentHost" Focusable="False"/>
11             </Border>
12             <ControlTemplate.Triggers>
13                 <MultiTrigger >
14                     <MultiTrigger.Conditions>
15                         <Condition Property="IsFocused" Value="False"/>
16                         <Condition Property="Text" Value=""/>
17                     </MultiTrigger.Conditions>
18                     <Setter Property="Background" TargetName="borderContent" >
19                         <Setter.Value>
20                             <VisualBrush AlignmentX="Left" AlignmentY="Top"  Stretch="None">
21                                 <VisualBrush.Visual>
22                                     <!--这里是无论何种手段都无法取得父元素 的宽度我无语 所以只能尽量把宽度 高度往大了写
23                                                 {Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Width}
24                                                 -->
25                                     <TextBlock Width="500" Height="100" Background="#FFE8DBDB">请输入内容</TextBlock>
26                                 </VisualBrush.Visual>
27                             </VisualBrush>
28                         </Setter.Value>
29                     </Setter>
30                 </MultiTrigger>
31                 <Trigger Property="IsFocused" Value="True">
32                     <Setter Property="Background" TargetName="borderContent" Value="#FFE8DBDB"></Setter>
33                 </Trigger>
34             </ControlTemplate.Triggers>
35         </ControlTemplate>
36     </TextBox.Template>
37 </TextBox>
38             

另一种方式:

还有一种方式就是直接控制外围的style trigger也可达到效果,只不过圆角border你必须要在text控件外再套border才能实现:

 1
 2 <TextBox Text="" Height="30" BorderThickness="1" BorderBrush="Blue"  Margin="10">
 3     <TextBox.Style>
 4         <Style TargetType="TextBox">
 5             <!--这种方式直接控制外围的 background 也可以达到效果 ,只不过圆角边框不能实现-->
 6             <Setter Property="Background" Value="#FFE8DBDB"></Setter>
 7             <Style.Triggers>
 8                 <MultiTrigger>
 9                     <MultiTrigger.Conditions>
10                         <Condition Property="Text" Value="" ></Condition>
11                     </MultiTrigger.Conditions>
12                     <Setter Property="Background" >
13                         <Setter.Value>
14                             <VisualBrush AlignmentX="Left" AlignmentY="Top"  Stretch="None" >
15                                 <VisualBrush.Visual >
16                                     <Border Background="#FFE8DBDB" Width="500" Height="100">
17                                         <TextBlock >请输入内容</TextBlock>
18                                     </Border>
19                                 </VisualBrush.Visual>
20                             </VisualBrush>
21                         </Setter.Value>
22                     </Setter>
23                 </MultiTrigger>
24             </Style.Triggers>
25         </Style>
26     </TextBox.Style>
27 </TextBox>

最终效果:

时间: 2024-10-10 01:49:59

WPF的TextBox水印效果详解的相关文章

WPF实现TextBox水印效果

在日常项目中,一个TextBox需要输入用户名,我们通常的做法是先用一个TextBlock来说明,例如下面的截图: 今天将使用另外一种方式来展示,使用水印的方式.请参考下面的代码: <Window.Resources> <BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter"/> <Style x:Key="EntryFieldStyle" TargetType

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

自定义一个更好用的SwipeRefreshLayout(弹力拉伸效果详解)(转载)

转自: 自定义一个更好用的SwipeRefreshLayout(弹力拉伸效果详解) 前言 熟悉SwipeRefreshLayout的同学一定知道,SwipeRefreshLayout是android里面专为RecyclerView,NestedScrollView提供下拉刷新动画的一个控件.可是在使用过程中有些局限性,例如只支持上述控件,不支持ListView,GridView等,另外下拉的动画效果很难更改,而且不支持上拉加载--在很多场景的情况下往往不符合我们的需求. 今天为大家分享的是一个支

JS组件系列——JsPlumb连线及相关效果详解

前言:之前项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. Jsplumb官网:https://jsplumbtoolkit.com GitHub:https://github.com/sporritt/jsplumb/ 一.效果图展示 1.从左边拖动元素到中间区域,然后连线 2.连线类型可以自定义:这里定义为直线.折线.曲线.实际项目中根据业务我们定义为分装线.分装支线.总装线等 3.鼠标拖动区

WPF中的Command命令详解

在WPF中使用命令的步骤很简单 1.创建命令 2.绑定命令 3.设置命令源 4.设置命令目标 WPF中命令的核心是System.Windows.Input.ICommand接口,所有命令对象都实现了此接口.当创建自己的命令时,不能直接实现ICommand接口,而是要使用System.Windows.Input.RouteCommand类,该类已经实现了ICommand接口,所有WPF命令都是RouteCommand类的实例.在程序中处理的大部分命令不是RoutedCommand对象,而是Rout

jQuery实现滚动效果详解1

声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上现成的代码和插件很多,拿来用有时候不大顺手,今天我就来学习一下它的原理. 要实现这个效果:1.需要一个展示区,滚动的内容只有通过展示区才能被看到id=visual_area2.把滚动的内容横向排列的载体,我们姑且叫它画布,注意不能理解PS中的画布class=scroll_area3.看起来要滚动的内

(四)Android动画开发---Animation动画效果详解

Android 使用Animation的具体操作方法我们将会在这篇文章中做一个详细的介绍.大家可以通过这里举出的代码进行解读,并从中了解到相关操作技巧,方便我们将来开发应用,并且加深对这一操作系统的理解程度. 在Android中,分别可以在xml中定义Animation,也可以在程序代码中定义. 动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转

android中xml设置Animation动画效果详解

在 android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation 画面转换动画. tweened animation 渐变动画有以下两种类型: 1.alpha 渐变透明度动画效果 2.scale 渐变尺寸伸缩动画效果 frame by frame animation 画面转换动画有以下两种类型: 1.translate 画面转换位置移动动画效果 2.rotate

Android animator Animation动画效果详解

Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 JavaCode中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸伸缩动画效果 TranslateAnimation 画面转换位置移动动画效果 RotateAnimation 画面转移旋转动画效果 Android动画模式 Animation主要有两种