WPF进度条系列②旋转小圆圈

时间：2022-03-08 13:18:30

 写在之前：

关于WPF的样式，我也是学习了很多朋友的文章才有了下面的东西，因为时间有些久远 & 备份的链接也都不在了。

所以，究竟是看过哪些文章，也是记不清楚了……

请见谅。

--------------------------------我是害羞的分割线-----------------------------------

旋转小圆圈进度条见效果：

WPF进度条系列②旋转小圆圈

xaml:

<UserControl x:Class="AppHost.ProbarRotate"

             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"

             mc:Ignorable="d"

             d:DesignHeight="300" d:DesignWidth="300">

    <UserControl.Resources>

        <ResourceDictionary>

            <Style x:Key="EllipseStyle" TargetType="Ellipse">

                <Setter Property="Width" Value="16"/>

                <Setter Property="Height" Value="16"/>

                <Setter Property="Stretch" Value="Fill"/>

                <Setter Property="Fill" Value="#FF2CB6E7"/>

            </Style>

        </ResourceDictionary>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent"

              HorizontalAlignment="Center" VerticalAlignment="Center">

        <Grid.RenderTransform>

            <ScaleTransform x:Name="SpinnerScale"   ScaleX="1.0" ScaleY="1.0" />

        </Grid.RenderTransform>

        <Canvas RenderTransformOrigin="0.5,0.5"  Width="120" Height="120"

                HorizontalAlignment="Center" VerticalAlignment="Center" >

            <Ellipse  Style="{StaticResource EllipseStyle}" Opacity="1.0"

                      Canvas.Left="14.64"  Canvas.Top="14.64" />

            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.8"

                     Canvas.Left="0" Canvas.Top="50"  />

            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.6"

                     Canvas.Left="14.64" Canvas.Top="85.35"  />

            <Ellipse  Style="{StaticResource EllipseStyle}" Opacity="0.4"

                      Canvas.Left="50"  Canvas.Top="100" />

            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.2"

                     Canvas.Left="85.35" Canvas.Top="85.35"  />

            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.1"

                     Canvas.Left="100" Canvas.Top="50"  />

            <Canvas.RenderTransform>

                <RotateTransform x:Name="SpinnerRotate"  Angle="0" />

            </Canvas.RenderTransform>

            <Canvas.Triggers>

                <EventTrigger RoutedEvent="ContentControl.Loaded">

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation

                                    Storyboard.TargetName  ="SpinnerRotate"

                                    Storyboard.TargetProperty ="(RotateTransform.Angle)"

                                     From="0" To="360"  Duration="0:0:05" RepeatBehavior="Forever" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Canvas.Triggers>

        </Canvas>

    </Grid>

</UserControl>

使用方法与系列①类似。

相关文章