Telerik UI for Windows Phone

Using the RadAnimationFramework you can easily implement a wide set of animations inside your Windows Phone applications.

This topic will explain the following:

Creating Animation

Note

In order to use the RadAnimation Framework in your Windows Phone applications, you have to add a reference to the following assembly:

  • Telerik.Windows.Core.dll

After adding reference to the aforementioned dll, you can declare a new instance of the desired animation. The instance can be created either in XAML and stored as a Resource or created dynamically when needed. Here is an example of RadFadeAnimation created in both ways.

Note

To use RadFadeAnimation in the XAML you have to add the following namespace declaration:

xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
CopyXAML
<UserControl.Resources>
    <telerikCore:RadFadeAnimation x:Key="rectangleFadeAnimation" />
</UserControl.Resources>
CopyC#
RadFadeAnimation rectangleFadeAnimation = new RadFadeAnimation();

Playing Animation

The animation you've created should be applied to an UIElement. This example will use a Rectangle object.

Tip
To learn about another way to handle the end of an animation, read the Animation Manager topic.
CopyXAML
<Rectangle x:Name="animatedRectangle" Width="100" Height="100" Fill="#FF00BDD2" />

In order to play the animation on the targeted element, you have to use the static RadAnimationManager class and its Play() method. Here is a sample code, which assumes that your animation is stored as a resource in UserControl.

CopyC#
RadFadeAnimation rectangleFadeAnimation = this.Resources["rectangleFadeAnimation"] as RadFadeAnimation;

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

Handling the Animation's End

If there are some actions you want to execute upon completing the animation you just have to hook up on its Ended event. Here is an example.

CopyC#
public Page()
{
    this.InitializeComponent();
    RadFadeAnimation rectangleFadeAnimation = this.Resources["rectangleFadeAnimation"] as RadFadeAnimation;
    if (rectangleFadeAnimation != null)
    {
        rectangleFadeAnimation.Ended += this.rectangleFadeAnimation_Ended;
        RadAnimationManager.Play(this.animatedRectangle, rectangleFadeAnimation);
    }
}

private void rectangleFadeAnimation_Ended(object sender, EventArgs e)
{
    //put your custom logic here.
}