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>

使用方法与系列①类似。

 

转载于:https://www.cnblogs.com/YunGy/p/5007291.html