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

Question

在this question and answer的帮助下，我设法创建了一个径向进度条。这实现了弧形绘制概念，其中弧线绑定到起始角度和结束角度。

我现在遇到的问题是我希望进度条从弧心开始具有径向渐变。这使得进度条从弧的内部到弧的外部具有“线性梯度”。我试图在弧的笔划上应用径向渐变（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）

<强>结果

Answer 2

不太好，但易于实施的解决方案。您需要调整xaml，以便在进度增加时使用径向渐变增加的弧而不是弧，而是在灰色的弧后面具有所需渐变的弧。灰弧减小角度，以正确的径向梯度揭示背景弧。