Question

I am playing with a Metro Style Application at the moment (.NET 4.5 RC [C#\XAML], VS2012 RC) and I have one problem which I am unable to solve.

I would like to achieve that my app will change the layout when hosting device is rotated (+-45). I have prepared two layouts in XAML – one for landscape and second one for portrait, and I have done some animation for Visual States:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>
        <VisualState x:Name="FullScreenPortrait">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ControlContentLandscape" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ControlContentPortrait" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Snapped"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

But I do not know what to do next. How to set my app that it will perform these animations when my device is turned into portrait mode?

Answer 1

I have analysed the Grid App template. And I have noticed that the main page there inherits from the LayoutAwarePage class which is present in the Common folder. The LayoutAwarePage class provide the handler for WindowSizeChanged event which is using the VisualStateManager to switch between states – this was the missing part in my current project. The solution is:

1. Manually handle the WindowsSizeChanged event and use the VisualStateManager class and GoToState() method
2. Create new project (Grid App) and fit into it the current project.