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.
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.
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
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
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.
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.
Using Codebehind to detect window resize to switch visual states
Open HubPage.xaml.cs in Visual Studio 2013 preview and add two namespaces
Subscribe and unsubscribe from the SizeChanged event with an event handler
Create the WindowsSizeChanged event handler to do the work
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.
Hub app on the Left and Right edges of the screen, Portrait mode is shown above