进度条 Google Chrome

• 下载演示 - 11.1 KB
• 下载源代码 - 17.5 KB

引言

本文演示了从头开始创建 Google Chrome 主题的 ProgressBar 控件。

背景

任何 ProgressBar 控件都依赖于一个值及其图形表示。Google Chrome 下载器对其进度进行圆形表示。

Using the Code

ChromeProgressBar 的设计方式与 Chrome 进度条的工作方式相同。它将进度值转换为圆形图形表示。

private void PaintProgress(PaintEventArgs e)
{
   using( SolidBrush progressBrush = new SolidBrush(this.ProgressColor))
   {
       Rectangle rect = LayoutInternal.ProgressRectangle;

       rect.Inflate(-2, -2);
       rect.Height -= 2; rect.Width -= 2;

       float startAngle = -90;
       float sweepAngle = Progress / 100 * 360;
       
       e.Graphics.FillPie(progressBrush, rect, startAngle, sweepAngle);
   }
}

以下是如何使用图形路径和四条线绘制圆和片段。Graphics 对象的剪切区域已调整为剪切超出圆的线条。

private void PaintBorder(PaintEventArgs e)
{
    GraphicsPath borderPath = new GraphicsPath();
    Rectangle progressRect = LayoutInternal.ProgressRectangle;
    borderPath.AddArc(progressRect, 0, 360);
    ....
    ....
    ....

    using (Pen borderPen = new Pen(this.BorderColor, 2))
    {
        e.Graphics.DrawPath(borderPen, borderPath);

        e.Graphics.DrawLine(borderPen,
            new Point(progressRect.Left + progressRect.Width / 2, progressRect.Top),
            new Point(progressRect.Left + progressRect.Width / 2, progressRect.Bottom));

        e.Graphics.DrawLine(borderPen,
            new Point(progressRect.Left, progressRect.Top + progressRect.Height / 2),
            new Point(progressRect.Right, progressRect.Top + progressRect.Height / 2));

        e.Graphics.DrawLine(borderPen,
             new Point(progressRect.Left ,progressRect.Top),
             new Point(progressRect.Right,progressRect.Bottom));

        e.Graphics.DrawLine(borderPen,
            new Point(progressRect.Left, progressRect.Bottom),
            new Point(progressRect.Right, progressRect.Top ));
    }

    e.Graphics.Clip = clip;
}

关注点

请查看 InternalLayout 类，了解控件如何布局单个项目。嵌套的 Internal Layout 类将 ChromeProgressBar 作为参数，并提供控件所需的所有必要布局信息，从而将绘制过程留给 ChromeProgressBar。

希望这能为您创建控件提供一个良好的开端。请留下您宝贵的意见和建议。