WPF自定義環形進度條

分享一個用於WPF的好看的環形進度條樣式,代碼直接複製粘貼到xaml文件中就可以使用。
修改“DockPanel”區域大小即可設置控件大小,如“<DockPanel Height="50">”。
修改畫筆顏色即可更換控件顏色,如“<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>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章