Telerik UI for Windows Phone by Progress

RadAnimationManager allows you to work with the animations you've created with the RadAnimationsFramework. Its API allows you to play and stop animations, work with Animation Selectors and enable and disable animations.

This topic will focus on the following:

Play Animations

In order to play your animations you have to use the static RadAnimationManager class and call its Play() method. The method takes as arguments the object to be animated and the animation itself. Here is an example.

CopyXAML
<UserControl.Resources>
    <telerikCore:RadFadeAnimation x:Key="rectangleFadeAnimation" />
</UserControl.Resources>

<StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
    <Rectangle x:Name="animatedRectangle" Width="100" Height="100" Fill="#FF00BDD2"></Rectangle>
</StackPanel>
CopyC#
RadFadeAnimation rectangleFadeAnimation = this.Resources["rectangleFadeAnimation"] as RadFadeAnimation;

if (rectangleFadeAnimation != null)
{
    RadAnimationManager.Play(this.animatedRectangle, rectangleFadeAnimation);
}

Stop Animations

Stopping animations created with the RadAnimationFramework is done by using either the Stop() method or the StopIfRunning() method. They are used in the same way as the Play() method - you have to pass them the element being animated and the animation applied on it. Here is an example.

CopyC#
RadFadeAnimation rectangleFadeAnimation = this.Resources["rectangleFadeAnimation"] as RadFadeAnimation;
RadAnimationManager.Stop(this.animatedRectangle, rectangleFadeAnimation);

Access Animation Selectors

The RadAnimation Framework introduces the RadAnimationSelector class, which allows you to easily group and create animations in XAML and associating them with a specific element. In order to access them you have to use the RadAnimationManager class and its GetAnimationSelector() method. Here is an example.

CopyXAML
<Rectangle x:Name="animatedRectangle" Width="100" Height="100" Fill="#FF00BDD2">
    <telerikCore:RadAnimationManager.AnimationSelector>
        <telerikCore:RadAnimationSelector>
            <telerikCore:RadFadeAnimation AnimationName="FadeAnimation" />
        </telerikCore:RadAnimationSelector>
    </telerikCore:RadAnimationManager.AnimationSelector>
</Rectangle>
CopyC#
RadAnimationSelector selector = RadAnimationManager.GetAnimationSelector(this.animatedRectangle) as RadAnimationSelector;
Tip
To set AniamtionSelector at run-time use the RadAnimationManager.SetAnimationSelector() method and pass as arguments the UIElement to which to attach the selector, and the selector itself.

Enable and Disable Animations

RadAnimationManager allows you to enable or disable animations on both control and application level.

To disable animation on control level, you have to use the RadAnimationManager.IsAnimationEnabled property. Here is an example.

CopyXAML
<Rectangle x:Name="animatedRectangle" Width="100" Height="100" Fill="#FF00BDD2" telerikCore:RadAnimationManager.IsAnimationEnabled="False" />

To disable the animation globally, you have to set its IsGlobalAnimationEnabled to False.

CopyC#
RadAnimationManager.IsGlobalAnimationEnabled = false;

Handle the Animation's End

Except for hooking up to the Ended event of the RadAnimation objects, you can also use the overload of the RadAniamtionManager.Play() method. It takes an Action object as third parameter, which serves as a callback. Here is an example.

CopyC#
RadFadeAnimation rectangleFadeAnimation = this.Resources["rectangleFadeAnimation"] as RadFadeAnimation;
if (rectangleFadeAnimation != null)
{
    RadAnimationManager.Play(this.animatedRectangle, rectangleFadeAnimation, () =>
    {
        // Do something in the animation finished callback.
    });
}