WPF 弧形和扇形进度条绘制

在数据展示中，经常会用到圆弧和扇形来表示数值大小，不仅美观且空间利用率很高。以下是借助本人开发的Arc和Pie控件实现的数据展示工具：

控件源代码请见我的另一篇博客：
自实现Arc控件

上面三个展示效果的代码也贴出来：

<Grid Margin="0,0,350,0">
    <local:Arc x:Name="arc" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="200" Stroke="SkyBlue" StrokeThickness="15" StrokeDashArray="0.2,0.1" HorizontalAlignment="Center" VerticalAlignment="Center">
        <local:Arc.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="0:0:10" Duration="0:0:10" From="0" To="360" RepeatBehavior="Forever" Storyboard.TargetProperty="EndAngle"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </local:Arc.Triggers>
    </local:Arc>
    <TextBlock MaxWidth="60" Text="{Binding ElementName=arc,Path=EndAngle}" FontSize="25" FontFamily="#DigifaceWide" Foreground="SkyBlue" FontWeight="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Margin="0,0,0,0">
    <local:Pie x:Name="pie" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="200" Fill="#FFA2CB15" HorizontalAlignment="Center" VerticalAlignment="Center">
        <local:Pie.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="0:0:10"  Duration="0:0:10" From="0" To="360" RepeatBehavior="Forever" Storyboard.TargetProperty="EndAngle"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </local:Pie.Triggers>
    </local:Pie>
    <TextBlock MaxWidth="60" Text="{Binding ElementName=pie,Path=EndAngle}" FontSize="25" FontFamily="#DigifaceWide" Foreground="Red" FontWeight="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Margin="350,0,0,0">
    <local:Arc x:Name="arc1" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="360" Stroke="#8555" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <local:Arc x:Name="arc2" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="1" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" HorizontalAlignment="Center" VerticalAlignment="Center">
        <local:Arc.Stroke>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="LightGray" Offset="0"/>
                <GradientStop Color="DimGray" Offset="1"/>
            </LinearGradientBrush>
        </local:Arc.Stroke>
        <local:Arc.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="0:0:10" Duration="0:0:2" From="0" To="720" AccelerationRatio="0.2" DecelerationRatio="0.8" RepeatBehavior="Forever" Storyboard.TargetProperty="StartAngle"/>
                        <DoubleAnimation BeginTime="0:0:10" Duration="0:0:2" From="0" To="721" AccelerationRatio="0" DecelerationRatio="1" RepeatBehavior="Forever" Storyboard.TargetProperty="EndAngle"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </local:Arc.Triggers>
    </local:Arc>
</Grid>

欢迎有更多想实现的效果与我联系！