WPF custom circular progress bar

Share a good-looking circular progress bar style for WPF, and the code can be used directly by copying and pasting it into the xaml file.
Modify the size of the "DockPanel" area to set the size of the control, such as "<DockPanel Height="50">".
You can change the color of the control by modifying the brush color, such as "<GeometryDrawing Brush="Red">".
 
 
 
 
<DockPanel Height="50">
            <Grid>
                <Grid.Resources>
                    <DrawingBrush x:Key="brush" Stretch="None" AlignmentX="Center" AlignmentY="Top">
                        <DrawingBrush.Drawing>
                            <GeometryDrawing Brush="Red">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry RadiusX="2" RadiusY="5"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Grid.Resources>
                <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="0"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="30"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="60"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="90"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="120"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="150"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="180"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="210"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="240"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="270"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="300"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="330"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Grid.Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.00000" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.08333" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.16666" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.24999" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.33332" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.41665" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.49998" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.58331" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.66664" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.74997" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.83330" To="0"/>
                                <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.91663" To="0"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
            </Grid>
        </DockPanel>


 
  
 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324682891&siteId=291194637