Barra di avanzamento radiale WPF con gradiente radiale

Question

Con l'aiuto di this question and answer, sono riuscito a creare una barra di avanzamento radiale. Questo implementa il concetto di disegno ad arco in cui l'arco si lega agli angoli iniziale e finale.

Il problema che ho ora è che mi piacerebbe che la barra di avanzamento avesse una sfumatura radiale dal centro dell'arco. Ciò dà alla barra di avanzamento un "gradiente lineare" dall'interno dell'arco all'esterno dell'arco. Sto provando ad applicare il gradiente radiale sul tratto dell'arco (la proprietà in primo piano della barra di progressione), ma questo applica il gradiente radiale al centro del tratto dell'arco, non il centro dell'oggetto arco (come visto sotto).

Quando l'arco è al 100% (o qualsiasi superiore al 75%), il centro della corsa è al centro dell'arco, che produce il risultato desiderato.

Come posso costantemente regolare il centro del gradiente radiale al centro dell'arco in modo che il gradiente desiderato viene applicato a tutti di compilare le percentuali? O c'è una soluzione/approccio migliore a questo problema?

Answer 1

Poiché il RadialGradient che si sta utilizzando è molto probabile che sia Relative, cambierà il suo centro in base alla dimensione effettiva dell'arco.

Quando l'arco è 75% o superiore, il Geometry generato da Arc è massima Width e Height e quindi stabile e che copre l'intero controllo.

Quello che vuoi fare è disegnare l'intero cerchio e mascherare le parti che sono al di fuori dell'arco "originale". Semplifica il modo di farlo nel tuo caso è quello di sostituire il metodo Arc.OnRender con questo:

Arc.cs

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

Spiegazione

1. Prendi il non modificato Geometry, calcolata con il codice originale (GetArcGeometry)
2. estendo con il Pen che è stato utilizzato in precedenza per disegnare l'arco (GetWidenedPathGeometry)
3. Richiedere allo DrawingContext di ignorare qualsiasi elemento esterno a tale area (Push(clip))
4. Disegnare un cerchio completo con il gradiente (DrawEllipse)
5. Istruire il DrawingContext di ignorare il clip d'ora in poi (Pop)

Risultato

Answer 2

Una soluzione non eccezionale ma facile da implementare. Devi modificare l'xaml in modo che invece di avere un arco con la sfumatura radiale aumenti di angolo man mano che il progresso aumenta, disponi di un arco con il gradiente richiesto dietro un arco di colore grigio. L'arco grigio si riduce di angolo per svelare l'arco di sfondo con il gradiente radiale corretto.