具有径向梯度的WPF径向进度条

Question

在这个问题和答案的帮助下,我设法创建了一个径向进度条.这实现了弧形绘制概念,其中弧线绑定到起始角度和结束角度.

我现在的问题是我希望进度条从弧的中心有径向渐变.这使得进度条从弧的内部到弧的外部具有"线性梯度".我试图在弧的笔划上应用径向渐变(ProgressBar的Foreground属性),但是这会在弧形笔划的中心应用径向渐变,而不是弧形对象的中心(如下所示).

当弧度为100%(或任何高于75%)时,行程的中心位于弧的中心,从而产生所需的结果.

如何始终将径向渐变的中心调整到圆弧的中心,以便在所有填充百分比下应用所需的渐变？或者是否有更好的解决方案/方法解决这个问题？

Answer 1

由于RadialGradient您最常使用Relative,它将根据弧的实际大小改变其中心.

当电弧在75%或更高时,Geometry通过产生的Arc处于其最大Width和Height因此稳定和覆盖整个控制.

你想要做的是,绘制整个圆并掩盖"原始"弧之外的部分.在您的情况下,简单的Arc.OnRender方法是用这个替换方法:

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

说明

1. 获取Geometry原始代码计算的未修改(GetArcGeometry)
2. Pen使用之前用于绘制弧的(GetWidenedPathGeometry)扩展它
3. 指示DrawingContext忽略该区域之外的任何内容(Push(clip))
4. 用渐变绘制一个完整的圆(DrawEllipse)
5. 指示DrawingContext忽略clip从现在开始(Pop)

结果