How to handle various view states in Windows 8.1 store app

Question

I have windows 8.0 code and I had handled the UI for ViewStates like Portrait,Landscape, filled and Snapped. But with windows 8.1 a Viewer can move the app into any size. how do i handle the UI in this case. Currently i am doing it like this.

  private void QuestionPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        ApplicationViewState currentState = Windows.UI.ViewManagement.ApplicationView.Value;

        if (currentState.Equals(ApplicationViewState.Snapped))
        {
            VisualStateManager.GoToState(this, "Snapped", false);
        }
        else if (currentState.Equals(ApplicationViewState.FullScreenLandscape))
        {
            VisualStateManager.GoToState(this, "FullScreenLandscape", false);
        }
        else if (currentState.Equals(ApplicationViewState.Filled))
        {
            VisualStateManager.GoToState(this, "Filled", false);
        }
        else if (currentState.Equals(ApplicationViewState.FullScreenPortrait))
        {
            VisualStateManager.GoToState(this, "FullScreenPortrait", false);
        }
    }       

Answer 1

Firstly, you need to decide how to categorize your sizes. We decided to go with the following:

Default - landscape full screen.

Portrait - portrait full screen.

Small - snapped/resized to 500 - 683 wide, vertical orientation

Medium - snapped/resized to 684 wide and above, vertical orientation

So basically, the small and medium sizes are a vertical layout, as the height is bigger than the width. When the Medium width becomes larger than its height, then it would be the default landscape size.

We use:DisplayOrientations CurrentOrientation = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().CurrentOrientation; instead of ApplicationViewState for SizeChangedEventArgs.

Then define the sizes as follows:

//Small Size
if (e.NewSize.Width <= 683
    && (CurrentOrientation == DisplayOrientations.Landscape || CurrentOrientation == DisplayOrientations.LandscapeFlipped || CurrentOrientation == DisplayOrientations.None))

You can then play and define which ever sizes you would like.

Answer 2

Instead of basing your layout on ApplicationViewState - make it depend on size and aspect ratio of the window. Think how users would use your app and what layout would work best in these cases. Maybe one layout would be fine or maybe you might want to switch a GridView layout into a ListView one when the window width is smaller than some value - e.g. 500px. Think what's most comfortable to use in these cases. At the very least - test that the layout doesn't fall apart when you resize the app.