Windows 8.1: Building Windows store apps with new Windowing modes

If you are building Windows store apps targeting Windows 8 platform, one of the features you can add is support for Snapped View.

What is a Snapped View in Windows 8?

Here’s how MSDN defines it

Snapped view: View states, including snapped view, enables two apps to run simultaneously side by side, so users can truly multitask and stay productive with your app all the time.

Screenshot (15)

To achieve the above in a XAML Windows store app you’d use a VisualStateManager to create Visual states, a state defines how your application ‘reacts’ to the size changes when user snaps it to left or right edge of the screen. When an app is in Snapped view, Windows runtime looks in the ‘Snapped’ Visual State for commands.

Here’s the snapped visual state from my open source Windows store RSS Reader app. I set a SnappedPageHeaderStyle style to Back button and Title, narrowing margins on Categories and All Items buttons and toggling visibility of Grid and List view controls.

                <VisualState x:Name="Snapped">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="btnCategories" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="135,12,0,55"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleAllItems" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="10,5,0,33"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

In the above code sample I did not include FullScreenLandscape, Filled and FullScreenPortrait visual states definitions for brevity but you can see the source code.

Here’s how the app looks like when snapped to the left edge of the screen

Screenshot (14)

No Snapped View in Windows 8.1 but..

Windows 8.1 no longer has default 320 pixels wide fixed Snapped view so users can resize their apps they way they want, the default minimum width is 500 pixels but this can be set to 320 pixels. There can also be more than one app on a screen. For more info about this see new Windowing Modes preview documentation


Adding Windowing Modes in Windows 8.1 store apps with Visual States

To show this in an example in this blog post I’ll do the following

  • Create a XAML/C# Windows 8.1 Hub store app from the built in Blend for Visual Studio 2013 preview template
  • Subscribe to SizeChanged event and use ApplicationView class in Windows.UI.ViewManagement namespace to know when user sets the app in Portrait orientation or Left/Right edge of the screen
  • Create three visual states to set Visibility=”Collapsed” on the Hub control and one ‘Normal’ Fullscreen visual state
  • Call visual states in each windowing mode to show/hide the Hub control

With Blend for Visual Studio 2013 Preview, File > New Project > Hub App (XAML) name it HubApp and click OK. This gives a empty template app which follows the Hub Design pattern.

Screenshot (16)

More info on creating Hub Pages with Visual Studio 13 preview

Creating Visual States

See that huge Hub placeholder? I’ll hide it when the app is not running full sreen, to do it I created a VisualStateGroup then two visual states Left and Fullscreen. Selected Left visual state, selected Hub Control and set it’s Visibility to Collapsed.

imageRight-clicked on Left visual state select Copy to State > New State twice, renamed the new visual states to Portrait and Right, Now I have four visual states.


Using Codebehind to detect window resize to switch visual states

Open HubPage.xaml.cs in Visual Studio 2013 preview and add two namespaces

using Windows.UI.Core;
using Windows.UI.ViewManagement;

Subscribe and unsubscribe from the SizeChanged event with an event handler

   protected override void OnNavigatedTo(NavigationEventArgs e)
            Window.Current.SizeChanged += WindowSizeChanged;


        protected override void OnNavigatedFrom(NavigationEventArgs e)
            Window.Current.SizeChanged -= WindowSizeChanged;


Create the WindowsSizeChanged event handler to do the work

private void WindowSizeChanged(object sender, WindowSizeChangedEventArgs e)
            ApplicationView currentAppView = ApplicationView.GetForCurrentView();
            if (currentAppView.AdjacentToLeftDisplayEdge)
                VisualStateManager.GoToState(this, "Left", false);
            if (currentAppView.AdjacentToRightDisplayEdge)
                VisualStateManager.GoToState(this, "Right", false);
            if (currentAppView.IsFullScreen)
                VisualStateManager.GoToState(this, "Fullscreen", false);

            if (currentAppView.Orientation == ApplicationViewOrientation.Portrait)
                VisualStateManager.GoToState(this, "Portrait", false);

To know the current size I use ApplicationView class which is in Windows.UI.ViewManagement namespace in the WindowSizeChanged event handler. Using the Orientation and new AdjacentToLeftDisplayEdge, AdjacentToRightDisplayEdge properties of this class I check when user has snapped the app in Left or Right edge or put it between two apps in a Portrait mode, I then switch the visual states I created earlier which hides the Hub control.

The Result

Hub app on the Left and Right edges of the screen, Portrait mode is shown above

image image