WPF實現一個環形等待進度條

顯示效果：

上面的紅色是我設置的一個背景。

以下是XAML：

<UserControl x:Class="WPFStyle.DIYControl.RoundProcessBarLoading"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPFStyle.DIYControl"
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="800">
    <Viewbox>
        <Grid Height="800" Width="800">
            <Rectangle Name="Rect1" Height="200" Width="120" Fill="#FFFFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:IsLocked="True"/>
            <Rectangle Name="Rect2" Height="200" Width="120" Fill="#20FFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Rectangle Name="Rect3" Height="200" Width="120" Fill="#40FFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Rectangle Name="Rect4" Height="200" Width="120" Fill="#60FFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="135"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Rectangle Name="Rect5" Height="200" Width="120" Fill="#80FFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="180"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Rectangle Name="Rect6" Height="200" Width="120" Fill="#A0FFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="225"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Rectangle Name="Rect7" Height="200" Width="120" Fill="#C0FFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="270"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Rectangle Name="Rect8" Height="200" Width="120" Fill="#E0FFFFFF" RadiusY="60" RadiusX="60" VerticalAlignment="Top" d:LayoutOverrides="Width" RenderTransformOrigin="0.5,2">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="315"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Grid.Triggers>
                <EventTrigger RoutedEvent="Page.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <!--Rect1-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect1" Duration="0:0:1" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>

                            <!--Rect2-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect2" Duration="0:0:0.125" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>
                            <ColorAnimation BeginTime="0:0:0.125" Storyboard.TargetName="Rect2" Duration="0:0:0.875" Storyboard.TargetProperty="Fill.Color" From="#FFFFFFFF" To="#20FFFFFF"/>

                            <!--Rect3-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect3" Duration="0:0:0.250" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>
                            <ColorAnimation BeginTime="0:0:0.250" Storyboard.TargetName="Rect3" Duration="0:0:0.750" Storyboard.TargetProperty="Fill.Color" From="#FFFFFFFF" To="#40FFFFFF"/>

                            <!--Rect4-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect4" Duration="0:0:0.375" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>
                            <ColorAnimation BeginTime="0:0:0.375" Storyboard.TargetName="Rect4" Duration="0:0:0.625" Storyboard.TargetProperty="Fill.Color" From="#FFFFFFFF" To="#60FFFFFF"/>

                            <!--Rect5-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect5" Duration="0:0:0.500" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>
                            <ColorAnimation BeginTime="0:0:0.500" Storyboard.TargetName="Rect5" Duration="0:0:0.500" Storyboard.TargetProperty="Fill.Color" From="#FFFFFFFF" To="#80FFFFFF"/>

                            <!--Rect6-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect6" Duration="0:0:0.625" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>
                            <ColorAnimation BeginTime="0:0:0.625" Storyboard.TargetName="Rect6" Duration="0:0:0.375" Storyboard.TargetProperty="Fill.Color" From="#FFFFFFFF" To="#A0FFFFFF"/>

                            <!--Rect7-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect7" Duration="0:0:0.750" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>
                            <ColorAnimation BeginTime="0:0:0.750" Storyboard.TargetName="Rect7" Duration="0:0:0.250" Storyboard.TargetProperty="Fill.Color" From="#FFFFFFFF" To="#C0FFFFFF"/>

                            <!--Rect8-->
                            <ColorAnimation BeginTime="0:0:0.0" Storyboard.TargetName="Rect8" Duration="0:0:0.875" Storyboard.TargetProperty="Fill.Color" To="#00FFFFFF"/>
                            <ColorAnimation BeginTime="0:0:0.875" Storyboard.TargetName="Rect8" Duration="0:0:0.125" Storyboard.TargetProperty="Fill.Color" From="#FFFFFFFF" To="#E0FFFFFF"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
        </Grid>
    </Viewbox>
</UserControl>