圆形按钮窗口控制-不断减少的圆圈

• 下载demo project and source - 83.4 KB

介绍 不久前，我试图找到一个不错的圆形按钮控件。我找不到一本，所以按照由来已久的传统，我决定自己写一本。我“几乎”完成了它，但由于各种原因，它被归入了“以后再看”的类别。在它独特的风格中，“later”终于出现了，并且装备了我闪亮的新Microsoft Visual c# 2005 Express Edition，我决定试着完成它。 虽然我自己说过，但我觉得这些扣子看起来不错——你得自己判断!它们“实际”看起来更好，而不是本文中的jpeg。 背景 在我寻找圆形按钮控件的过程中，我看到了几篇文章(包括伟大的Chris Maunder自己写的一篇)，对我和我小小的大脑来说，这些文章似乎包含了太多复杂的数学问题。另外，我一直在学习c#中的图形，并对groovy的一些东西进行了大量的试验，比如PathGradientBrush，从Bob Powell这个非常优秀的站点获得了很多灵感。可能是碰巧，我忘记了是怎么做到的，我偶然发现了一个想法，用线性渐变画笔和路径渐变画笔在不断减少的圆上叠加，来创建一个过得去的3-D按钮。以下图片说明了这一点: 悬停光标以获取描述。 它是如何工作的 实际上，把很多圆一个叠一个地放在另一个上面就是它的工作原理。该控件派生自Button类，并覆盖了OnPaint方法，所有绘图都在该方法中完成。我添加了一些新属性: RecessDepth -按钮被设置回包含表面的斜面高度的距离-按钮顶部的“外部”斜面深度的大小-“内部”斜面穹顶的大小-按钮是否有一个“圆角”顶部 通过使用适当的属性修饰它们，这些属性都被添加到属性面板的按钮外观类别中。另外，我为RecessDepth属性编写了一个自定义下拉UITypeEditor。我不会管理这个没有克里斯卖的优秀作品Windows窗体在c#编程,我高度推荐它,我不会试图解释UITypeEditor是如何工作的,因为它是覆盖样本在线这一章讨论了设计时IDE集成的各个方面(虽然我也做自己的实际的书!)。 注意:为了使ToolboxBitmap属性正常工作，我必须添加这个虚拟类，这也是Bob Powell在本文中建议的:ToolboxBitmap。 隐藏,复制Code

internal class resfinder
{
    // Trick from Bob Powell
}
.
.
.
.
[Description("Round (Elliptical) Button Control"),
    ToolboxBitmap(typeof(resfinder), "RoundButton.Images.RoundButton.bmp")]
    public class RoundButton : System.Windows.Forms.Button

值得注意的代码部分 这是overridden OnPaint方法。没什么特别令人兴奋的，但我把它包括进来作为参考。 隐藏,收缩,复制Code

protected override void OnPaint(PaintEventArgs e)
{
    buttonColor = this.BackColor;
    edgeColor1 = ControlPaint.Light(buttonColor);
    edgeColor2 = ControlPaint.Dark(buttonColor);

    Graphics g = e.Graphics;
    g.SmoothingMode = SmoothingMode.AntiAlias;

    Rectangle buttonRect = this.ClientRectangle;
    edgeWidth = GetEdgeWidth(buttonRect);

    FillBackground(g, buttonRect);

    if (RecessDepth > 0)
    {
        DrawRecess(ref g, ref buttonRect);
    }

    DrawEdges(g, ref buttonRect);

    ShrinkShape(ref g, ref buttonRect, edgeWidth);

    DrawButton(g, buttonRect);

    DrawText(g, buttonRect);

    SetClickableRegion();

}

接下来是DrawRecess方法，它创建按钮被设置到表单表面的错觉。混合对象允许你指定在矩形的哪一点，以及在多大程度上，两种颜色在线性渐变画笔混合。我通过反复试验得出了这些参数，直到我认为它们是正确的，所以它们纯粹是主观的。ControlPaint。黑暗和ControlPaint。光线在这里非常有用，因为它们创建了父背景颜色的浅阴影和深阴影。当然，这是假设我们想要创造的错觉是一个由坚实的彩色材料组成的形状，而不是一个仍然是灰色的，但被涂上了不同颜色的材料。如果这是您喜欢的，那么只需更改父级即可。背景色Color.FromKnownColor (KnownColor.Control)。 我发现这里有趣的事情是“使用第二个较小的矩形…”部分。我在BuildGraphicsPath方法中再次使用了相同的技术，尽管它创建了更平滑的曲线，但我不知道它是如何或为什么工作的。但是，我们中有多少人真正知道电视是如何工作的? 隐藏,复制Code

protected virtual void DrawRecess(ref Graphics g, ref Rectangle recessRect)
{

    LinearGradientBrush recessBrush = new LinearGradientBrush(recessRect,
                                      ControlPaint.Dark(Parent.BackColor),
                                      ControlPaint.LightLight(Parent.BackColor),
                                      GetLightAngle(Angle.Up));
    // Blend colours for realism
    Blend recessBlend = new Blend();
    recessBlend.Positions = new float[] {0.0f,.2f,.4f,.6f,.8f,1.0f};
    recessBlend.Factors = new float[] {.2f,.2f,.4f,.4f,1f,1f};
    recessBrush.Blend = recessBlend;

    // Using this second smaller rectangle
    // smooths the edges - don't know why...?
    Rectangle rect2 = recessRect;
    ShrinkShape(ref g, ref rect2, 1);
    FillShape(g, recessBrush, rect2);

    ShrinkShape(ref g, ref recessRect, recessDepth); //orig

}

