科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件利用.NET绘图技术制作水晶按钮控件

利用.NET绘图技术制作水晶按钮控件

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

UI编程在整个项目开发过程中是个颇为重要的环节,任何好的解决方案若没有良好的用户界面呈现给最终用户,那么就算包含了最先进的技术也不能算是好程序

作者:窦瑞欣 来源:天极开发 2007年11月11日

关键字:

  • 评论
  • 分享微博
  • 分享邮件
二、 实现

  我们利用C# 来制作水晶按钮控件。

  首先启动Visual Studio 2005,新建空白解决方案,我们取名为:TestCrystalButton,然后在项目导航栏上右击鼠标添加新项目,为此解决方案添加新的C# Windows 控件库,取名为MyControls。IDE会创建一个继承于UserControl名为UserControl1的类,修改代码使其继承自Button,并将原文件中所有引用UserControl1名称的地方都更改为CrystalButton,在项目导航栏中把UserControl1.cs更名为CrystalButton.cs,如下面一段代码:

namespace MyControls
{
 public partial class CrystalButton: Button
 {
  public CrystalButton ()
  {
   InitializeComponent();
  }
 }
}

  然后将InitializeComponent()方法中的
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;

语句注释掉,因为从Button控件不可能有自动缩放功能,它必须依赖于其父控件。在源文件头部添加对System.Drawing.Imaging和System.Drawing.Drawing2D程序集的引用。首先需要创建一个枚举类型MouseActionType,当按钮需要绘制时会根据当前鼠标的位置进行不同状态的绘制,如下面一段代码:

......
private enum MouseActionType
{
 None,
 Hover,
 Click
}
private MouseActionType mouseAction;

  控件会捕获OnMouseDown、OnMouseUp、OnMouseHover、OnMouseEnter和OnMouseLeave事件并将mouseAction变量设置为不同的枚举值,以便在OnPaint事件发生时根据mouseAction变量进行不同状态的绘制。

  控件的OnPaint事件是整个项目中最重要的代码段,它按照按钮组成的三部分分别进行绘制,最后将按钮的文本也同样绘制到按钮表面,所有操作都使用了二级缓存绘图技术,代码如下:

protected override void OnPaint(PaintEventArgs e)
{
 Graphics g = e.Graphics;
 g.Clear(SystemColors.ButtonFace );
 Color clr = this.BackColor;
 int shadowOffset = 8;
 int btnOffset = 0;
 switch (mouseAction)
 {
  case MouseActionType.Click:
   shadowOffset = 4;
   clr = Color.LightGray;
   btnOffset = 2;
   break;
  case MouseActionType.Hover:
   clr = Color.LightGray;
   break;
 }
 g.SmoothingMode = SmoothingMode.AntiAlias;
 // 创建按钮本身的图形
 Rectangle rc = new Rectangle(btnOffset, btnOffset, this.ClientSize.Width - 8 - btnOffset, this.ClientSize.Height - 8 - btnOffset);
 GraphicsPath path1 = this.GetGraphicsPath(rc, 20);
 LinearGradientBrush br1 = new LinearGradientBrush(new Point(0, 0), new Point(0, rc.Height + 6), clr, Color.White);
 // 创建按钮阴影
 Rectangle rc2 = rc;
 rc2.Offset(shadowOffset, shadowOffset);
 GraphicsPath path2 = this.GetGraphicsPath(rc2, 20);
 PathGradientBrush br2 = new PathGradientBrush(path2);
 br2.CenterColor = Color.Black;
 br2.SurroundColors = new Color[] {SystemColors.ButtonFace};
 //为了更逼真,我们将渐变结束颜色设定为窗体前景颜色,可以根据窗口的前景颜色适当调整
 //创建按钮顶部白色渐变
 Rectangle rc3 = rc;
 rc3.Inflate(-5, -5);
 rc3.Height = 15;
 GraphicsPath path3 = GetGraphicsPath(rc3, 20);
 LinearGradientBrush br3 = new LinearGradientBrush(rc3, Color.FromArgb(255, Color.White), Color.FromArgb(0, Color.White), LinearGradientMode.Vertical);
 // 绘制图形
 g.FillPath(br2, path2); //绘制阴影
 g.FillPath(br1, path1); //绘制按钮
 g.FillPath(br3, path3); //绘制顶部白色泡泡
 //设定内存位图对象,进行二级缓存绘图操作
 buttonBitmapRectangle = new Rectangle(rc.Location, rc.Size);
 buttonBitmap = new Bitmap(buttonBitmapRectangle.Width, buttonBitmapRectangle.Height);
 Graphics g_bmp = Graphics.FromImage(buttonBitmap);
 g_bmp.SmoothingMode = SmoothingMode.AntiAlias;
 g_bmp.FillPath(br1, path1);
 g_bmp.FillPath(br3, path3);
 //将region赋值给button
 Region rgn = new Region(path1);
 rgn.Union(path2);
 this.Region = rgn;
 // 绘制按钮的文本
 GraphicsPath path4 = new GraphicsPath();
 RectangleF path1bounds = path1.GetBounds();
 Rectangle rcText = new Rectangle((int)path1bounds.X + btnOffset, (int)path1bounds.Y + btnOffset, (int)path1bounds.Width, (int)path1bounds.Height);
 StringFormat strformat = new StringFormat();
 strformat.Alignment = StringAlignment.Center;
 strformat.LineAlignment = StringAlignment.Center;
 path4.AddString(this.Text, this.Font.FontFamily, (int)this.Font.Style, this.Font.Size, rcText, strformat);
 Pen txtPen = new Pen(this.ForeColor , 1);
 g.DrawPath(txtPen, path4);
 g_bmp.DrawPath(txtPen, path4);
}

  控件制作完毕,编译该解决方案及控件项目生成CrystalButton.dll,您可以在当前解决方案中添加使用该控件的Windows窗体程序项目,也可以在任意解决方案中添加对该控件的引用,简单到只需从工具箱中把CrystalButton拖拽到窗体上。

  三、 总结

  .Net 框架的GDI+增强型的图形图像绘制技术为我们提供了强大的图形图像绘制能力,它所包含的丰富的类和方法为我们实现完全自定义控件外观提供了有力保证,不但简化了程序代码还大大节省了编程时间。

  该示例控件和程序在Visual Studio 2005 Team Suite、Windows XP SP2下编译运行通过。

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章