WPF Radial Progress Bar с радиальным градиентом

С помощьюэтот вопрос и ответМне удалось создать радиальный индикатор выполнения. Это реализует концепцию рисования дуги, где дуга связывается с начальным и конечным углами.

У меня сейчас проблема в том, что я бы хотел, чтобы индикатор выполнения имел радиальный градиент от центра дуги. Это дает индикатору «линейный градиент» от внутренней части дуги к внешней части дуги. Я пытаюсь применить радиальный градиент к обводке дуги (свойство Foreground панели ProgressBar), но при этом применяется радиальный градиент в центре обводки дуги, а не в центре объекта дуги (как показано ниже).

Когда дуга составляет 100% (или что-либо выше 75%), центр хода находится в центре дуги, что дает желаемый результат.

Как я могу последовательно отрегулировать центр радиального градиента к центру дуги, чтобы требуемый градиент применялся при всех процентах заполнения? Или есть лучшее решение / подход к этой проблеме?

Ответы на вопрос(2)

Решение Вопроса

Поскольку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();
}

объяснение

Получить неизмененнымGeometry как рассчитано по оригинальному коду (GetArcGeometry)Расширить его с помощьюPen который ранее использовался для рисования дуги (GetWidenedPathGeometry)ПроинструктироватьDrawingContext игнорировать что-либо за пределами этой области (Push(clip))Нарисуйте полный круг с градиентом (DrawEllipse)ПроинструктироватьDrawingContext игнорироватьclip впредь (Pop)

Результат

 dnxit12 авг. 2017 г., 16:54
как мы можем изменить края, чтобы быть круглыми углами ????
 Manfred Radlwimmer12 авг. 2017 г., 18:21
@dnxit Это довольно легко на самом деле. Просто установите заглавные буквы на круглые, например, использовать эту ручку:new Pen(Stroke, StrokeThickness){StartLineCap = PenLineCap.Round, EndLineCap = PenLineCap.Round}, Имейте в виду, однако, как это будет выглядеть для очень низких или высоких углов.
 jeff1723726 мая 2016 г., 17:30
это сработало отлично, спасибо

Не очень хорошее, но простое в реализации решение. Вам нужно настроить xaml так, чтобы вместо дуги с радиальным градиентом, увеличивающим угол по мере увеличения прогресса, была дуга с требуемым градиентом позади дуги серого цвета. Серая дуга уменьшается в угле, чтобы раскрыть фоновую дугу с правильным радиальным градиентом.

Ваш ответ на вопрос