silverlight-带水印的TextBox

在Silverlight2里面,提供了TextBox的水印WaterMark功能。但是之后的版本就把这个功能给删了。关于Silverlight2里面的水印功能可以参考这篇文章《一步一步学Silverlight 2系列(2):基本控件》。之后想用水印唯有自己写一个了。

以下是我自己写的一个带水印的TextBox。

1.新建类MyTextBox,继承TextBox。

2.在MyTextBox类里面,增加一个属性WaterMarkText用来保存水印。

除了增加一个属性之外,还需要增加一些保存区别于正常状态的属性的全局变量。

复制代码
//水印状态
private Brush _redColor = new SolidColorBrush(Colors.Red);
private double _halfOpacity = 0.5;

//正常状态
private Brush _userColor;
private double _userOpacity;

public string WaterMarkText { get; set; }
复制代码

 

3.并且重写OnGotFocus()和OnLostFocus()两个事件。

在TextBox里面我们可以发现这两个事件是Override标记的,所以可以重载他们。

复制代码
protected override void  OnGotFocus(RoutedEventArgs e)
{
    if (this.Text == WaterMarkText)
    {
        this.Text = "";
        this.Foreground = _userColor;
        this.Opacity = _userOpacity;
    }
    base.OnGotFocus(e);
}

protected override void OnLostFocus(RoutedEventArgs e)
{
    if (this.Text.Length < 1)
    {
        this.Text = WaterMarkText;
        this.Foreground = _redColor;
        this.Opacity = _halfOpacity;
    }
    base.OnLostFocus(e);
}
复制代码

 

4.虽然这里已经完成大部分工作了,但是还有一个重要的地方。

类似于初始化,先验检测水印是否存在,而且设置水印。这个我将代码写在SizeChanged事件里面。为什么要写在这里可以参考另外一篇文章,关于控件的生命周期的《Silverlight 的控件生命周期 - 木野狐(Neil Chen)》。另外要将_userColor和_userOpacity初始化。

SizeChanged事件的代码如下:

复制代码
public MyTextBox()
{
    SizeChanged += new SizeChangedEventHandler(MyTextBox_SizeChanged);
}

void MyTextBox_SizeChanged(object sender, SizeChangedEventArgs e)
{
    _userColor = this.Foreground;
    _userOpacity = this.Opacity;
    if (WaterMarkText != "")
    {
        this.Foreground = _redColor;
        this.Opacity = _halfOpacity;
        this.Text = WaterMarkText;
    }
}
复制代码

 

 5.源代码,至此工作完成。以下是完整代码:

复制代码
带水印的TextBox
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TextBoxWaterMark
{
    public class MyTextBox:TextBox
    {
        //水印状态
        private Brush _redColor = new SolidColorBrush(Colors.Red);
        private double _halfOpacity = 0.5;

        //正常状态
        private Brush _userColor;
        private double _userOpacity;

        public string WaterMarkText { get; set; }

        public MyTextBox()
        {
            SizeChanged += new SizeChangedEventHandler(MyTextBox_SizeChanged);
        }

        void MyTextBox_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            _userColor = this.Foreground;
            _userOpacity = this.Opacity;
            if (WaterMarkText != "")
            {
                this.Foreground = _redColor;
                this.Opacity = _halfOpacity;
                this.Text = WaterMarkText;
            }
        }

        protected override void  OnGotFocus(RoutedEventArgs e)
        {
            if (this.Text == WaterMarkText)
            {
                this.Text = "";
                this.Foreground = _userColor;
                this.Opacity = _userOpacity;
            }
            base.OnGotFocus(e);
        }

        protected override void OnLostFocus(RoutedEventArgs e)
        {
            if (this.Text.Length < 1)
            {
                this.Text = WaterMarkText;
                this.Foreground = _redColor;
                this.Opacity = _halfOpacity;
            }
            base.OnLostFocus(e);
        }
    }
}
复制代码

 

6.调用过程

<local:MyTextBox Foreground="Blue" WaterMarkText="请输入!" />

 

local是命名空间,是MyTextBox类所在的命名空间。本机是这样写的:xmlns:local="clr-namespace:TextBoxWaterMark"

 

效果图如下:

未获取焦点:

获取焦点并输入

 

好记性不如烂笔头

 

 

posted on   Ron Ngai  阅读(3289)  评论(4编辑  收藏  举报

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2011-08-22 asp.net 递归删除文件夹及其子文件夹和所有文件[转]

导航

< 2012年8月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示