बनाना पूर्णता मीटर (स्थिति डिस्प्ले) Xamarin

Question

में मैं एक नियंत्रण है कि एक प्रक्रिया की वर्तमान स्थिति को प्रदर्शित करता है, नीचे इस छवि की तरह डिजाइन करने के लिए कोशिश कर रहा हूँ।

तो, हम मील के पत्थर या चौकियों के लिए रंग का वर्गों के साथ स्थिति का एक परिपत्र प्रदर्शन किया है। छवि में, हम पहले से ही पहले दो चरणों में हैं, और तीसरा चरण 70% किया गया है।

मैं जानता हूँ कि Jquery में एक नियंत्रण है कि बहुत समान था नहीं है। लेकिन मुझे यकीन नहीं है, अगर Xamarin फॉर्म में तीसरा पक्ष नियंत्रण है जिसका मैं उपयोग कर सकता हूं। यदि कोई तीसरा पक्ष नियंत्रण नहीं है, तो मुझे डिजाइन के साथ कैसे आगे बढ़ना चाहिए।

मैं सिर्फ अलग-अलग चरणों के लिए चित्र बनाने और छवि प्रदर्शित करना चाहिए? या क्या मुझे कस्टम नियंत्रण बनाना चाहिए जो दो मान, "मील का पत्थर" और "प्रतिशत_कंपूर्ण" ले सकता है, और फिर फ्लाई पर शायद एक पाई चार्ट डिज़ाइन कर सकता है?

Answer 1

NGraphicsNControl w/आप मंच दाता बनाने या अपने प्रोजेक्ट में Skia तरह पुस्तकालयों को जोड़ने के लिए की जरूरत के बिना अपने "पूर्णता मीटर" के एक "वेक्टर" संस्करण बना सकते हैं का उपयोग करना।

नोट: स्काईशर्प और अन्य देशी 2 डी/3 डी पुस्तकालय बहुत अच्छे हैं, लेकिन ऐप में बहुत अधिक ओवरहेड जोड़ें और यदि आपको उनकी सभी सुविधाओं की आवश्यकता नहीं है तो ब्लोट (ऐप आकार, मेमोरी उपयोग, प्रारंभिक समय आदि) ..) इसके लायक नहीं है (आईएमएचओ)।

पुन: 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 'कार्यपुस्तिका का उपयोग कर सहभागी अपने नियंत्रण डिजाइन करने के लिए सलाह देते हैं:

Answer 2

आप एक पहले से ही पूरा समाधान नहीं मिल रही है (अत्यधिक तुम एक मिल सकता है की सिफारिश की!) तो DrawSegment कॉल काम कर सकते हैं के साथ एक ग्राफिक्स पुस्तकालय के लिए वृद्धिशील कॉल के साथ एक नियंत्रण का निर्माण।

1. दृढ़ता से रंग का बाहरी रिंग वर्गों के प्रत्येक भाग के लिए एक खंड ड्रा,
2. भीतरी, dimly रंग वर्गों के लिए कम त्रिज्या के साथ एक खंड ड्रा,
3. केन्द्र सफेद के लिए एक सफेद सर्कल ड्रा तकती।

गुड लक!