Xamarinで完全性メーター（ステータス表示）を作成する

Question

以下の画像のように、プロセスの現在のステータスを表示するコントロールを設計しようとしています。

そこで、我々は、マイルストーンや、チェックポイント用着色セクションで、ステータスの円形ディスプレイを持っています。画像では、すでに最初の2つの段階を経ており、3番目の段階は70％完了しています。

Jqueryにはかなり類似しているコントロールがあります。しかし、Xamarin Formsにサードパーティーのコントロールがあれば、私はそれを使うことはできません。サードパーティのコントロールがない場合、どのように設計を進めるべきですか？

異なるステージの画像を作成して表示するだけでいいですか？または、私は2つの値、 "マイルストーン"と "percentage_complete"を取ることができるカスタムコントロールを作成し、その時に円グラフを設計する必要がありますか？

Answer 1

。

注：SkiaSharpとその他​​のネイティブ2D/3Dライブラリは素晴らしいですが、アプリに多くのオーバーヘッドを追加し、すべての機能を必要としない場合は、膨大な（アプリケーションサイズ、メモリ使用量、初期化時間など） ..）それは価値がない（IMHO）。

再：私はあなたに描く弧の基本を表示するためにやったMultiSegmentProgressControlをストリップダウンhttps://github.com/praeclarum/NGraphics

。私がしたフルバージョンでは、複数のセグメントを追加してアニメートすることができ、パーセンテージを表示したり、接触時にセグメントを区切ったりすることができます。

NControlを使用すると、タッチ要素でコンポジットコントロールを作成できます。あなたがそれを取る必要があるところまで。

再：https://github.com/chrfalch/NControl

public class MultiSegmentProgressControl2 : NControlView 
{ 
    double ringWidth = 50; 
    double ringInnerWidth = 100; 
    SolidBrush redBush = new SolidBrush(Colors.Red); 
    RadialGradientBrush redSegmentBrush = new RadialGradientBrush(
      new Point(0.5, 0.5), 
      new Size(.75, .75), 
      Colors.LightGray, 
      Colors.Red); 
    SolidBrush blueBush = new SolidBrush(Colors.Blue); 
    RadialGradientBrush blueSegmentBrush = new RadialGradientBrush(
      new Point(0.5, 0.5), 
      new Size(.75, .75), 
      Colors.LightGray, 
      Colors.Green); 

    Tuple<double, double> _redSegment; 
    public Tuple<double, double> RedSegment { get { return _redSegment; } set { _redSegment = value; Invalidate(); } } 
    Tuple<double, double> _greenSegment; 
    public Tuple<double, double> GreenSegment { get { return _greenSegment; } set { _greenSegment = value; Invalidate(); } } 

    public override void Draw(ICanvas canvas, Rect rect) 
    { 
     canvas.FillEllipse(rect.TopLeft, rect.Size, Colors.Gray); 
     var n = rect; 
     n.X += ringWidth; 
     n.Y = n.X; 
     n.Width -= ringWidth * 2; 
     n.Height = n.Width; 
     var i = n; 
     canvas.FillEllipse(n.TopLeft, n.Size, Colors.LightGray); 
     n.X += ringInnerWidth; 
     n.Y = n.X; 
     n.Width -= ringInnerWidth * 2; 
     n.Height = n.Width; 
     canvas.FillEllipse(n.TopLeft, n.Size, Colors.White); 

     var r = rect.Width/2; 
     DrawSegment(canvas, rect, ringWidth, redBush, r, _redSegment.Item1, _redSegment.Item2); 
     DrawSegment(canvas, i, ringInnerWidth, redSegmentBrush, r - ringWidth, _redSegment.Item1, _redSegment.Item2); 
     DrawSegment(canvas, rect, ringWidth, blueBush, r, _greenSegment.Item1, _greenSegment.Item2); 
     DrawSegment(canvas, i, ringInnerWidth, blueSegmentBrush, r - ringWidth, _greenSegment.Item1, _greenSegment.Item2); 
    } 

    void DrawSegment(ICanvas canvas, Rect rect, double width, Brush brush, double r, double s, double f) 
    { 
     canvas.DrawPath(new PathOp[]{ 
      new MoveTo(SegmentEdgePoint(rect.Center, r, s)), 
      new ArcTo(new Size(rect.Height/2, rect.Width/2), false, true, SegmentEdgePoint(rect.Center, r, f)), 
      new LineTo(SegmentEdgePoint(rect.Center, r - width, f)), 
      new ArcTo(new Size(r, r), false, false, SegmentEdgePoint(rect.Center, r - width, s)), 
      new LineTo(SegmentEdgePoint(rect.Center, r, s)), 
      new ClosePath() 
     }, null, brush); 
    } 

    Point SegmentEdgePoint(Point c, double r, double d) 
    { 
     return new Point(
      c.X + r * Math.Cos(d * Math.PI/180), 
      c.Y + r * Math.Sin(d * Math.PI/180) 
     ); 
    } 
} 

NGraphicsを使用している場合、私は非常にインタラクティブに制御を設計するNGraphics.EditorまたはXamarin'ワークブックを使用することをお勧め：

Answer 2

すでに完成している解決策が見つからない場合は、見つけられない場合は、DrawSegment呼び出しでグラフィックスライブラリへのインクリメンタルコールを使用してコントロールを作成すると効果的です。

1. 中心白用白い円を描く
2. 、内側、ぼんやり着色 セクションの減少した半径を有するセグメントを描画
3. 、強く着色外輪の各部分 セクションのセグメントを描画パッド。

幸運！ NGraphicsワット/ NControlあなたは、プラットフォームのレンダラーを作成したり、プロジェクトにSkiaのようなライブラリを追加することなく、あなたの「完全メートル」の「ベクター」バージョンを作成することができますを使用して