您将注意到大量的ShrinkShape(ref g, ref edgeRect, 1);源代码中的语句。这就是创造“不断递减的圆”的方法。我使用了一个ref参数，这样问题中的矩形就会变得越来越小。 为了绘制穹顶，我只需要在DrawButton方法中使用这段代码。cColor的默认值是白色，因此如果我们想要一个圆顶顶部，我们将CenterColor设置为白色，并根据按钮的大小计算一个中心点。 隐藏,复制Code

pgb.CenterColor = buttonColor;

if (dome)
{
    pgb.CenterColor = cColor;
    pgb.CenterPoint =
        new PointF(buttonRect.X + buttonRect.Width / 8 + buttonPressOffset,
                   buttonRect.Y + buttonRect.Height / 8 + buttonPressOffset);
}

FillShape(g, pgb, buttonRect);

在按钮上绘制文本使用DrawText方法完成，如下所示。它使用从基按钮类继承的字体和前面板属性。如果按钮的高度超过其宽度的两倍，我使用我的VerticalString类来编写垂直文本。VerticalString是前面一篇CodeProject文章的主题，为了完整起见，我在项目下载中包含了源代码。我还必须确保在可能的情况下，按钮文本保持在按钮的范围内。作为这个过程的一部分，我必须转换文本fr的对齐方式om内容对齐到字符串对齐。最后，我检查按钮是否被禁用，如果是，我“灰色”文本。 隐藏,收缩,复制Code

protected void DrawText(Graphics g, Rectangle textRect)
{
    labelStrFmt = new StringFormat();
    labelBrush = new SolidBrush(this.ForeColor);
    labelFont = this.Font;    // Get the caller-specified font

    vs = new VerticalString();
    vs.TextSpread = .75;

    // Check for tall button, and write text vertically if necessary
    bool verticalText = false;
    if (textRect.Height > textRect.Width * 2)
    {
        verticalText = true;
    }

    // Convert the text alignment from
    // ContentAlignment to StringAlignment
    labelStrFmt.Alignment = ConvertToHorAlign(this.TextAlign);
    labelStrFmt.LineAlignment = ConvertToVertAlign(this.TextAlign);

    // If horizontal text is not horizontally centred,
    // or vertical text is not vertically centred,
    // shrink the rectangle so that the text doesn't stray outside the ellipse
    if ((!verticalText & (labelStrFmt.LineAlignment != StringAlignment.Center)) |
        (verticalText & (labelStrFmt.Alignment != StringAlignment.Center)))
    {
        textRect.Inflate(-(int)(textRect.Width/7.5), 
                         -(int)(textRect.Height/7.5));
    }

    textRect.Offset(buttonPressOffset, buttonPressOffset);
    // Apply the offset if we've been clicked

    // If button is not enabled, "grey out" the text.
    if (!this.Enabled)
    {
        //Write the white "embossing effect" text at an offset
        textRect.Offset(1, 1);
        labelBrush.Color = ControlPaint.LightLight(buttonColor);
        WriteString(verticalText, g, textRect);

        //Restore original text pos, and set text colour to grey.
        textRect.Offset(-1, -1);
        labelBrush.Color = Color.Gray;
    }

    //Write the text
    WriteString(verticalText, g, textRect);
}

按钮被按下的错觉是通过下面两个小方法实现的。当用户按下按钮时，buttonPressOffset变量被设置为1，并且虚拟光的角度被改变，使按钮的左上方变暗，右下方变亮，从而产生按钮已经退隐到表单表面的印象。当按钮被释放时，值恢复正常。 隐藏,复制Code

protected void buttonDown()
{
    lightAngle = Angle.Down;
    buttonPressOffset = 1;
    this.Invalidate();
}

protected void buttonUp()
{
    lightAngle = Angle.Up;
    buttonPressOffset = 0;
    this.Invalidate();
}

最后，几点… 圆形按钮控件只支持FlatStyle.Standard。我为FlatStyle编写了一些代码。平,FlatStyle。弹窗，它工作得很好，但我对代码和结果都不是很满意，所以我把它拿掉了。 如果你看一下源代码，你可能会注意到一个叫做Overrideable shape-specific methods的区域，其中包含了一些乏味的方法，比如: 隐藏,复制Code

protected virtual void AddShape(GraphicsPath gpath, Rectangle rect)
{
    gpath.AddEllipse(rect);
}


protected virtual void DrawShape(Graphics g, Pen pen, Rectangle rect)
{
    g.DrawEllipse(pen, rect);
}

为什么不直接调用AddEllipse，而不是AddShape?我还编写了其他一些类，比如TriangleButton和DiamondButton，它们显然没有使用AddEllipse或任何与椭圆有关的东西，所以我希望能够在代码中覆盖其他形状的方法。我没有在这里包括其他形状，部分原因是我认为一些代码有点混乱，需要更多的修改，而不是我现在所能做的，而且坦白地说，它们看起来不如圆形的好! 要在另一个项目中使用按钮，只需添加对RoundButton的引用。，并且圆形按钮图标应该出现在工具箱中。(你可能需要使用工具->选择工具箱项手动添加。) 这就是本文的结尾。我希望你觉得它有趣，喜欢的按钮! 本文转载于：http://www.diyabc.com/frontweb/news689.html