在Xamarin中创建完整性表(状态显示) [英] Creating completeness meter (Status display) in Xamarin

问题描述

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

I am trying to design a control that displays current status of a process, like this image below.

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

So, we have a circular display of status with colored sections for milestones or checkpoints. In the image, we are already through the first two stages, and third stage is 70% done.

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

I know there is a control in Jquery that was pretty similar. But I am not sure, if there is a third party control in Xamarin Forms that I can use. If there is no third party control, how should I proceed with the design.

我应该只为不同阶段创建图像并显示图像吗?还是我应该创建一个可以接受两个值(里程碑"和"percentage_complete")的自定义控件，然后动态设计一个饼图?

Should I just create images for different stages and display the image? Or should I create a custom control which can take two values, "milestone" and "percentage_complete", and then design maybe a pie chart on the fly?

推荐答案

使用NGraphics w/NControl，您可以创建完整性表"的向量"版本，而无需创建平台渲染器或添加类似的库Skia到您的项目.

Using NGraphics w/ NControl you can create a "vector" version of your "completeness meter" without creating platform renderers or needing to add libraries like Skia to your project.

注意:SkiaSharp和其他本机2d/3d库非常好，但是会增加应用程序的开销，如果您不需要它们的所有功能，那么就会膨胀(应用程序大小，内存使用情况，初始化时间等). .)不值得(IMHO).

Note: SkiaSharp and other native 2d/3d libraries are great, but add an lot of overhead to an app and if you do not need all their features then the bloat (app size, memory usage, initialization time, etc...) is not worth it (IMHO).

re: https://github.com/praeclarum/NGraphics

我精简了一个MultiSegmentProgressControl，我为您展示了弧形绘图的基础知识.我所做的完整版本允许您添加和设置多个片段的动画效果，显示百分比，触摸时突破片段等等.

I stripped down a MultiSegmentProgressControl that I did to show you the basics of the arc drawing. The full version that I did allows you to add and animate multiple segments, displaying percentages, break-out segments on touch, etc...

使用NControl可以创建带有触摸元素的复合控件，因此取决于您需要走多远.

Using NControl you can create composite controls with touch elements, so it is up to you on how far you need to take it.

re: 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来交互式设计控件:

When using NGraphics I highly recommend using the NGraphics.Editoror a Xamarin' WorkBook to interactively design your control:

这篇关于在Xamarin中创建完整性表(状态显示)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！