Best way to handle universal app state of view

Question

What is the best approach to catch state-of-view changes and modify app behaviour in each state? I am looking for good tutorial or advice whole morning and I just found nice tutorial for usage of VisualStateManager. It was really helpfull for me, but VisualStudio says, that this approach is obsolete. This way does not work with some features too, so how to efficiently and validly modify UI for each of four states (Landscape, Fill, Snapped, Portrait) in Windows 8.1 universal app?

Answer 1

There is no ApplicationViewState enum in windows 8.1. However the approach is the same: Use visual states and VisualStateManager in SizeChanged event handler.

Read this blogpost: http://marcominerva.wordpress.com/2013/10/16/handling-visualstate-in-windows-8-1-store-apps/

It describes how to determine current Visual state in windows 8.1

Answer 2

In Windows 8 a page have 4 predefined view states, Snapped , Filled, FullScreenLandscape and FullScreenPortrait. To know the view state you have to use ApplicationView.Value that returned one of 4 states and then you have to invoke VisualStateManager.GotoState () passing as parameter the name of the state.

Now in windows 8.1 there are no predefined view states and value property of the ApplicationView has been deprecated. Now the window size is more fluid and the user can resize the width of the space occupied by the application in multi app mode , therefore the decisions of the window design must take according to the size of the window that holds the application. When the event SizeChanged is triggered should call for current window information using ApplicationView.GetForCurrentView, This function returns a ApplicacionView and we can use properties like Orientation, IsFullScreen, AdjacentToLeftDisplayEdge, AdjacentToRightDisplayEdge to make decisions, also is neccesary determine the size of the window.

To find the width of the screen there are two ways.

We can access the parameter of type WindowSizeChangedEventArgs of the WindowSize event and then invoke e.Size.Width.

We may also use Window.Current.Bounds to find out the size of the window.

We also have to update the design of the window in the OnNavigatedTo method page because when you push the button back not trigger the SizeChanged event and if the current resolution is not the same as he had the previous page when it was loaded, then would not have the VisualState suitable.

I leave an example of possible solution

public class MainPage:Page
{
    public MainPage()
    {
        this.Loaded += page_Loaded;
        this.Unloaded += page_Unloaded;
    }

    private void page_Loaded(object sender, RoutedEventArgs e)
    {
        Window.Current.SizeChanged += Window_SizeChanged;
    }

    private void page_Unloaded(object sender, RoutedEventArgs e)
    {
        Window.Current.SizeChanged -= Window_SizeChanged;
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        UpdateVisualState();
    }

    private void Window_SizeChanged(object sender, WindowSizeChangedEventArgs e)
    {
        UpdateVisualState();

    }

    private void UpdateVisualState()
    {
        var visualState = string.Empty;
        var applicationView = ApplicationView.GetForCurrentView();

        if (applicationView.IsFullScreen)
        {
            if (applicationView.Orientation == ApplicationViewOrientation.Landscape)
                visualState = "FullScreenLandscape";
            else
                visualState = "FullScreenPortrait";
        }
        else
        {
            var size = Window.Current.Bounds;

            if (size.Width == 320)
                visualState = "Snapped";
            else if (size.Width <= 500)
                visualState = "Narrow";
            else
                visualState = "Filled";
        }

        VisualStateManager.GoToState(this, visualState, true);
    }
}