放射状グラデーションを持つWPF放射状進捗バー

Question

this question and answerの助けを借りて、放射状の進捗バーを作成することができました。これは、円弧が開始角度と終了角度に結びつく円弧の描画コンセプトを実装します。

私が今問題にしているのは、プログレスバーが円弧の中心から放射状の勾配を持つようにすることです。これにより、プログレスバーには、弧の内側から弧の外側までの「線形勾配」が与えられます。私は円弧のストローク（ProgressBarのForegroundプロパティ）に放射グラデーションを適用しようとしていますが、円弧オブジェクトの中心ではなく、円弧の中心に放射状のグラデーションが適用されます（下記参照）。

アークが100％（または75％を超えるもの）である場合、ストロークの中心は、所望の結果を生成する円弧の中心にあります。パーセンテージを満たす所望の勾配が全く適用されるように

どのように一貫して円弧の中心に放射状グラデーションの中心を調整することができますか？または、この問題に対するより良い解決策/アプローチがありますか？

Answer 1

あなたが使用しているRadialGradientはおそらくRelativeなので、実際の弧の大きさに応じて中心が変更されます。

アーク75％以上である場合、Arcによって生成Geometryがその最大WidthとHeightであり、したがって安定した全体の制御をカバーします。

あなたがしたいことは、「元の」弧の外側にある部分全体を描き、マスクすることです。あなたのケースでそれを行う簡単な方法はArc.OnRenderメソッドを次のように置き換えることです：

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

説明

1. 元のコードによって計算されるように修飾されていないGeometry（GetArcGeometry）
2. が以前にアーク（GetWidenedPathGeometry）を描画するために使用されたPenとそれを拡張しなさい
3. DrawingContextに、その領域外のものは無視するように指示してください（Push(clip) ）
4. DrawingContextが、これは完全に働いた今（Pop）

結果

Answer 2

それほど大きくはありませんが、実装が簡単です。 xamlを微調整する必要があるので、進行方向が増加するにつれて放射状の勾配が増加する弧を持つ代わりに、灰色の弧の後ろに必要な勾配を持つ弧を持つようにします。灰色の円弧は、正しい半径方向の勾配で背景円弧を表示するために角度を減少させます。