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.源代碼，至此工作完成。以下是完整代碼：

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"

 

效果圖如下：

未獲取焦點：

獲取焦點並輸入

 

好記性不如爛筆頭