This is a migrated thread and some comments may be shown as answers.

[Solved] RadWindow Card Flip

3 Answers 113 Views

Animation

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Pam asked on 03 Feb 2012, 01:30 AM

I am trying to use the rad window for Windows Phone to simulate a card turning over from back to front. I want the card to turn from left to right and display the back image from 0 to 90 degrees. At 90 degrees the image should change to the front image and display from 90 to 180 degrees. The card is not turning at all – it just displays. My code is below. Thanks for your help.

private void radWindow2_WindowOpening(object sender, System.ComponentModel.CancelEventArgs e)

{

Uri uri = new Uri("CardBack.png", UriKind.Relative);

BitmapImage imgSource = new BitmapImage(uri);

Image image = new Image();

image.Source = imgSource;

btnRad2.Content = image;

RadPlaneProjectionAnimation animation1 = new RadPlaneProjectionAnimation();

animation1.StartAngleX = 0;

animation1.StartAngleY = 0;

animation1.StartAngleZ = 0;

animation1.EndAngleX = 90;

animation1.EndAngleY = 90;

animation1.EndAngleZ = 90;

animation1.SpeedRatio = .1;

animation1.Direction = PerspectiveAnimationDirection.Clockwise;

RadAnimationManager.Play(radWindow2, animation1);

animation1.Ended += new EventHandler<EventArgs>(radWindow2_Ended);

}

void radWindow2_Ended(object sender, EventArgs e)

{

Uri uri = new Uri("AceSpades.png", UriKind.Relative);

BitmapImage imgSource = new BitmapImage(uri);

Image image = new Image();

image.Source = imgSource;

btnRad2.Content = image;

RadPlaneProjectionAnimation animation2 = new RadPlaneProjectionAnimation();

animation2.StartAngleX = 90;

animation2.StartAngleY = 90;

animation2.StartAngleZ = 90;

animation2.EndAngleX = 180;

animation2.EndAngleY = 180;

animation2.EndAngleZ = 180;

animation2.SpeedRatio = .1;

animation2.Direction = PerspectiveAnimationDirection.Clockwise;

RadAnimationManager.Play(radWindow2, animation2);

}

3 Answers, 1 is accepted

answered on 08 Feb 2012, 10:04 AM

Hello Pam,

Thank you for contacting us.

As far as I can see from your code, you are trying to animate the window itself. It does not have any visual representation but rather inserts a Canvas in the Visual Tree and the Canvas holds the content to be visualized. Hence the animation does not have effect.

I think a better approach here would be to simulate the desired animation without using RadWindow. We have similar effect implemented in RadSlideView when TransitionMode = Flip. We actually animate a Double property from 0 to 180 and when the value of that property reaches 90 we change the content of the animated element. The element may be an Image or a Rectangle, filled with ImageBrush - whatever suits you better.

I hope this helps. Let me know if you need further assistance.

Kind regards,
Georgi
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>