रैडियल ग्रेडियेंट

Question

के साथ WPF रेडियल प्रोग्रेस बार this question and answer की सहायता से, मैंने रेडियल प्रोग्रेस बार बनाने में कामयाब रहा है। यह चाप ड्राइंग अवधारणा को लागू करता है जहां चाप प्रारंभ और अंत कोण से बांधता है।

अब मेरे पास समस्या यह है कि मैं प्रगति पट्टी को चाप के केंद्र से रेडियल ग्रेडियेंट रखना चाहता हूं। यह प्रगति पट्टी को चाप के अंदर से चाप के अंदर से "रैखिक ढाल" देता है। मैं चाप के स्ट्रोक (प्रोग्रेसबार की अग्रभूमि संपत्ति) पर रेडियल ग्रेडिएंट को लागू करने की कोशिश कर रहा हूं, लेकिन यह चाप स्ट्रोक के केंद्र में रेडियल ढाल लागू करता है, न कि आर्क ऑब्जेक्ट का केंद्र (जैसा कि नीचे देखा गया है)।

जब चाप 100% (या 75% से अधिक कुछ भी) पर है, स्ट्रोक के केंद्र चाप, जो वांछित परिणाम का उत्पादन के केंद्र में है।

मैं कैसे लगातार चाप के केंद्र के लिए रेडियल ग्रेडिएंट के केंद्र ताकि वांछित ढाल सब पर लागू किया जाता है प्रतिशत को भरने समायोजित कर सकते हैं? या इस समस्या के लिए एक बेहतर समाधान/दृष्टिकोण है?

Answer 1

RadialGradient के बाद से आप Relative का उपयोग कर रहे हैं, यह आर्क के वास्तविक आकार के आधार पर अपना केंद्र बदल देगा।

जब चाप 75% या उच्चतर है, GeometryArc द्वारा उत्पन्न इसकी अधिकतम Width और Height और इसलिए स्थिर और पूरे नियंत्रण कवर पर है।

आप क्या करना चाहते हैं, पूरे सर्कल को खींचें और "मूल" चाप के बाहर के हिस्सों को मुखौटा करें। आपके मामले में ऐसा करने का आसान तरीका Arc.OnRender विधि को प्रतिस्थापित करना है:

आर्क।सीएस

protected override void OnRender(DrawingContext drawingContext) 
{ 
    // half the width and height of the Arc 
    double radiusX = RenderSize.Width/2; 
    double radiusY = RenderSize.Height/2; 

    // the outlines of the "original" Arc geometry 
    PathGeometry clip = GetArcGeometry().GetWidenedPathGeometry(
     new Pen(Stroke, StrokeThickness)); 

    // draw only in the area of the original arc 
    drawingContext.PushClip(clip); 
    drawingContext.DrawEllipse(Stroke, null, new Point(radiusX, radiusY), radiusX, radiusY); 
    drawingContext.Pop(); 
} 

स्पष्टीकरण

1. के रूप में मूल कोड द्वारा गणना (GetArcGeometry)
2. Pen है कि पहले चाप आकर्षित करने के लिए इस्तेमाल किया गया था के साथ बढ़ाएँ असंशोधित Geometry जाओ (GetWidenedPathGeometry)
3. आज्ञा DrawingContext कि क्षेत्र के बाहर कुछ भी अनदेखी करने के लिए (Push(clip))
4. ढाल (DrawEllipse)
5. के साथ एक चक्र पूरा ड्रा DrawingContext निर्देश दें अब से (Pop)

परिणाम

Answer 2

इतना अच्छा नहीं है, लेकिन समाधान को कार्यान्वित करने में आसान है। आपको xaml को ट्विक करने की आवश्यकता है ताकि प्रगति में वृद्धि के रूप में कोण में रेडियल ग्रेडियेंट वृद्धि के साथ एक चाप होने की बजाय, ग्रे रंग के साथ एक चाप के पीछे आवश्यक ढाल के साथ एक चाप है। सही रेडियल ढाल के साथ पृष्ठभूमि चाप का अनावरण करने के लिए भूरे रंग की चाप कोण में कम हो जाती है।