【WPF】利用Ellipse或Rectangle制作圆形进度条

        public MainViewModel()
        {
            Task.Run(() =>
            {
                while(true)
                {
                    Application.Current.Dispatcher.Invoke(() =>
                    {
                        double second = DateTime.Now.Second * 100 / 60;
                        ProcessValue = CalcProgress(second, 50, 12);
                        ProcessNumber = second + "%";
                    });
                }
            });
        }

        /// <summary>
        /// 计算进度条百分比
        /// </summary>
        /// <param name="progress">百分比</param>
        /// <param name="radius">圆角的度数</param>
        /// <param name="thickness">边框厚度</param>
        /// <returns></returns>
        private DoubleCollection CalcProgress(double progress, double radius, double thickness)
        {
            var r = radius - thickness / 2;
            var perimeter = 2 * Math.PI * r / thickness;
            var step = progress / 100 * perimeter;
            var result = new DoubleCollection() { step, 1000 };
            return result;
        }

        private DoubleCollection processValue;
        /// <summary>
        /// 圆形进度条数组
        /// </summary>
        public DoubleCollection ProcessValue
        {
            get { return processValue; }
            set { processValue = value;RaisePropertyChanged();}
        }

        private string processNumber;
        /// <summary>
        /// 进度
        /// </summary>
        public string ProcessNumber
        {
            get { return processNumber; }
            set { processNumber = value; RaisePropertyChanged(); }
        }

            <StackPanel Orientation="Horizontal" Background="#4E59A4">
                <Grid Background="Transparent">
                    <i:Interaction.Behaviors>
                        <!--MouseDragElementBehavior实现拖拽功能-->
                        <ei:MouseDragElementBehavior/> 
                    </i:Interaction.Behaviors>
                    <Ellipse Width="100" Height="100" StrokeThickness="12" Margin="30" Stroke="Gray"/>
                    <Ellipse Width="100" Height="100" StrokeThickness="12" StrokeDashArray="{Binding ProcessValue}"
                         RenderTransformOrigin="0.5,0.5">
                        <Ellipse.Stroke>
                            <LinearGradientBrush StartPoint="0.5,0.5" EndPoint="1,1">
                                <GradientStop Color="Green" Offset="0"/>
                                <GradientStop Color="Yellow" Offset="1"/>
                            </LinearGradientBrush>
                        </Ellipse.Stroke>
                        <Ellipse.RenderTransform>
                            <RotateTransform Angle="-90"/>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <TextBlock Text="{Binding ProcessNumber}" FontSize="28" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
                <Grid Background="Transparent" Margin="50">
                    <i:Interaction.Behaviors>
                        <ei:MouseDragElementBehavior/>
                    </i:Interaction.Behaviors>
                    <!--RadiusX、RadiusY 设置将矩形边角改为圆角时的椭圆直径-->
                    <Rectangle Width="100" Height="100" RadiusX="50" RadiusY="50" Stroke="Gray" StrokeThickness="12"/>
                    <Rectangle Width="100" Height="100" RadiusX="50" RadiusY="50" StrokeThickness="12"
                               StrokeDashArray="{Binding ProcessValue}" RenderTransformOrigin="0.5,0.5">
                        <Rectangle.Stroke>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="Green" Offset="0.3"/>
                                <GradientStop Color="Yellow" Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.Stroke>
                        <Rectangle.RenderTransform>
                            <RotateTransform Angle="90"/>
                        </Rectangle.RenderTransform>
                        <Rectangle.Effect>
                            <DropShadowEffect BlurRadius="4" ShadowDepth="0" Color="AliceBlue" Opacity="0.8"/>
                        </Rectangle.Effect>
                    </Rectangle>
                    <TextBlock Text="{Binding ProcessNumber}" FontSize="28" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </StackPanel>

RenderTransformOrigin：渲染动画的起点

值为坐标的形式，范围（0,0）到（1,1），默认（0,0）

RenderTransform :变形特效，用于拉伸、旋转、扭曲一个对象

成员包括：

1. TranslateTransform：平移。 X、Y 属性设置平移距离

<Ellipse.RenderTransform>
    <TranslateTransform X="40" Y="-50"/>
</Ellipse.RenderTransform>

2. RotateTransform: 旋转。  Angle设置旋转角度，CenterX、Y设置旋转中心的坐标

<RotateTransform Angle="-86" CenterX="-10" CenterY="10"/>

3. ScaleTransform : 缩放。  ScaleX、Y  设置 X 轴、Y轴缩放比例

<ScaleTransform  CenterX="-10" CenterY="10" ScaleX="2" ScaleY="0.8"/>

4. SkewTransform : 二维倾斜 

<SkewTransform  CenterX="-10" CenterY="10" AngleX="50" AngleY="-30"/>

5. TransformGroup: 组合变化效果 

<TransformGroup>
   <SkewTransform  CenterX="-10" CenterY="10" AngleX="50" AngleY="-30"/>
   <RotateTransform Angle="50"/>
</TransformGroup>

MatrixTransform ：通过矩阵算法实现更为复杂的变形