RadWindow Card Flip

4 posts, 0 answers
  1. Pam
    Pam avatar
    4 posts
    Member since:
    Mar 2008

    Posted 02 Feb 2012 Link to this post

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

  2. Georgi
    Admin
    Georgi avatar
    296 posts

    Posted 08 Feb 2012 Link to this post

    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 >>
  3. DevCraft banner
  4. Pam
    Pam avatar
    4 posts
    Member since:
    Mar 2008

    Posted 08 Feb 2012 Link to this post

    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.
  5. Georgi
    Admin
    Georgi avatar
    296 posts

    Posted 09 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top