WPF 使用Image实现动画旋转Loading

首先需要有一个Loading的图片，（白色背景，白色小圆圈，所以显示看不到）：

 

创建一个用户控件，实现动画的功能：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<UserControl x:Class="K.Controls.Controls.LoadingImage"              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"              xmlns:local="clr-namespace:K.Controls.Controls"              mc:Ignorable="d"              d:DesignHeight="450" d:DesignWidth="800">     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >         <Image Width="32" Height="32" Source="/K.Controls;component/Images/Black/ic_loading2.png">             <Image.RenderTransform>                 <RotateTransform x:Name="imgTransform"                                      CenterX="15"                                      CenterY="15"                                      Angle="90"/>             </Image.RenderTransform>             <Image.Triggers>                 <EventTrigger RoutedEvent="UserControl.Loaded">                     <BeginStoryboard>                         <Storyboard RepeatBehavior="Forever" SpeedRatio="0.7">                             <DoubleAnimation                                 Storyboard.TargetName="imgTransform"                                 Storyboard.TargetProperty="Angle" From="0" To="360"                                 Duration="0:0:1"/>                         </Storyboard>                     </BeginStoryboard>                 </EventTrigger>             </Image.Triggers>         </Image>     </StackPanel>   </UserControl>

　

在需用使用loading的页面xaml文件中，增加引用：

<controls:LoadingImage HorizontalAlignment="Center" VerticalAlignment="Center"/>

controls表示引用其他类库文件，导入到文件所取得别名，如下所示：

xmlns:controls="clr-namespace:K.Controls.Controls;assembly=K.Controls"