Xamarin 形成 3 色进度条答案

【问题标题】：Xamarin forms 3 color progress barXamarin 形成 3 色进度条
【发布时间】：2020-02-24 09:59:36
【问题描述】：

在 Xamarin 表单中，我想在进度条上显示三个数字的三色进度条：

可用问题数
通过的问题数
失败的问题数

我希望它看起来像这样：

Image showing progress bar with each categories

有人可以帮助我吗？提前致谢。

【问题讨论】：

我在你的图片上看到三个相同颜色的进度条，请澄清你的问题
@Greensy 这是三个不同的进度条。我需要一个包含三个不同部分的进度条。像总问题失败的问题通过的问题我想要一个进度条上的所有这些数据如果还不清楚请告诉我

标签： xaml progress-bar xamarin.forms

【解决方案1】：

对于所有此类自定义控件，我更喜欢使用Ncontrol。它是跨平台的，因此您不需要任何渲染器

1) 将 NControll 安装到 PCL 和您的平台项目

2) 子类 NControlView

3) 覆盖 Draw 方法

public class MyControl: NControlView
{
  private int _sectionOneValue = 0;
  private int _sectionTwoValue = 0;
  private int _sectionThreeValue = 0;

  public void SetSectionValues(int one, int two, int three){
      _sectionOneValue = one;
      _sectionTwoValue = two;
      _sectionThreeValue =three;
      Invalidate();
  }

  public override void Draw(NGraphics.ICanvas canvas, NGraphics.Rect rect)
  {
     var sum = _sectionOneValue+_sectionTwoValue+_sectionThreeValue
     if(sum == 0)
         return;

     var wOne = (rect.Width*_sectionOneValue)/sum;
     var wTwo = (rect.Width*_sectionTwoValue)/sum;
     var wThree = (rect.Width*_sectionThreeValue)/sum;


     canvas.FillRectangle (new Rect (0, 0, wOne, rect.Height ), NGraphics.Colors.Red);
     canvas.FillRectangle (new Rect (wOne, 0, wTwo, rect.Height ), NGraphics.Colors.Blue);
     canvas.FillRectangle (new Rect (wOne+wTwo, 0, wThree, rect.Height ), NGraphics.Colors.Green);

  }
}

【讨论】：

【解决方案2】：

您可以使用我的 nugget 包来实现这个多色进度条。 https://www.nuget.org/packages/MultiColor.ProgressBar/

文档： https://github.com/udayaugustin/ProgressBar/blob/master/README.md

您可以只向列表提供一个 BarSegment 并创建类似于您的设计的视图。

【讨论】：