技术开发 频道

C#皮肤美化之实现Textbox水印与辉光

    【IT168 技术文档】效果预览

  还是先看看最终的效果图(和QQ登陆中的输入框效果差不多):

1
 

  效果说明: 1.实现了水印的效果 2.实现了鼠标移上去的时候周围产生辉光 3.输入前端可以设置图片

  实现辉光效果

  整体说明:

  前面显示的那个图片我采用的是一个picturebox,当然如果你愿意也可以自己画(后续的“button再探讨”中就采用的是自己画的方式)。图片后面的输入文本框采用的是textbox控件,这样一来就避免了许多绘制textbox的麻烦(我一开始打算自己绘制用户输入的字符的,不过发现不理想)。然后边框和辉光都是画出来的。

  具体实现:

  先抛开水印不说。最重要的就是重写的OnPaint方法,如下:

protected override void OnPaint(PaintEventArgs e)
        {
            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模式。代码如下:

private void CalculateSizeAndPosition()
        {
            
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;  //如果是多行则设置实际里面的输入文本框的高度
            }
        }

 

  当所有的东西都计算好了,我们就可以安心的拿起我们的画笔竟然绘画了。先画什么?再画什么?请看代码:

private void Draw(Rectangle rectangle, Graphics g)
        {

            
#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
        }

 

  在这个方法里面主要画了三个东西,大家看注释也知道了,分别是:背景,边框,辉光。要注意的就是这里面的微小距离要设置好,我也改了好几次才设置正确。在画边框和辉光的时候,因为实现了圆角边框所以要对圆角度进行判断。

  现在绘画的方法也做好了,接下来就是出发重绘的事件了。不然它也不会自动帮你绘画啊^_^。显然当鼠标移上去和移出去的时候需要重新绘画。那我们就在下面几个方法中引发重绘事件:

private void TextBoxEx2_MouseEnter(object sender, EventArgs e)
        {
            _isFouse
= true;
            this.Invalidate();
        }

        
private void TextBoxEx2_MouseLeave(object sender, EventArgs e)
        {
            _isFouse
= false;
            this.Invalidate();
        }

 

  代码很简单,不解释。

  基本上面的做好了,大部分就完成了。下面我们完成水印的功能。至此,textbox美化讲解完毕,希望对你有帮助

0
相关文章