Discuz教程网

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › 跟我学做c#皮肤美化--Textbox
返回列表 发新帖

跟我学做c#皮肤美化--Textbox

[复制链接]
authicon 沧海逆天 发表于 2010-11-30 21:58:43 | 显示全部楼层 |阅读模式
效果预览

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




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

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

   具体实现：
先抛开水印不说。最重要的就是重写的OnPaint方法，如下：
  1. protected override void OnPaint(PaintEventArgs e)
  2.         {
  3.             Graphics g = e.Graphics;
  4.             g.InterpolationMode = InterpolationMode.HighQualityBicubic;
  5.             g.SmoothingMode = SmoothingMode.HighQuality;

  7.             CalculateSizeAndPosition();
  8.             Draw(e.ClipRectangle, e.Graphics);

  10.             base.OnPaint(e);
  11.         }
复制代码
可以看出里面调用了两个方法，做过前面窗体换肤的可能对这个不陌生。就是绘画之前计算好所有的位置大小信息，然后再调用draw画出来。那么这次的calculateSizeAndPosition又做了什么呢？2点！1.判断是否有前端图片需要显示，2.判断是否处于multiline模式。代码如下：
  1. private void CalculateSizeAndPosition()
  2.         {
  3.             if (ForeImage != null)
  4.             {
  5.                 //图片大小固定为16
  6.                 pic.Height = pic.Width = 16;
  7.                 pic.Top = pic.Left = 3;
  8.                 txt.Width = Width - pic.Width - 12;
  9.                 txt.Location = new Point(16 + 3 + 3, 6);
  10.             }
  11.             else
  12.             {
  13.                 pic.Left = -40;  //隐藏图片
  14.                   txt.Width = Width - 9;
  15.                 txt.Location = new Point(3, 6);
  16.             }

  18.             //单行
  19.              if (!txt.Multiline)
  20.             {
  21.                 Height = txt.Height + 9;
  22.             }
  23.             else
  24.             {
  25.                 txt.Height = Height - 9;  //如果是多行则设置实际里面的输入文本框的高度
  26.             }
  27.         }
复制代码
在这个方法里面主要画了三个东西，大家看注释也知道了，分别是：背景，边框，辉光。要注意的就是这里面的微小距离要设置好，我也改了好几次才设置正确。在画边框和辉光的时候，因为实现了圆角边框所以要对圆角度进行判断。
现在绘画的方法也做好了，接下来就是出发重绘的事件了。不然它也不会自动帮你绘画啊^_^。显然当鼠标移上去和移出去的时候需要重新绘画。那我们就在下面几个方法中引发重绘事件：private void Draw(Rectangle rectangle, Graphics g)
  1. private void TextBoxEx2_MouseEnter(object sender, EventArgs e)
  2.         {
  3.             _isFouse = true;
  4.             this.Invalidate();
  5.         }

  7.         private void TextBoxEx2_MouseLeave(object sender, EventArgs e)
  8.         {
  9.             _isFouse = false;
  10.             this.Invalidate();
  11.         }
复制代码
代码很简单，不解释。
基本上面的做好了，大部分就完成了。下面我们完成水印的功能。至此，textbox美化讲解完毕，希望对你有帮助
实现水印效果

      水印我是这样子实现的：当用户离开输入焦点的时候检测当前用户有没有输入字符，如果没有输入则改变输入框的颜色（灰色），然后看起来就像是水印的感觉啦。我们专门写了一个函数来设置水印，如下：
  1.         private void SetWaterMark()
  2.         {
  3.             if (_waterMark != null && (txt.Text == " " || txt.Text == @" " + WaterMark))   //用户没有输入
  4.             {   
  5.                 txt.ForeColor = _waterMarkColor;
  6.                 txt.Text = @" " + WaterMark;
  7.             }
  8.             else
  9.             {
  10.                 txt.ForeColor = ForeColor;
  11.             }
  12.         }
