Built-in rotation animation of applicationbar in Windows Phone

Question

There is a image control in my page, which support the landscape and portrait layout. I want implement an animation that rotate the image when the oritentaion changed. Which just like the built-in rotate animation of applicationbar. But I have no any idea right now. Could anyone give me a hand?

score 1 · Accepted Answer · answered Aug 16 '12 at 14:58

There are at least two ways to implement it:

1) Catch the OrientationChanged event and animate layout using Fluid UI feature in Expression Blend. It allows you to make smooth transition from one visual state to another.

 void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) {
        if(Orientation==PageOrientation.PortraitUp) {
            VisualStateManager.GoToState(this, "VisualStatePortrait", true);
        }
        else {
            VisualStateManager.GoToState(this, "VisualStateLandscape", true);
        }
    }

You should also define visual states for landscape and portrait layout. More on how to declare them you may find out from this video.

2) Another approach introduced by a Windows Phone developer from Microsoft. His solution requires additional code but is more customizible: you can choose between rotation, fade or hybrid animation. A code sample is also included.

Built-in rotation animation of applicationbar in Windows Phone

1 Answers1