带有径向渐变的 WPF 径向进度条

Question

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

我现在遇到的问题是我希望进度条从弧的中心具有径向渐变。这为进度条提供了从圆弧内侧到圆弧外侧的“线性渐变”。我正在尝试在弧的笔划上应用径向渐变（ProgressBar 的 Foreground 属性），但这会将径向渐变应用在弧线的中心，而不是弧线对象的中心（如下所示）。

当圆弧为 100%（或任何高于 75%）时，笔划的中心位于圆弧的中心，从而产生所需的结果。

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

Answer 1

由于您使用的RadialGradient 很可能是Relative，它会根据圆弧的实际大小改变其中心。

当圆弧在75%或更高时，Arc产生的Geometry最大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，以便随着进度的增加而不是具有径向渐变角度增加的弧，而是在灰色弧后面具有所需渐变的弧。灰色弧线的角度减小，以显示具有正确径向渐变的背景弧线。