Question

I have created a circular processing animation similar to the one seen on the Chrome browser tab… i want to use it throughout my application and therefore decide to put it as a resource.. however.. i would like to know what is the best way/practice to use this animation resource easily in my app… below is the xaml code for my processing animation.
should it be used as a DataTemplate or ControlTemplate?

<Grid>
<Grid.Resources>
  <Storyboard x:Key="LoadingAnimation" RepeatBehavior="Forever">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(c:Arc.EndAngle)" Storyboard.TargetName="arc">
    <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-90"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-270"/>
  </DoubleAnimationUsingKeyFrames>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(c:Arc.StartAngle)" Storyboard.TargetName="arc">
    <EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-270"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-450"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
  <BeginStoryboard Storyboard="{StaticResource LoadingAnimation}"/>
</EventTrigger>
</Grid.Triggers>

<c:Arc x:Name="arcbackground" StartAngle="0" EndAngle="359.9"  Stroke="#FFE0E0E0"  StrokeThickness="8"/>
<c:Arc x:Name="arc" Stroke="{StaticResource BlueGradientBrush}"  StrokeThickness="8"/>

Answer 1

I needed something similar a couple of days ago. I put the storyboard and the elements to be animated in a user control. I added a dependency property to be able to start/stop the animation through biding. All that’s left is to use the user control wherever you need it in your application.

My XAML looks like this:

<UserControl x:Class="MyAssembly.SpinningWait"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:core="clr-namespace:MyAssembly">
    <UserControl.Resources>
        <Storyboard x:Key="canvasAnimation">
            <DoubleAnimationUsingKeyFrames
               RepeatBehavior="Forever"
               SpeedRatio="24"
               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
               Storyboard.TargetName="canvas">
                <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="45"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="90"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:6" Value="135"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="180"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:10" Value="225"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:12" Value="270"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:14" Value="315"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:16" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <core:RadialPanel x:Name="canvas" RenderTransformOrigin="0.5,0.5">
        <core:RadialPanel.Resources>
            <Style TargetType="Ellipse">
                <Setter Property="Height" Value="6" />
                <Setter Property="Width" Value="6" />
                <Setter Property="Fill" Value="White" />
            </Style>
        </core:RadialPanel.Resources>

        <core:RadialPanel.RenderTransform>
            <TransformGroup>
                <RotateTransform/>
            </TransformGroup>
        </core:RadialPanel.RenderTransform>

        <Ellipse />
        <Ellipse Opacity="0.1" />
        <Ellipse Opacity="0.2" />
        <Ellipse Opacity="0.3" />
        <Ellipse Opacity="0.4" />
        <Ellipse Opacity="0.5" />
        <Ellipse Opacity="0.6" />
        <Ellipse Opacity="0.7" />
    </core:RadialPanel>
</UserControl>

And its code-behind:

public partial class SpinningWait : UserControl
{
    private Storyboard _storyboard;

    public SpinningWait()
    {
        InitializeComponent();
    }

    public bool IsWaiting
    {
        get { return (bool)GetValue(IsWaitingProperty); }
        set { SetValue(IsWaitingProperty, value); }
    }

    public static readonly DependencyProperty IsWaitingProperty =
        DependencyProperty.Register("IsWaiting", typeof(bool), typeof(SpinningWait), new UIPropertyMetadata(false, new PropertyChangedCallback(OnIsWaitingChanged)));


    private static void OnIsWaitingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((SpinningWait)d).OnIsWaitingChanged((object)d, e);
    }

    private void OnIsWaitingChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        if (IsWaiting)
        {
            this.Visibility = Visibility.Visible;
            this.StartAnimation();
        }
        else
        {
            this.Visibility = Visibility.Collapsed;
            this.StopAnimation();
        }
    }

    private void StartAnimation()
    {
        this._storyboard = (Storyboard)FindResource("canvasAnimation");
        this._storyboard.Begin(canvas, true);
    }

    private void StopAnimation()
    {
        this._storyboard.Remove(canvas);
    }
}