码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2015-11-30 17:36:45      阅读:710      评论:0      收藏:0      [点我收藏+]

标签:

 写在之前:

关于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>


使用方法与系列①类似。

 

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

标签:

原文地址:http://www.cnblogs.com/YunGy/p/5007291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!