C# WPF 基础等待动画Loading...动态转圈 Storyboard ContentControl

这个效果图...直接放上吧，实际是转圈效果，使用起来最方便的一种。

【这是个基础版，灵活度很高】

• Xaml

绘制Loading图案，及触发的动画效果，实际控制的每个组件 Opacity - 透明度 属性。

1.  
   <Style TargetType="{x:Type local:LoadingControl}">
2.  
   <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
3.  
   <Setter Property="Focusable" Value="False"/>
4.  
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
5.  
   <Setter Property="VerticalContentAlignment" Value="Center"/>
6.  
   <Setter Property="Foreground" Value="Red"/>
7.  
   <Setter Property="Template">
8.  
   <Setter.Value>
9.  
   <ControlTemplate TargetType="{x:Type local:LoadingControl}">
10.  
    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" VerticalAlignment="Center" >
11.  
    <Grid.Resources>
12.  
    <DrawingBrush x:Key="brush" Stretch="None" AlignmentX="Center" AlignmentY="Top">
13.  
    <DrawingBrush.Drawing>
14.  
    <GeometryDrawing Brush="Red">
15.  
    <GeometryDrawing.Geometry>
16.  
    <EllipseGeometry RadiusX="{Binding RadiusX, RelativeSource={RelativeSource TemplatedParent}}"
17.  
    RadiusY="{Binding RadiusY, RelativeSource={RelativeSource TemplatedParent}}"/>
18.  
    </GeometryDrawing.Geometry>
19.  
    </GeometryDrawing>
20.  
    </DrawingBrush.Drawing>
21.  
    </DrawingBrush>
22.  
    </Grid.Resources>
23.  
     
24.  
    <!--绘制图案-->
25.  
    <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
26.  
    <Rectangle.RenderTransform>
27.  
    <RotateTransform Angle="0"/>
28.  
    </Rectangle.RenderTransform>
29.  
    </Rectangle>
30.  
    <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
31.  
    <Rectangle.RenderTransform>
32.  
    <RotateTransform Angle="30"/>
33.  
    </Rectangle.RenderTransform>
34.  
    </Rectangle>
35.  
    <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
36.  
    <Rectangle.RenderTransform>
37.  
    <RotateTransform Angle="60"/>
38.  
    </Rectangle.RenderTransform>
39.  
    </Rectangle>
40.  
    <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
41.  
    <Rectangle.RenderTransform>
42.  
    <RotateTransform Angle="90"/>
43.  
    </Rectangle.RenderTransform>
44.  
    </Rectangle>
45.  
    <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
46.  
    <Rectangle.RenderTransform>
47.  
    <RotateTransform Angle="120"/>
48.  
    </Rectangle.RenderTransform>
49.  
    </Rectangle>
50.  
    <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
51.  
    <Rectangle.RenderTransform>
52.  
    <RotateTransform Angle="150"/>
53.  
    </Rectangle.RenderTransform>
54.  
    </Rectangle>
55.  
    <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
56.  
    <Rectangle.RenderTransform>
57.  
    <RotateTransform Angle="180"/>
58.  
    </Rectangle.RenderTransform>
59.  
    </Rectangle>
60.  
    <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
61.  
    <Rectangle.RenderTransform>
62.  
    <RotateTransform Angle="210"/>
63.  
    </Rectangle.RenderTransform>
64.  
    </Rectangle>
65.  
    <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
66.  
    <Rectangle.RenderTransform>
67.  
    <RotateTransform Angle="240"/>
68.  
    </Rectangle.RenderTransform>
69.  
    </Rectangle>
70.  
    <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
71.  
    <Rectangle.RenderTransform>
72.  
    <RotateTransform Angle="270"/>
73.  
    </Rectangle.RenderTransform>
74.  
    </Rectangle>
75.  
    <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
76.  
    <Rectangle.RenderTransform>
77.  
    <RotateTransform Angle="300"/>
78.  
    </Rectangle.RenderTransform>
79.  
    </Rectangle>
80.  
    <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity="0.3" RenderTransformOrigin="0.5,0.5">
81.  
    <Rectangle.RenderTransform>
82.  
    <RotateTransform Angle="330"/>
83.  
    </Rectangle.RenderTransform>
84.  
    </Rectangle>
85.  
     
86.  
    <Grid.Triggers>
87.  
    <!--动画效果 可以放别的 事件 或 属性 触发-->
88.  
    <EventTrigger RoutedEvent="Grid.Loaded">
89.  
    <BeginStoryboard>
90.  
    <Storyboard RepeatBehavior="Forever">
91.  
    <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.00000" To="1"/>
92.  
    <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.08333" To="1"/>
93.  
    <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.16666" To="1"/>
94.  
    <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.24999" To="1"/>
95.  
    <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.33332" To="1"/>
96.  
    <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.41665" To="1"/>
97.  
    <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.49998" To="1"/>
98.  
    <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.58331" To="1"/>
99.  
    <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.66664" To="1"/>
100.  
     <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.74997" To="1"/>
101.  
     <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.83330" To="1"/>