复制代码
然后在什么地方调用呢？刚才上面也已经说了当用户离开焦点的时候判断，不过用户获得输入焦点的时候我们还要设置一下，如果当前的文本时水印的话就清空文本等待输入：
  1.         private void Txt_GotFocus(object sender, EventArgs e)
  2.         {
  3.             if (txt.Text == @" " + WaterMark)
  4.             {
  5.                 //获得焦点，切换正常文字等待填写
  6.                 txt.ForeColor = ForeColor;
  7.                 txt.Text = " ";
  8.             }
  9.         }

  11.         private void Txt_LostFocus(object sender, EventArgs e)
  12.         {
  13.             SetWaterMark();
  14.         }
复制代码
这里还有一点需要注意的是，在pageload里面我们也需要调用一下setwatermark方法，不然它一开始是不会显示滴！

源代码快照
  1. namespace QLFUI
  2. {
  3.     public partial class TextBoxEx : UserControl
  4.     {
  5.         #region - 变量 -

  7.         private Color _borderColor = Color.FromArgb(166, 208, 226);
  8.         private Color _shadowColor = Color.FromArgb(175, 212, 228);
  9.         private Image _foreImage = null;
  10.         private bool _isFouse = false;
  11.         private Color _backColor = Color.Transparent;
  12.         private string _waterMark = null;
  13.         private Color _waterMarkColor = Color.Silver;
  14.         private Color _foreColor = Color.Black;
  15.         private int _radius = 3;

  17.         #endregion

  19.         #region - 属性 -

  21.         [Category("QLFUI"), Description("边框颜色,BorderStyle为FixedSingle有效")]
  22.         public Color BorderColor
  23.         {
  24.             get { return _borderColor; }
  25.             set
  26.             {
  27.                 _borderColor = value;
  28.                 this.Invalidate();
  29.             }
  30.         }

  32.         [Category("QLFUI"), Description("边框阴影颜色,BorderStyle为FixedSingle有效")]
  33.         public Color ShadowColor
  34.         {
  35.             get { return _shadowColor; }
  36.             set
  37.             {
  38.                 _shadowColor = value;
  39.                 this.Invalidate();
  40.             }
  41.         }

  43.         [Category("QLFUI"), Description("显示的前端的图片")]
  44.         public Image ForeImage
  45.         {
  46.             get { return pic.Image; }
  47.             set
  48.             {
  49.                 _foreImage = value;
  50.                 pic.Image = _foreImage;
  51.                 Invalidate();
  52.             }
  53.         }

  55.         [Category("QLFUI"), Description("文字")]
  56.         public string Caption
  57.         {
  58.             get
  59.             {
  60.                 return txt.Text;
  61.             }
  62.             set
  63.             {
  64.                 txt.Text = value;
  65.                 SetWaterMark();
  66.                 Invalidate();
  67.             }
  68.         }

  70.         [Category("行为"), Description("是否多行显示")]
  71.         public bool Multiline
  72.         {
  73.             get { return txt.Multiline; }
  74.             set
  75.             {
  76.                 txt.Multiline = value;
  77.             }
  78.         }

  80.         [Category("行为"), Description("是否以密码形式显示字符")]
  81.         public bool UseSystemPasswordChar
  82.         {
  83.             get { return txt.UseSystemPasswordChar; }
  84.             set
  85.             {
  86.                 txt.UseSystemPasswordChar = value;
  87.             }
  88.         }

  90.         [Category("QLFUI"), Description("水印文字")]
  91.         public string WaterMark
  92.         {
  93.             get { return _waterMark; }
  94.             set
  95.             {
  96.                 _waterMark = value;
  97.                 Invalidate();
  98.             }
  99.         }

  101.         [Category("QLFUI"), Description("水印颜色")]
  102.         public Color WaterMarkColor
  103.         {
  104.             get { return _waterMarkColor; }
  105.             set
  106.             {
  107.                 _waterMarkColor = value;
  108.                 Invalidate();
  109.             }
  110.         }

  112.         #region 需要被隐藏的属性

  114.         [Browsable(false)]
  115.         public new BorderStyle BorderStyle
  116.         {
  117.             get { return BorderStyle.None; }
  118.         }

  120.         [Browsable(false)]
  121.         public new Color BackColor
  122.         {
  123.             get { return base.BackColor; }
  124.             set { base.BackColor = value; }
  125.         }

  127.         [Browsable(false)]
  128.         public new Image BackgroundImage
  129.         {
  130.             get { return null; }
  131.         }

  133.         [Browsable(false)]
  134.         public new ImageLayout BackgroundImageLayout
  135.         {
  136.             get { return base.BackgroundImageLayout; }
  137.             set { base.BackgroundImageLayout = value; }
  138.         }

  140.         #endregion

  142.         [Category("QLFUI"), Description("边角弯曲的角度(1-10),数值越大越弯曲")]
  143.         public int Radius
  144.         {
  145.             get { return _radius; }
  146.             set
  147.             {
  148.                 if (value > 10)
  149.                 {
  150.                     value = 10;
  151.                 }
  152.                 if (value < 0)
  153.                 {
  154.                     value = 0;
  155.                 }
  156.                 _radius = value;
  157.                 this.Invalidate();
  158.             }
  159.         }

  161.         [Browsable(true)]
  162.         [Category("外观"), Description("文本颜色")]
  163.         public new Color ForeColor
  164.         {
  165.             get { return _foreColor; }
  166.             set { _foreColor = value; }
  167.         }

  169.         [Browsable(true)]
  170.         [Category("外观"), Description("鼠标形状")]
  171.         public new Cursor Cursor
  172.         {
  173.             get { return txt.Cursor; }
  174.             set { txt.Cursor = value; }
  175.         }

  177.         [Category("行为"), Description("自动提示方式")]
  178.         public AutoCompleteMode AutoCompleteMode
  179.         {
  180.             get { return txt.AutoCompleteMode; }
  181.             set { txt.AutoCompleteMode = value; }
  182.         }

  184.         [Category("行为"), Description("自动提示类型")]
  185.         public AutoCompleteSource AutoCompleteSource
  186.         {
  187.             get { return txt.AutoCompleteSource; }
  188.             set { txt.AutoCompleteSource = value; }
  189.         }

  191.         #endregion

  193.         #region - 构造函数 -

  195.         public TextBoxEx()
  196.         {
  197.             SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.AllPaintingInWmPaint, true);
  198.             InitializeComponent();

  200.             BackColor = Color.Transparent;

  202.             //下面的图片和文本框的大小位置必须设置，否则首次启动时
  203.             //会出现莫名其妙的断痕
  204.             pic.SizeMode = PictureBoxSizeMode.StretchImage;
  205.             pic.BorderStyle = BorderStyle.None;
  206.             pic.Height = pic.Width = 16;//图片大小固定为16
  207.             pic.Left = -40;  //隐藏图片
  208.             txt.Width = Width - 9;
  209.             txt.Location = new Point(3, 6);

  211.             txt.MouseEnter += new EventHandler(TextBoxEx2_MouseEnter);
  212.             txt.MouseLeave += new EventHandler(TextBoxEx2_MouseLeave);
  213.             pic.MouseEnter += new EventHandler(TextBoxEx2_MouseEnter);
  214.             pic.MouseLeave += new EventHandler(TextBoxEx2_MouseLeave);
  215.             txt.LostFocus += new EventHandler(Txt_LostFocus);
  216.             txt.GotFocus += new EventHandler(Txt_GotFocus);
  217.             pic.BackColor = Color.White;  //不设置成白色则边框会一同加阴影
  218.         }

  220.         #endregion

  222.         #region - 事件 -

  224.         private void TextBoxEx_Load(object sender, EventArgs e)
  225.         {
  226.             SetWaterMark();
  227.         }

  229.         private void TextBoxEx2_MouseEnter(object sender, EventArgs e)
  230.         {
  231.             _isFouse = true;
  232.             this.Invalidate();
  233.         }

  235.         private void TextBoxEx2_MouseLeave(object sender, EventArgs e)
  236.         {
  237.             _isFouse = false;
  238.             this.Invalidate();
  239.         }

  241.         private void Txt_GotFocus(object sender, EventArgs e)
  242.         {
  243.             if (txt.Text == @" " + WaterMark)
  244.             {
  245.                 //获得焦点，切换正常文字等待填写
  246.                 txt.ForeColor = ForeColor;
  247.                 txt.Text = " ";
  248.             }
  249.         }

  251.         private void Txt_LostFocus(object sender, EventArgs e)
  252.         {
  253.             SetWaterMark();
  254.         }

  256.         protected override void OnPaint(PaintEventArgs e)
  257.         {
  258.             Graphics g = e.Graphics;
  259.             g.InterpolationMode = InterpolationMode.HighQualityBicubic;
  260.             g.SmoothingMode = SmoothingMode.HighQuality;

  262.             CalculateSizeAndPosition();
  263.             Draw(e.ClipRectangle, e.Graphics);
  264.             

  266.             base.OnPaint(e);
  267.         }

  269.         #endregion

  271.         #region - 帮助方法 -

  273.         private void SetWaterMark()
  274.         {
  275.             if (_waterMark != null && (txt.Text == " " || txt.Text == @" " + WaterMark))   //用户没有输入
  276.             {   
  277.                 txt.ForeColor = _waterMarkColor;
  278.                 txt.Text = @" " + WaterMark;
  279.             }
  280.             else
  281.             {
  282.                 txt.ForeColor = ForeColor;
  283.             }
  284.         }

  286.         private void CalculateSizeAndPosition()
  287.         {
  288.             if (ForeImage != null)
  289.             {
  290.                 pic.Top = pic.Left = 3;
  291.                 txt.Width = Width - pic.Width - 12;
  292.                 txt.Location = new Point(16 + 3 + 3, 6);
  293.             }
  294.             else
  295.             {
  296.                 pic.Left = -40;  //隐藏图片
  297.                 txt.Width = Width - 9;
  298.                 txt.Location = new Point(3, 6);
  299.             }

  301.             //单行
  302.             if (!txt.Multiline)
  303.             {
  304.                 Height = txt.Height + 9;
  305.             }
  306.             else
  307.             {
  308.                 txt.Height = Height - 9;
  309.             }
  310.         }

  312.         private void Draw(Rectangle rectangle, Graphics g)
  313.         {

  315.             #region 画背景
  316.             using (SolidBrush backgroundBrush = new SolidBrush(Color.White))
  317.             {
  318.                 g.FillRectangle(backgroundBrush, 2, 2, this.Width - 5, this.Height -4);
  319.             }
  320.             #endregion

  322.             #region 画阴影(外边框)

  324.             Color drawShadowColor = _shadowColor;
  325.             if (!_isFouse)    //判断是否获得焦点
  326.             {
  327.                 drawShadowColor = Color.Transparent;
  328.             }
  329.             using (Pen shadowPen = new Pen(drawShadowColor))
  330.             {
  331.                 if (_radius == 0)
  332.                 {
  333.                     g.DrawRectangle(shadowPen, new Rectangle(rectangle.X, rectangle.Y, rectangle.Width - 1, rectangle.Height - 1));
  334.                 }
  335.                 else
  336.                 {
  337.                     g.DrawPath(shadowPen, DrawHelper.DrawRoundRect(rectangle.X, rectangle.Y, rectangle.Width - 2, rectangle.Height - 1, _radius));
  338.                 }
  339.             }
  340.             #endregion

  342.             #region 画边框
  343.             using (Pen borderPen = new Pen(_borderColor))
  344.             {
  345.                 if (_radius == 0)
  346.                 {
  347.                     g.DrawRectangle(borderPen, new Rectangle(rectangle.X + 1, rectangle.Y + 1, rectangle.Width - 3, rectangle.Height - 3));
  348.                 }
  349.                 else
  350.                 {
  351.                     g.DrawPath(borderPen, DrawHelper.DrawRoundRect(rectangle.X + 1, rectangle.Y + 1, rectangle.Width - 3, rectangle.Height - 2, _radius));
  352.                 }
  353.             }
  354.             #endregion
  355.         }

  357.         #endregion
  358.     }
  359. }
复制代码
代码下载：
游客，如果您要查看本帖隐藏内容请回复





上一篇：混色器
下一篇：史上最牛的面试
回复

举报

authicon 夏夜星空浅唱 发表于 2012-5-2 15:07:53 | 显示全部楼层
look look look
回复

举报

authicon 封雪云天 发表于 2013-6-28 15:17:03 | 显示全部楼层
学习一下
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 06:57

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表