WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

 原文：https://www.cnblogs.com/anding/p/4970845.html

一．前言.预览

　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。

本文主要是对文本输入控件进行样式开发，及相关扩展功能开发，主要内容包括：

• 基本文本框TextBox控件样式及扩展功能，实现了样式、水印、Label标签、功能扩展；
• 富文本框RichTextBox控件样式；
• 密码输入框PasswordBox控件样式及扩展功能；

效果图：

二．基本文本框TextBox控件样式及扩展功能

2.1 TextBox基本样式

样式代码如下：  

　　模板内容主要包含四部分：

• 用于实现Label标签的预留区域；
• TextBox本身的文本输入显示部分；
• 水印显示部分；
• 功能扩展的预留区域；

　　其中Label标签、功能扩展，还有输入框的不同状态显示效果都是通过附加属性来实现的，其实从本质上附加属性和控件上定义的依赖属性是同一个概念，有些时候附加属性会更加方便，对于一些可共用的属性，就比较方便，这一点怎本文是有体现的。上面代码使用到的附加属性代码：

  View Code

2.2 水印效果实现

　　通过2.1的代码示例，可以看出，水印是内置了一个TextBlock，用附加属性ControlAttachProperty.Watermark设置水印内容，在触发器中检测，当TextBox中有输入值，则隐藏水印的TextBlock，使用示例：  

        
            333333333333333
            
            我是只读的
            IsEnabled="False"
            
        

　　效果：

　　

2.3 Label标签实现

　　参考2.1的代码，预留了Label的区域，通过设置附加属性local:ControlAttachProperty.Label设置标签文本，local:ControlAttachProperty.LabelTemplate设置Label标签的模板样式，即可自定义实现Label标签，自定义样式：

　　使用示例及效果： 

2.4 扩展功能及自定义扩展

　　思路和2.3的Label标签实现相似，清除文本框内的内容是一个常用需求，我们就线扩展一个这么一个功能的TextBox，通过附加属性ControlAttachProperty.AttachContent定义扩展功能的模板，模板内定义的是一个按钮FButton（可参考上一篇，本文末尾附录中有链接）  

　　这里定义的是显示效果，清除TextBox内容的逻辑代码如何实现的呢？还是附加属性：

• ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" ：注入事件到当前Button
• Command="local:ControlAttachProperty.ClearTextCommand"：定义Fbutton的命令对象实例Command
• CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"：把TextBox作为参数传入

　　逻辑代码如下，从代码不难看出，它是支持多种输入控件的内容清除的，也就是说该扩展功能可以轻松支持其他输入控件，第四节密码数据的清除也是这样使用的。

  View Code

　　效果：

　　

当然我们也可以自定义扩展其他功能，如：  

　　效果：

由上不难同时实现Label标签和清除文本内容的样式：

2.6 文件选择输入相关扩展

　　先看看效果，就明白了。

　　 

具体实现原理和上面2.4差不多 ，实现了三个文件、文件夹选择相关的功能扩展，样式代码：

当然实现原理和2.4一样，都是依赖属性来实现事件的注入和绑定的，所以就不多废话了：

  View Code

 三．富文本框RichTextBox控件样式

　　RichTextBox的样式比较简单：  

　　使用实力及效果：  

四．密码输入框PasswordBox控件样式及扩展功能

　　密码输入控件的样式和第二节文本框TextBox基本一致，就不做详细的说明了，直接上样式的代码，相关逻辑（C#） 代码和上面是一样的（复用）。

使用示例及效果：