CODEWITHSUNDEEP
xamlprogress-barxamarin.forms
Mubasher Ikram
Mubasher Ikram

Reputation: 1

Xamarin forms 3 color progress bar

In a Xamarin form, I want to show three color progress bar about three numbers to show on progress bar:

I want it to look like this:

Image showing progress bar with each categories

Can someone help me? Thanks in advance.

Upvotes: 0

Views: 1543

Answers (2)

uday augustin
uday augustin

Reputation: 101

You can use my nugget package to implement this multi color progress bar. https://www.nuget.org/packages/MultiColor.ProgressBar/

Documentation: https://github.com/udayaugustin/ProgressBar/blob/master/README.md

You can just supply only one BarSegment to the list and create the view like your design.

Upvotes: 0

Artem Zelinskiy
Artem Zelinskiy

Reputation: 2210

I prefer use Ncontrol for all such custom controls. It is crossplatform, so you will not need any renderers

1) Install NControll to PCL and your platform projects

2) Subclass NControlView

3) Override Draw method

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);

  }
}

Upvotes: 1

Related Questions