zoukankan      html  css  js  c++  java
  • Winforms平台界面开发技巧分享:如何使用渐变绘制进度条

    下载DevExpress v19.2完整版 

    DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅、美观且易于使用的应用程序。

    问题:

    开发人员想要使用带有3中颜色的渐变来显示进度条,即开始、中间和末尾有3中不同的颜色,但目前只能使用property.startcolor和property.endcolor对两种颜色实现,没有可用的middlecolor属性。是否有办法或者可以使用那些控件来实现如下图所示的效果:

    DevExpress Winforms使用技巧教程
    解决办法:

    如果要绘制一些文本,则必须在进度行下为其留出空间。 由于进度线始终占据整个空间,因此您需要更新所有必需矩形的高度。相关代码示例如下:

    private void progressBarControl1_Paint(object sender, PaintEventArgs e) {
    ProgressBarViewInfo vi = (ProgressBarViewInfo)this.progressBarControl1.GetViewInfo();
    Padding bt = CalcBorderThickness(vi);
    int progressHeight = 22;
    int textIndent = 2;
    vi.ProgressInfo.Bounds = UpdateHeight(vi.ProgressInfo.Bounds, progressHeight);
    vi.ProgressInfo.EmptyBounds = UpdateHeight(vi.ProgressInfo.EmptyBounds, progressHeight);
    vi.ProgressInfo.EmptyBounds2 = UpdateHeight(vi.ProgressInfo.EmptyBounds2, progressHeight);
    vi.ProgressInfo.ProgressBounds = UpdateHeight(vi.ProgressInfo.ProgressBounds, progressHeight);
    Rectangle all = vi.ProgressInfo.Bounds;
    Rectangle filled = vi.ProgressInfo.ProgressBounds;
    Rectangle part1 = new Rectangle(filled.X, filled.Y, filled.Width / 2 + 1, filled.Height);
    Rectangle part2 = new Rectangle(part1.Right, filled.Y, filled.Right - part1.Right, filled.Height);
    using (GraphicsCache cache = new GraphicsCache(e.Graphics)) {
    cache.Graphics.Clear(this.progressBarControl1.Parent.BackColor);
    Rectangle borderBounds = vi.ProgressInfo.Bounds;
    borderBounds.Inflate(bt.Left, bt.Top);
    vi.ProgressInfo.Cache = cache;
    vi.BorderPainter.DrawObject(new ObjectInfoArgs() { Bounds = borderBounds, Cache = cache });
    cache.FillRectangle(cache.GetGradientBrush(part1, Color.Red, Color.Yellow, LinearGradientMode.Horizontal), part1);
    cache.FillRectangle(cache.GetGradientBrush(part2, Color.Yellow, Color.Green, LinearGradientMode.Horizontal), part2);
    Size textSize = vi.ProgressAppearance.CalcTextSize(cache, vi.DisplayText, -1).ToSize();
    int linePos = part2.Right >= all.Right - 1? all.Right -1: part2.Right;
    cache.DrawLine(cache.GetPen(Color.Black), new Point(linePos, part2.Top), new Point(linePos, part2.Bottom + textSize.Height + textIndent));
    Rectangle textRect = new Rectangle(new Point(linePos + textIndent, part2.Bottom + textIndent), textSize);
    if (textRect.Right > all.Right)
    textRect.X -= textRect.Width + textIndent * 2;
    vi.ProgressAppearance.DrawString(cache, vi.DisplayText, textRect);
    }
    }
    private Padding CalcBorderThickness(ProgressBarViewInfo vi) {
    SkinProgressBarObjectPainter p = new SkinProgressBarObjectPainter(vi.LookAndFeel);
    ProgressBarObjectInfoArgs e = new ProgressBarObjectInfoArgs(vi.Appearance);
    Rectangle client = new Rectangle(0, 0, 100, 100);
    Rectangle r = vi.BorderPainter.CalcBoundsByClientRectangle(vi.ProgressInfo, client);
    Padding res = new Padding(client.X - r.X, client.Y - r. Y, r.Right - client.Right, r.Bottom - client.Bottom);
    return res;
    }
    private Rectangle UpdateHeight(Rectangle bounds, int height) {
    bounds.Height = height;
    return bounds;
    }

    ProgressBarControl控件不支持此功能,为了实现您的目标,建议使用ProgressBarControl.Paint事件并编写代码来绘制渐变进度条,示例如下:

    private void progressBarControl1_Paint(object sender, PaintEventArgs e) {
    ProgressBarViewInfo vi = (ProgressBarViewInfo)this.progressBarControl1.GetViewInfo();
    Padding bt = CalcBorderThickness(vi);
    int progressHeight = 22;
    int textIndent = 2;
    vi.ProgressInfo.Bounds = UpdateHeight(vi.ProgressInfo.Bounds, progressHeight);
    vi.ProgressInfo.EmptyBounds = UpdateHeight(vi.ProgressInfo.EmptyBounds, progressHeight);
    vi.ProgressInfo.EmptyBounds2 = UpdateHeight(vi.ProgressInfo.EmptyBounds2, progressHeight);
    vi.ProgressInfo.ProgressBounds = UpdateHeight(vi.ProgressInfo.ProgressBounds, progressHeight);
    Rectangle all = vi.ProgressInfo.Bounds;
    Rectangle filled = vi.ProgressInfo.ProgressBounds;
    Rectangle part1 = new Rectangle(filled.X, filled.Y, filled.Width / 2 + 1, filled.Height);
    Rectangle part2 = new Rectangle(part1.Right, filled.Y, filled.Right - part1.Right, filled.Height);
    using (GraphicsCache cache = new GraphicsCache(e.Graphics)) {
    cache.Graphics.Clear(this.progressBarControl1.Parent.BackColor);
    Rectangle borderBounds = vi.ProgressInfo.Bounds;
    borderBounds.Inflate(bt.Left, bt.Top);
    vi.ProgressInfo.Cache = cache;
    vi.BorderPainter.DrawObject(new ObjectInfoArgs() { Bounds = borderBounds, Cache = cache });
    cache.FillRectangle(cache.GetGradientBrush(part1, Color.Red, Color.Yellow, LinearGradientMode.Horizontal), part1);
    cache.FillRectangle(cache.GetGradientBrush(part2, Color.Yellow, Color.Green, LinearGradientMode.Horizontal), part2);
    Size textSize = vi.ProgressAppearance.CalcTextSize(cache, vi.DisplayText, -1).ToSize();
    int linePos = part2.Right >= all.Right - 1? all.Right -1: part2.Right;
    cache.DrawLine(cache.GetPen(Color.Black), new Point(linePos, part2.Top), new Point(linePos, part2.Bottom + textSize.Height + textIndent));
    Rectangle textRect = new Rectangle(new Point(linePos + textIndent, part2.Bottom + textIndent), textSize);
    if (textRect.Right > all.Right)
    textRect.X -= textRect.Width + textIndent * 2;
    vi.ProgressAppearance.DrawString(cache, vi.DisplayText, textRect);
    }
    }
    private Padding CalcBorderThickness(ProgressBarViewInfo vi) {
    SkinProgressBarObjectPainter p = new SkinProgressBarObjectPainter(vi.LookAndFeel);
    ProgressBarObjectInfoArgs e = new ProgressBarObjectInfoArgs(vi.Appearance);
    Rectangle client = new Rectangle(0, 0, 100, 100);
    Rectangle r = vi.BorderPainter.CalcBoundsByClientRectangle(vi.ProgressInfo, client);
    Padding res = new Padding(client.X - r.X, client.Y - r. Y, r.Right - client.Right, r.Bottom - client.Bottom);
    return res;
    }
    private Rectangle UpdateHeight(Rectangle bounds, int height) {
    bounds.Height = height;
    return bounds;
    }

    DevExpress Dashboard控件实操公开课4月即将开启,专家名师在线直播,免费听课名额先到先得~

    DevExpress技术交流群:540330292      欢迎一起进群讨论

    扫描关注DevExpress中文网微信公众号,及时获取最新动态及最新资讯

    DevExpress中文网微信
  • 相关阅读:
    第三周学习进度
    四则运算之结对开发
    第二周学习进度
    单元测试
    构建之法阅读笔记03
    本周学习进度
    四则运算三
    构建之法阅读笔记02
    本周学习进度
    按照Right-BICEP要求设计的测试用例
  • 原文地址:https://www.cnblogs.com/AABBbaby/p/12759016.html
Copyright © 2011-2022 走看看