如何用C#和WPF实现环形进度条跑马灯及全填充效果

一、全填充功能失效的修复方案 #

全填充失效通常是因为进度值达到100时，ArcSegment的角度计算存在精度误差，无法形成完整闭合的圆环。直接替换为EllipseGeometry即可解决：

自定义控件核心逻辑 #

public class CircularProgressBar : Control
{
    public static readonly DependencyProperty ProgressValueProperty =
        DependencyProperty.Register(nameof(ProgressValue), typeof(double), typeof(CircularProgressBar),
            new PropertyMetadata(0.0, OnProgressValueChanged));

    public double ProgressValue
    {
        get => (double)GetValue(ProgressValueProperty);
        set => SetValue(ProgressValueProperty, value);
    }

    private static void OnProgressValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((CircularProgressBar)d).UpdateProgressPath();
    }

    private void UpdateProgressPath()
    {
        var progressPath = Template.FindName("ProgressPath", this) as Path;
        if (progressPath == null) return;

        const double centerX = 50, centerY = 50, radius = 40;
        const double startAngle = -90; // 从顶部起始

        if (ProgressValue >= 100)
        {
            // 全填充时直接使用完整椭圆
            progressPath.Data = new EllipseGeometry(new Point(centerX, centerY), radius, radius);
            return;
        }

        // 计算进度对应的结束角度
        double endAngle = startAngle + (ProgressValue / 100) * 360;
        var arc = new ArcSegment(
            new Point(
                centerX + radius * Math.Cos(endAngle * Math.PI / 180),
                centerY + radius * Math.Sin(endAngle * Math.PI / 180)),
            new Size(radius, radius),
            0,
            endAngle - startAngle > 180,
            SweepDirection.Clockwise,
            true);

        var pathFigure = new PathFigure(
            new Point(
                centerX + radius * Math.Cos(startAngle * Math.PI / 180),
                centerY + radius * Math.Sin(startAngle * Math.PI / 180)),
            new[] { arc },
            false);

        progressPath.Data = new PathGeometry(new[] { pathFigure });
    }
}

XAML模板配合 #

确保模板中的进度路径能正确接收几何图形更新：

<Style TargetType="{x:Type local:CircularProgressBar}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CircularProgressBar}">
                <Grid>
                    <!-- 背景圆环 -->
                    <Ellipse Stroke="#E0E0E0" StrokeThickness="8" Width="80" Height="80" Margin="10"/>
                    <!-- 进度圆环 -->
                    <Path x:Name="ProgressPath" Stroke="#2196F3" StrokeThickness="8" StrokeLineCap="Round"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

二、跑马灯效果的优化 #

基于RotateTransform的跑马灯可以通过WPF动画实现流畅循环，同时与数据库连接状态联动：

添加跑马灯依赖属性与动画逻辑 #

public static readonly DependencyProperty MarqueeAngleProperty =
    DependencyProperty.Register(nameof(MarqueeAngle), typeof(double), typeof(CircularProgressBar));

public double MarqueeAngle
{
    get => (double)GetValue(MarqueeAngleProperty);
    set => SetValue(MarqueeAngleProperty, value);
}

public void StartMarquee()
{
    var anim = new DoubleAnimation
    {
        From = 0,
        To = 360,
        Duration = TimeSpan.FromSeconds(2),
        RepeatBehavior = RepeatBehavior.Forever
    };
    BeginAnimation(MarqueeAngleProperty, anim);
}

public void StopMarquee()
{
    BeginAnimation(MarqueeAngleProperty, null);
}

模板中集成跑马灯元素 #

<!-- 在ControlTemplate的Grid中添加跑马灯容器 -->
<Grid RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <RotateTransform Angle="{Binding MarqueeAngle, RelativeSource={RelativeSource TemplatedParent}}"/>
    </Grid.RenderTransform>
    <!-- 高亮跑马灯片段 -->
    <Path Data="M 10,50 A 40,40 0 0 1 35,50" Stroke="#FFFFFF" StrokeThickness="8" StrokeLineCap="Round"/>
</Grid>

数据库连接联动逻辑 #

async void ConnectToDb()
{
    circularProgressBar.StartMarquee();
    try
    {
        // 模拟数据库连接操作
        await Task.Delay(2000);
        // 连接成功：停止跑马灯+全填充
        circularProgressBar.StopMarquee();
        circularProgressBar.ProgressValue = 100;
    }
    catch
    {
        // 连接失败：停止跑马灯+重置进度
        circularProgressBar.StopMarquee();
        circularProgressBar.ProgressValue = 0;
    }
}

三、学习资源推荐 #

• WPF官方文档：重点研读自定义控件开发、几何图形绘制、属性动画章节，系统掌握底层原理。
• 微软官方WPF教程：包含动画与图形的实战案例，适合快速上手复杂控件开发。
• 国内视频平台WPF实战教程：搜索“WPF环形进度条”，可找到手把手实现的实操视频，覆盖跑马灯与全填充细节。
• 《WPF编程宝典》书籍：书中有自定义控件的完整案例，对环形进度条这类几何控件开发讲解深入。

内容的提问来源于stack exchange，提问作者WDpad159