Xamarin

Question

'daki Tamlık ölçer (Durum göstergesi) oluşturma İşlemin şu andaki durumu gibi bir işlemin geçerli durumunu görüntüleyen bir kontrol tasarlamaya çalışıyorum.

Yani, biz kilometre taşları veya kontrol noktaları için renkli bölümleri ile statü dairesel ekran var. Görüntüde, zaten ilk iki aşamadan geçiyoruz ve üçüncü aşamada% 70 tamamlandı.

Jquery'de oldukça benzer bir kontrolün olduğunu biliyorum. Ama Xamarin Formlarında kullanabileceğim bir üçüncü taraf kontrolü varsa emin değilim. Üçüncü taraf denetimi yoksa, tasarıma nasıl devam etmeliyim.

Farklı aşamalar için görüntü oluşturmalı ve görüntüyü görüntülemeli miyim? Ya da iki değer, "kilometre taşı" ve "yüzdelik_ tamamlama" alabilen özel bir denetim oluşturmalı ve sonra belki de bir pasta grafiği tasarlamalı mıyım?

Answer 1

.

Not: SkiaSharp ve diğer yerel 2d/3d kütüphaneleri harikadır, ancak bir uygulamaya çok fazla yük ekler ve eğer tüm özelliklerine ihtiyacınız yoksa bloat (uygulama boyutu, bellek kullanımı, başlatma süresi vb.) ..) buna değmez (IMHO).

re: Sana çizim yayın temellerini göstermek için yaptım MultiSegmentProgressControl soyunmuş https://github.com/praeclarum/NGraphics

. Yaptığım tam sürüm, birden fazla parça eklemenize ve bunlara animasyon uygulamanıza olanak tanıyor, yüzdeler, dokunma parçalarını gösterme, vb. ...

NControl kullanarak, dokunmatik elemanlarla kompozit kontroller oluşturabilirsiniz, bu size kalmış Onu ne kadar almanız gerektiği üzerine.

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

Çok etkileşimli tasarım kontrol NGraphics.Editor veya Xamarin' çalışma kitabı kullanmanızı tavsiye NGraphics kullanarak:

Answer 2

Zaten tamamlanmış bir çözüm bulamıyorsanız (bulabilirseniz önemle tavsiye edilir!) Daha sonra DrawSegment çağrıları ile grafik kitaplığına artan aramalar içeren bir denetim oluşturmak işe yarayabilir.

iç, loş renkli bölümler için daha az bir yarıçapı olan bir birim çiz

1. güçlü renkli dış halkanın bölümleri her bir bölümü için bir birim çiz,
2. beyaz merkezi için, beyaz bir daire çizin ped.

İyi şanslar! Eğer platformu oluşturuculara oluşturarak veya projenize Skia gibi kütüphaneleri eklemek gerek kalmadan "tamlık metre" bir "vektör" sürümünü oluşturabilirsiniz NControl w/NGraphics kullanma