XAML

因为动画不能共用， 在后台调用代码，(Storyboard)LoadingStoryboard.Clone() 并设置一个BeginTime， 然后设置给小圆点，

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loadingCtrls="clr-namespace:WpfDemoApp.LoadingCtrls">

<Storyboard x:Key="LoadingStoryboard">

    <!--  小圆点慢慢显示  -->
    <DoubleAnimation
        Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1" />

    <!--  小圆点旋转有点快慢缓动  -->
    <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Angle">
        <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
        <SplineDoubleKeyFrame
            KeySpline="0.1, 0.5, 0.9, 0.5" KeyTime="0:0:2"
            Value="360" />
        <SplineDoubleKeyFrame
            KeySpline="0.1, 0.5, 0.9, 0.5" KeyTime="0:0:4"
            Value="720" />
    </DoubleAnimationUsingKeyFrames>

</Storyboard>

<!--  其中一个圆点作为模板， 这里设置 RenderTransformOrigin .5 .5 ， 动画设置 RenderTransform. Angle  -->
<DataTemplate x:Key="LoadingEllipseControl">
    <ContentControl Opacity="0" RenderTransformOrigin=".5 .5">
        <ContentControl.RenderTransform>
            <RotateTransform Angle="0" />
        </ContentControl.RenderTransform>
        <Ellipse
            Width="10" Height="10"
            VerticalAlignment="Bottom"
            Fill="LightGray" />
    </ContentControl>
</DataTemplate>

<!--  控件的 template， 这里设置了 5 个 小圆点  -->
<ControlTemplate x:Key="LoadingControlTemplate" TargetType="loadingCtrls:LoadingControl">

    <Grid SnapsToDevicePixels="True" UseLayoutRounding="True">

        <!--  这里以 LoadingEllipseControl 为模板设置 5 个 小圆点  -->
        <ContentControl x:Name="LoadingDot1" ContentTemplate="{StaticResource LoadingEllipseControl}" />
        <ContentControl x:Name="LoadingDot2" ContentTemplate="{StaticResource LoadingEllipseControl}" />
        <ContentControl x:Name="LoadingDot3" ContentTemplate="{StaticResource LoadingEllipseControl}" />
        <ContentControl x:Name="LoadingDot4" ContentTemplate="{StaticResource LoadingEllipseControl}" />
        <ContentControl x:Name="LoadingDot5" ContentTemplate="{StaticResource LoadingEllipseControl}" />

    </Grid>

</ControlTemplate>

<!--  定义控件样式，这里只指定了 Template  -->
<Style TargetType="loadingCtrls:LoadingControl">
    <Setter Property="Template" Value="{StaticResource LoadingControlTemplate}" />
</Style>

</ResourceDictionary>