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?

Answer 1

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.