Easy processing resource animation in WPF?

Question

I created a circular processing animation similar to the one visible on the Chrome browser tab ... I want to use it throughout the application and therefore decided to place it as a resource .. however .. I would like to know what is the best way / practice to use this animation resource is easy in my application ... below is the xaml code for my animation processing. Should I use it 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 like that a couple of days ago. I set the storyboard and the elements to be animated in the user control. I added a dependency property to be able to start / stop the animation through waiting. All that remains is to use user control where 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:

 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); } }