又是一个远景风格的命令链接

下载source code - 43.89 KB 下载latest version

介绍

有很多很棒的远景风格的控件是用。net编写的。这又是一个命令链接按钮。我喜欢从零开始创建自定义控件，而不是依赖于操作系统的绘图库。因此，我们的CommandLink完全是用c#代码绘制的，这使得它与旧版本的Windows兼容。

CommandLink的目标

当我开始编写控件时，我决定需要一个具有vista风格的CommandLink，但它确实复制了默认的命令链接。所以，我写了一个简单的目标清单，列出了需要包括的元素:

在同一个按钮中有两个不同的字体大小。，用于标题文本和描述文本。左边的图像/图标，与Vista的命令链接不同，它可以垂直于顶部、中间或底部。一个混合的平面外观为默认和渐变外观为鼠标悬停。表现得像个按钮。

圆角矩形

在绘制实际控件之前，首先，我们需要一个函数来绘制圆角矩形。由于按钮将需要轮廓和填充圆形矩形，它是最容易编写一个函数返回一个GraphicsPath:

隐藏,复制Codeprivate static GraphicsPath RoundedRect(int width, int height, int radius)
{
RectangleF baseRect = new RectangleF(0, 0, width, height);
float diameter = radius * 2.0f;
SizeF sizeF = new SizeF(diameter, diameter);
RectangleF arc = new RectangleF(baseRect.Location, sizeF);
GraphicsPath path = new GraphicsPath();

  // top left arc
  path.AddArc(arc,  180, 90);
  // top right arc 
  arc.X =  baseRect.Right - diameter;
  path.AddArc(arc,  270, 90);
  // bottom right  arc 
  arc.Y =  baseRect.Bottom - diameter;
  path.AddArc(arc,  0, 90);
  // bottom left arc
  arc.X =  baseRect.Left;
  path.AddArc(arc,  90, 90);

  path.CloseFigure();
  return path;

}

绘画元素

那么，让我们分解一下CommandLink的可视元素。只有两种复杂的状态是悬停状态和向下状态。

徘徊

使按钮弹出的部分是一个简单的白色渐变，它是按钮高度的四分之三。由于LinearGradientBrush的工作方式，有时如果梯度绘制区域太高1像素，梯度将重新开始，使一条难看的白线出现在控件中间。为了解决这个问题，我们在声明LinearGradientBrush之后添加以下代码:

隐藏,复制CodeWrapMode.TileFlipX

接下来是大纲。它是由上述函数生成的一个半径为3的圆角矩形。颜色可以是SystemColors。颜色深一点，或者你喜欢固定的颜色，(189,189,189)很好。

然后，我们需要一个内部轮廓。这将是2的半径，并定位在坐标(1,1)。颜色是一个稍微透明的白色，alpha值为245。

我们把它们按顺序画在一起，就得到了这样的东西:

下来

这次的背景是固态的，同样，也可以是系统颜色(控制光)，或者(234,234,234)，如果你更喜欢固定颜色的话。

轮廓和之前一样，只是颜色变深了，(167,167,167)。

最后，内轮廓也只会改变颜色为深色(以产生阴影效果)。

最终down状态:

突出

用户应该能够知道什么时候CommandLink被选中，即使它是用Tab完成的。为了突出显示选中的CommandLink，我们只使用颜色(192,233,243)绘制一个内部轮廓，它是浅蓝色。

前景-图像和文本

对于按钮的任何状态，前景元素都是相同的。实际上，绘制文本和图像并没有什么特殊之处。描述文本总是比标题文本小三个大小。字体可以更改，但默认是Tahoma。要将标题和描述文本的大小组合居中，请使用:

隐藏,复制CodeSizeF headerLayout = g.MeasureString(headerText, this.Font);
SizeF descriptLayout = g.MeasureString(descriptionText, descriptFont);

//Merge the two sizes into one big rectangle
Rectangle totalRect = new Rectangle(0, 0,
(int)Math.Max(headerLayout.Width,
descriptLayout.Width),
(int)(headerLayout.Height +
descriptLayout.Height) - 4);

此外，如果禁用控件，这部分控件将会更改。文本只需要改变颜色。但是，如果还没有完成，就需要将图像转换为灰度。

活动覆盖

有几个事件，需要被覆盖，以获得命令链接行为像我们想要:

OnPaint -处理所有绘图方法;根据CommandLink的状态，它执行适当的绘图例程。由于用户控件没有继承Button类，如果我们想要能够指定一个对话框，行为需要在这里手动处理。如果CommandLink被选项卡选中，用户点击Enter，然后执行PerformClick。OnGotFocus/OnLostFocus -刷新控件以绘制/删除淡蓝色高亮部分。所有的OnMouse事件只是改变一个变量来反映CommandLink的当前状态，并使控件重新绘制自己。OnEnabledChanged——设置正确的状态并重新绘制CommandLink。(注意，不幸的是，此事件在设计时没有调用，但在运行时可以正常工作。)

结论和改进

最后，我们得到了一个控件，它具有按钮的基本功能，但外观是一个vista风格的CommandLink。该实现是为了兼容旧版本的Windows，所以可以做一些可选的改进。例如，它不支持像Vista控件那样的渐变，而且目前，图像必须在左侧。

本文转载于：http://www.diyabc.com/frontweb/news773.html