CODEWITHSUNDEEP
windows-8windows-store-appswindows-8.1
Ramya
Ramya

Reputation: 611

How to handle various view states in Windows 8.1 store app

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);
        }
    }

Upvotes: 0

Views: 382

Answers (2)

Daisy
Daisy

Reputation: 387

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

Default - landscape full screen. enter image description here

Portrait - portrait full screen. enter image description here

Small - snapped/resized to 500 - 683 wide, vertical orientation enter image description here

Medium - snapped/resized to 684 wide and above, vertical orientation enter image description here

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.

Upvotes: 1

Filip Skakun
Filip Skakun

Reputation: 31724

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.

Upvotes: 0

Related Questions