RadWindow Card Flip

[Pam]

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

[Georgi]

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

[Pam]

I have added the RadSlideView control to my project; however I do not see a property named TransitionMode. Could you please provide a code sample for the flip transition?  Thank you.

[Georgi]

Hi Pam,

Sorry for the confusion - this is a new feature, added in the Q1 2012 BETA release of our tools. You should install the release (available for download from your account) before you can try this.

Let me know if I can help you in some other way.

Greetings,
Georgi
the Telerik team