C#中Vista风格的进度条

 

[简介]
本文介绍在.net framework下，如果做一个Vista风格进度条的用户控件。该文使用的技术是GDI+。


[理解]
在做这个用户控件之前，最好的办法就是先在photoshop中，分层绘制出进度条。
然后，按照在photoshop中的步骤，通过程序把它实现出来就可以了。

[photoshop]
在photoshop中绘制的步骤如下：

1. 背景图


2. 背景图阴影


3. 进度条


4. 带阴影的进度条


5. 完整的进度条


[GDI+实现]

在GDI+实现的时候，只是按照photoshop中的步骤，一步一步地绘制就可以了。

0. 整个控件的绘制方法

private void ProgressBar_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
    e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
    DrawBackground(e.Graphics);
    DrawBackgroundShadows(e.Graphics);
    DrawBar(e.Graphics);
    DrawBarShadows(e.Graphics);
    DrawHighlight(e.Graphics);
    DrawInnerStroke(e.Graphics);
    DrawGlow(e.Graphics);
    DrawOuterStroke(e.Graphics);
}

 

开头两行，是为了使用高质量绘图，后面的是绘制各层图象。


1. 绘制背景图

private void DrawBackground(Graphics g)
{
    Rectangle r = this.ClientRectangle; r.Width--; r.Height--;
    GraphicsPath rr = RoundRect(r, 2, 2, 2, 2);
    g.FillPath(new SolidBrush(this.BackgroundColor), rr);
}

 

上面的函数中，唯一特殊的就是RoundRect 方法，它绘制圆角的一个矩形框。

2. 背景图阴影

 

 

private void DrawBackgroundShadows(Graphics g)
{
    Rectangle lr = new Rectangle(2, 2, 10, this.Height - 5);
    LinearGradientBrush lg = new LinearGradientBrush
                             (lr, Color.FromArgb(30, 0, 0, 0),
                             Color.Transparent,
                             LinearGradientMode.Horizontal);
    lr.X--;
    g.FillRectangle(lg, lr);

    Rectangle rr = new Rectangle(this.Width - 12, 2, 10, this.Height - 5);
    LinearGradientBrush rg = new LinearGradientBrush(rr, Color.Transparent,
                             Color.FromArgb(20, 0, 0, 0),
                             LinearGradientMode.Horizontal);
    g.FillRectangle(rg, rr);
}

 

上面的方法绘制两个10点宽的矩形框，并渐变色填充。

3. 进度条

 

 

private void DrawBar(Graphics g)
{
    Rectangle r = new Rectangle(1, 2, this.Width - 3, this.Height - 3);
    r.Width = (int)(Value * 1.0F / (MaxValue - MinValue) * this.Width);
    g.FillRectangle(new SolidBrush(GetIntermediateColor()), r);
}

 

这里的代码很象绘制背景图一样。其中的GetIntermediateColor()函数，根据当前比例Value

4. 带阴影的进度条

 

private void DrawBarShadows(Graphics g)
{
    Rectangle lr = new Rectangle(1, 2, 15, this.Height - 3);
    LinearGradientBrush lg = new LinearGradientBrush
                        (lr, Color.White, Color.White,
                             LinearGradientMode.Horizontal);

    ColorBlend lc = new ColorBlend(3);
    lc.Colors = new Color[] 
    {Color.Transparent, Color.FromArgb(40, 0, 0, 0), Color.Transparent};
    lc.Positions = new float[] {0.0F, 0.2F, 1.0F};
    lg.InterpolationColors = lc;

    lr.X--;
    g.FillRectangle(lg, lr);

    Rectangle rr = new Rectangle(this.Width - 3, 2, 15, this.Height - 3);
    rr.X = (int)(Value * 1.0F / (MaxValue - MinValue) * this.Width) - 14;
    LinearGradientBrush rg = 
        new LinearGradientBrush(rr, Color.Black,Color.Black,
                             LinearGradientMode.Horizontal);

    ColorBlend rc = new ColorBlend(3);
    rc.Colors = new Color[] 
    {Color.Transparent, Color.FromArgb(40, 0, 0, 0), Color.Transparent};
    rc.Positions = new float[] {0.0F, 0.8F, 1.0F};
    rg.InterpolationColors = rc;

    g.FillRectangle(rg, rr);
}

上面这段代码也是和绘制背景图的阴影的原理类似，只不过使用了不同的渐变色。

5. 绘制高亮区

private void DrawHighlight(Graphics g)
{
    Rectangle tr = new Rectangle(1, 1, this.Width - 1, 6);
    GraphicsPath tp = RoundRect(tr, 2, 2, 0, 0);

    g.SetClip(tp);
    LinearGradientBrush tg = new LinearGradientBrush(tr, Color.White,
                             Color.FromArgb(128, Color.White),
                             LinearGradientMode.Vertical);
    g.FillPath(tg, tp);
    g.ResetClip();

    Rectangle br = new Rectangle(1, this.Height - 8, this.Width - 1, 6);
    GraphicsPath bp = RoundRect(br, 0, 0, 2, 2);

    g.SetClip(bp);
    LinearGradientBrush bg = new LinearGradientBrush(br, Color.Transparent,
                             Color.FromArgb(100, this.HighlightColor),
                             LinearGradientMode.Vertical);
    g.FillPath(bg, bp);
    g.ResetClip();
}

它的主要目的是在进度条的上端，给出一些透明区域。

6. 绘制边框内外效果

private void DrawInnerStroke(Graphics g)
{
    Rectangle r = this.ClientRectangle;
    r.X++; r.Y++; r.Width-=3; r.Height-=3;
    GraphicsPath rr = RoundRect(r, 2, 2, 2, 2);
    g.DrawPath(new Pen(Color.FromArgb(100, Color.White)), rr);
}
private void DrawOuterStroke(Graphics g)
{
    Rectangle r = this.ClientRectangle; r.Width--; r.Height--;
    GraphicsPath rr = RoundRect(r, 2, 2, 2, 2);
    g.DrawPath(new Pen(Color.FromArgb(178, 178, 178)), rr);
}

[代码使用]
把ProgressBar.cs文件拷贝到你的工程中，并且编译它，在toolbar上就会多出一个ProgressBar用户控件。

设置其属性也非常简单，当Value值等于MinValue时，进度条的采用StartColor颜色，当Value值等于MaxValue时，进度条的采用EndColor 颜色；否则采用渐变。

等等其它几个简单属性设置，调试一下就了解了。

[原文位置]
xasthom写的Vista Style Progress Bar in C#