Can't find Animation

[Rui]

Hello i try to use animation like you have in your example, but my dll don't have that option...

i use the:
Telerik.windows.controls
Telerik.windows.controls.input
Telerik.windows.controls.navigation

none give me acces to Telerik.windows.Animation like in your example.

thanks in advance

[Valeri Hristov]

Hello Rui,

That is because the animations are not in any of the Telerik.Windows.Controls.* assemblies, but in Telerik.Windows.Examples project. Go to Telerik.Windows.Examples\Examples\Common\Animation and you will find the source of the animation classes. I guess that you can freely use them, since they are just an example of what can be done with Silvelright.

Sincerely yours,
Valeri Hristov (Silverlight Team)
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rui]

thank you very much.

i saw it now.. its a cool class can help me a lot :)

but i can't anime correctly from one place to another the RADCUBE, i think is because it is in grid layout anot a canvas? am i right?

thank u for the help

[Hristo]

Hi Rui,

I tried to reproduce the problem at our side, but to no avail. I couldn't see any problem with animating RadCube position even if the cube resided in a Grid panel.

Below is a sample Page declaration:

<UserControl x:Class="SilverlightNewPluginAllControlsTest.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Start animation" Click="Button_Click"/>
        <nav:RadCube x:Name="cube"/>
    </Grid>
</UserControl>

and the code behind (Page.xaml.cs)

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SilverlightNewPluginAllControlsTest
{
    public partial class Page : UserControl
    {
        MoveAnimation ma;
        public Page()
        {
            InitializeComponent();
            ma = new MoveAnimation(cube, new Point(200, 200));
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ma.Play();
        }
    }
}

What am I missing?

Kind regards,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rui]

Well i discover that my proble was taht the point is relative to the object and not from the canvas..
in my case, i had the cube in the left botomm of the screen, so if i move to Y it went of the screen, i had to put the -Y so it go up :) but it works now...

another thing that i notice, if u animate a object to some place, it dosen't change for real is positon on the layout right?

because if i try to do a animation after de first one, it goes from the 1 position, and not the position after the 1st animation.. is it possible to set the object postion after the animation? because in radcube case, i can't access to is postion on the screen, i don't now the proprety.

In my example i tryed to do this.. move radcube from center to the bottom of the secreen, but when i resize the window, the cube should adjust with window because is children of a grid, but this dosen't work well after the animation, i think its because postion of the cube is steal the 1st one.. so what i do was to save postions from each animation to another like this.. radcube is the login control.

Page load
{

//goes to the botom of the screen
this.loginanimation = new MoveAnimation(RadCube1, new Point(-(content.ActualWidth / 2) + 100, content.ActualHeight /2), 100);

this.loginanimation.EasingType = RadEasingType.OutExponential;

this.loginanimation.AnimationCompleted += new EventHandler(loginanimation_AnimationCompleted);

this.loginanimation.Play();

App.Current.Host.Content.Resized += new EventHandler(Content_Resized);

}

then 

void Content_Resized(object sender, EventArgs e)

{

if (first >= 2)

{

double height = App.Current.Host.Content.ActualHeight;

double width = App.Current.Host.Content.ActualWidth;

//adjust the login to the botom of the screent when its resized
MoveAnimation ajustarlogin = new MoveAnimation(RadCube1, new Point(-(content.ActualWidth / 2) + 100, content.ActualHeight / 2), 100);

ajustarlogin.From = loginanimation.To;

ajustarlogin.EasingType =

RadEasingType.InElastic;

ajustarlogin.Play();

loginanimation.To = ajustarlogin.To;

// GridScale.ScaleX = width / _originalWidth;

//GridScale.ScaleY = height / _originalHeight;

}

first++;

}

Can u please give me your advice on this, is this right? is there another way? easyer one?

thanks in advance.

rui

[Hristo]

Hello Rui,

As you can see in the source code, the MoveAnimation class uses TranslateTransform to move objects. Thus, the original layout coordinates remain the same.

If you want to move the cube from its latest position to a new position you can set the From and To properties. You can take the last position using the TranslateTransform coordinates, like:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SilverlightAnimation
{
    public partial class Page : UserControl
    {
        MoveAnimation ma;
        public Page()
        {
            InitializeComponent();
            ma = new MoveAnimation(cube, new Point(200, 200));
            ma.AnimationCompleted += new EventHandler(MoveAnimationCompleted);
        }

        void MoveAnimationCompleted(object sender, EventArgs e)
        {
            TransformGroup tg = cube.RenderTransform as TransformGroup;
            TranslateTransform tt = tg.Children[3] as TranslateTransform;
            double x = tt.X;
            double y = tt.Y;

            ma.From = new Point(x, y);
            ma.To = new Point(x + 200, y + 200);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ma.Play();
        }
    }
}

The XAML code is the same as in my previous post.
As for the automatic alignment of RadCube - if you set the cube's horizontal and vertical alignments as centered, the cube will be centered in the grid.

<nav:RadCube x:Name="cube" HorizontalAlignment="Center" VerticalAlignment="Center"/>

I hope this will help you solve the problems you are facing. If you have further questions, please feel free to ask.

Regards,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.