102.  
     <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.39333" BeginTime="0:0:0.91663" To="1"/>
103.  
     </Storyboard>
104.  
     </BeginStoryboard>
105.  
     </EventTrigger>
106.  
     </Grid.Triggers>
107.  
     </Grid>
108.  
     </ControlTemplate>
109.  
     </Setter.Value>
110.  
     </Setter>
111.  
     </Style>

如果是想直接用 Storyboard 动态效果，那就：（示例只是随便找的Code，不是Loading了哈~）

// i:Interaction.Triggers  --  i:EventTrigger  --  i:InvokeCommandAction  -- 无关的插曲

1.  
   //比如 DockPanel 的样式里，想在 Event 加入动态效果
2.  
   <DockPanel.Triggers>
3.  
   <!--MouseEnter时 Storyboard效果-->
4.  
   <EventTrigger RoutedEvent="MouseEnter">
5.  
   <BeginStoryboard>
6.  
   <Storyboard>
7.  
   <ColorAnimation Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
8.  
   Storyboard.TargetName="BranchAccountingBorder" Duration="0:0:0.1"
9.  
   From="#E7E7E8" To="#E0301E" AutoReverse="False" />
10.  
    </Storyboard>
11.  
    </BeginStoryboard>
12.  
    </EventTrigger>
13.  
    <EventTrigger RoutedEvent="MouseLeave">
14.  
    <BeginStoryboard>
15.  
    <Storyboard>
16.  
    <ColorAnimation Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)"
17.  
    Storyboard.TargetName="BranchAccountingBorder" Duration="0:0:0.1"
18.  
    From="#E0301E" To="#E7E7E8" AutoReverse="False" />
19.  
    </Storyboard>
20.  
    </BeginStoryboard>
21.  
    </EventTrigger>
22.  
    </DockPanel.Triggers>
23.  
     
24.  
    <!--在没有 Command 属性的控件加入交互命令，使用i : 引用 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" -->
25.  
    <i:Interaction.Triggers>
26.  
    <i:EventTrigger EventName="MouseLeftButtonDown">
27.  
    <i:InvokeCommandAction Command="{Binding CheckTestCommand}"></i:InvokeCommandAction>
28.  
    </i:EventTrigger>
29.  
    </i:Interaction.Triggers>

• LoadingControl.cs  可省略

提供使用处的 X Y 属性（外观效果），用的时候调整就看得出来啦

1.  
   using System;
2.  
   using System.Windows;
3.  
   using System.Windows.Controls;
4.  
    
5.  
   namespace MyTest.Control
6.  
   {
7.  
   public class LoadingControl : ContentControl
8.  
   {
9.  
   /// <summary>
10.  
    /// Y轴半径
11.  
    /// </summary>
12.  
    public static readonly DependencyProperty RadiusYPropertyProperty;
13.  
     
14.  
    /// <summary>
15.  
    /// X轴半径
16.  
    /// </summary>
17.  
    public static readonly DependencyProperty RadiusXPropertyProperty;
18.  
     
19.  
    /// <summary>
20.  
    /// 静态构造方法
21.  
    /// </summary>
22.  
    static LoadingControl()
23.  
    {
24.  
    DefaultStyleKeyProperty.OverrideMetadata(typeof(LoadingControl), new FrameworkPropertyMetadata(typeof(LoadingControl)));
25.  
    RadiusYPropertyProperty = DependencyProperty.Register("RadiusY", typeof(string), typeof(LoadingControl), new PropertyMetadata("0"));
26.  
    RadiusXPropertyProperty = DependencyProperty.Register("RadiusX", typeof(string), typeof(LoadingControl), new PropertyMetadata("0"));
27.  
    }
28.  
     
29.  
    /// <summary>
30.  
    /// 构造方法
31.  
    /// </summary>
32.  
    public LoadingControl()
33.  
    {
34.  
     
35.  
    }
36.  
     
37.  
    /// <summary>
38.  
    /// X轴半径
39.  
    /// </summary>
40.  
    public string RadiusX
41.  
    {
42.  
    get { return (string)GetValue(RadiusXPropertyProperty); }
43.  
    set { SetValue(RadiusXPropertyProperty, value); }
44.  
    }
45.  
     
46.  
    /// <summary>
47.  
    /// Y轴半径
48.  
    /// </summary>
49.  
    public string RadiusY
50.  
    {
51.  
    get { return (string)GetValue(RadiusYPropertyProperty); }
52.  
    set { SetValue(RadiusYPropertyProperty, value); }
53.  
    }
54.  
    }
55.  
    }

• xaml 使用

其实就引用这个控件，然后调整属性就OK 了。

由于动画效果，示例里是加载的时候就一直转动，所以控制 Visibility 属性就可以了。

也可以自定义其他属性 或 事件，触发转动、停止效果。

<mycontrols:LoadingControl Visibility="Collapsed" RadiusX="1.2" RadiusY="3" Width="20" Height="20"/>

【这是个基础版，灵活度很高】   可以改样式、触发时机......

这篇好文章是转载于：学新通技术网