Question

So I have a application window (out of browser currently) which has a resolution of 533×300.
Currently i’m showing the main screen in it but when the user decided to go to the menu page I want for the main screen to slide out to the top, and the menu screen to slide in from the bottom, like done on a telephone.

Since I have no idea on how to accomplish this other than that I need to use storyboards, I was hoping on some good Samaritans to point me in the proper direction.

Answer 1

There are several ways to approach this. Have a look here and here for quick tutorial on storyboards. With your main screen as control and menu screen as control, you would have to use Translate Y transform to move your main screen up and at the same time move your menu screen up. Menu screen would have starting position of 0,300 (so it’s outside of view, just in the bottom), then with Transform you animate ‘Y’ property of Main screen from 0 to -300 and Menu screen from 300 to 0. To be honest it’s a very simple task if you can use Blend.

[Edit]
example: simple storyboard that targets textBlock control

    <Storyboard x:Name="MoveUpBy300Over5Seconds">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
            <EasingDoubleKeyFrame KeyTime="0" Value="300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>