WPF 使用Image实现动画旋转Loading

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

 

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

<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"