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>

使用方法与系列①类似。