user-interface - 在 Xamarin 中创建完整性计(状态显示)

Question

我正在尝试设计一个显示进程当前状态的控件，如下图所示。

因此，我们有一个圆形的状态显示，其中带有里程碑或检查点的彩色部分。在图中，我们已经完成了前两个阶段，第三阶段已完成 70%。

我知道 Jquery 中有一个非常相似的控件。但我不确定 Xamarin Forms 中是否有可以使用的第三方控件。如果没有第三方控制，我该如何进行设计。

我应该为不同阶段创建图像并显示图像吗？或者我应该创建一个自定义控件，它可以采用两个值“milestone”和“percentage_complete”，然后动态设计一个饼图？

Answer 1

使用 NGraphics 和 NControl，您可以创建“完整性计”的“矢量”版本，而无需创建平台渲染器或需要添加 Skia 等库 到您的项目。

注意:SkiaSharp 和其他原生 2d/3d 库很棒，但是会给应用程序增加大量开销，如果您不需要它们的所有功能，那么就会导致臃肿(应用程序大小、内存使用、初始化时间等)。 .) 不值得(恕我直言)。

回复:https://github.com/praeclarum/NGraphics

我剥离了一个 MultiSegmentProgressControl 来向您展示圆弧绘制的基础知识。我制作的完整版本允许您添加多个片段并为其设置动画、显示百分比、触摸时的突破片段等...

使用 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' WorkBook 来交互式设计控件: