【IT168 技术文档】效果预览
还是先看看最终的效果图(和QQ登陆中的输入框效果差不多)：
效果说明： 1.实现了水印的效果 2.实现了鼠标移上去的时候周围产生辉光 3.输入前端可以设置图片
实现辉光效果
整体说明：
前面显示的那个图片我采用的是一个picturebox，当然如果你愿意也可以自己画(后续的“button再探讨”中就采用的是自己画的方式)。图片后面的输入文本框采用的是textbox控件，这样一来就避免了许多绘制textbox的麻烦(我一开始打算自己绘制用户输入的字符的，不过发现不理想)。然后边框和辉光都是画出来的。
具体实现：
先抛开水印不说。最重要的就是重写的OnPaint方法，如下：
{
Graphics g = e.Graphics;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.SmoothingMode = SmoothingMode.HighQuality;
CalculateSizeAndPosition();
Draw(e.ClipRectangle, e.Graphics);
base.OnPaint(e);
}
可以看出里面调用了两个方法，做过前面窗体换肤的可能对这个不陌生。就是绘画之前计算好所有的位置大小信息，然后再调用draw画出来。那么这次的calculateSizeAndPosition又做了什么呢?2点!1.判断是否有前端图片需要显示，2.判断是否处于multiline模式。代码如下：
{
if (ForeImage != null)
{
//图片大小固定为16
pic.Height = pic.Width = 16;
pic.Top = pic.Left = 3;
txt.Width = Width - pic.Width - 12;
txt.Location = new Point(16 + 3 + 3, 6);
}
else
{
pic.Left = -40; //隐藏图片
txt.Width = Width - 9;
txt.Location = new Point(3, 6);
}
//单行
if (!txt.Multiline)
{
Height = txt.Height + 9;
}
else
{
txt.Height = Height - 9; //如果是多行则设置实际里面的输入文本框的高度
}
}
当所有的东西都计算好了，我们就可以安心的拿起我们的画笔竟然绘画了。先画什么?再画什么?请看代码：
{
#region 画背景
using (SolidBrush backgroundBrush = new SolidBrush(Color.White))
{
g.FillRectangle(backgroundBrush, 2, 2, this.Width - 5, this.Height -4);
}
#endregion
#region 画阴影(外边框)
Color drawShadowColor = _shadowColor;
if (!_isFouse) //判断是否获得焦点
{
drawShadowColor = Color.Transparent;
}
using (Pen shadowPen = new Pen(drawShadowColor))
{
if (_radius == 0)
{
g.DrawRectangle(shadowPen, new Rectangle(rectangle.X, rectangle.Y, rectangle.Width - 1, rectangle.Height - 1));
}
else
{
g.DrawPath(shadowPen, DrawHelper.DrawRoundRect(rectangle.X, rectangle.Y, rectangle.Width - 2, rectangle.Height - 1, _radius));
}
}
#endregion
#region 画边框
using (Pen borderPen = new Pen(_borderColor))
{
if (_radius == 0)
{
g.DrawRectangle(borderPen, new Rectangle(rectangle.X + 1, rectangle.Y + 1, rectangle.Width - 3, rectangle.Height - 3));
}
else
{
g.DrawPath(borderPen, DrawHelper.DrawRoundRect(rectangle.X + 1, rectangle.Y + 1, rectangle.Width - 3, rectangle.Height - 2, _radius));
}
}
#endregion
}
在这个方法里面主要画了三个东西，大家看注释也知道了，分别是：背景，边框，辉光。要注意的就是这里面的微小距离要设置好，我也改了好几次才设置正确。在画边框和辉光的时候，因为实现了圆角边框所以要对圆角度进行判断。
现在绘画的方法也做好了，接下来就是出发重绘的事件了。不然它也不会自动帮你绘画啊^_^。显然当鼠标移上去和移出去的时候需要重新绘画。那我们就在下面几个方法中引发重绘事件：
{
_isFouse = true;
this.Invalidate();
}
private void TextBoxEx2_MouseLeave(object sender, EventArgs e)
{
_isFouse = false;
this.Invalidate();
}
代码很简单，不解释。
基本上面的做好了，大部分就完成了。下面我们完成水印的功能。至此，textbox美化讲解完毕，希望对你有帮助
