Welcome back to the Windows 8 Development tutorial series. Last time we started with a simple Windows 8 “Hello World” app.

Today I will teach you how to implement a split view functionality to your app. This is a requirement to get your app published in the Windows Store.

First of all, what is Split View?

A split view is a great functionality that enables the user to “Snap” your app on the left of right side of the screen, making it possible to use your app simultaniously to using another app.

As you can see in the image above, the app runs normally showing one particular design. When the user decides to snap the app, the entire user interface layout changes.

This is all handled by something called States. You can decide what state the app (controllers) is on, and change the behaviour based on that. So first of all, we need to handle an event that reacts when the user changes the size of the app – meaning that the user rotated the device (Landscape –> Portrait) or snapped it to one of the sides.

Once this works, we must write some logic that sets the controllers to the right state. Using Blend, this will be easy. You can add as many states as you like, record “animations” that will happen when the state is changed (what controllers will be visible, and what will be invisible ++).

Let’s get started.

First of all, you need an app that should implement snapping. It can be anything, a simple template app with a single textbox in it or whatever. I will use the app that we created in the previous tutorial. Source can be found on the bottom of the tutorial.

The first thing we need to do is to listen to the event that reacts when the app/page that will have snapped mode – is loaded. In this case, it’s the MainPage. This app only got one page, but if you have more, you should add this to all of them.

   1: public MainPage()

   2: {

   3:     this.InitializeComponent();

   4:     Loaded += MainPage_Loaded;

   5: }

This will execute the function “MainPage_Loaded” once the app is ready and loaded (happens when the user starts the app).

The MainPage_Loaded function at this time will only add a new event handler that will react when the user changes the resolution of the app (Landscape, Portrait, Snapped).

If you want your app to be published in the marketplace, it must implement Landscape mode (default) and Snapped.

   1: void MainPage_Loaded(object sender, RoutedEventArgs e)

   2: {

   3:     Window.Current.SizeChanged += Current_SizeChanged;

   4: }

Now, before implementing the SizeChanged function, we need to add a list that will containg the controller that will change view state when the resolution is changed. When the app is loaded, we must take the controller (the page) and store it in a list, so we can change the view state on it at a later stage.

As a global variable in the MainPage.xaml.cs file, add the following:

   1: private List<Control> _layoutAwareControls;

Now, we must populate this list when the Loaded-event is executed.

   1: void MainPage_Loaded(object sender, RoutedEventArgs e)

   2: {

   3:     var control = sender as Control;

   4:     if (control == null) return;

   5:  

   6:     // Set the initial visual state of the control

   7:     VisualStateManager.GoToState(control, ApplicationView.Value.ToString(), false);

   8:     if (this._layoutAwareControls == null)

   9:     {

  10:         this._layoutAwareControls = new List<Control>();

  11:     }

  12:     this._layoutAwareControls.Add(control);

  13:  

  14:     Window.Current.SizeChanged += Current_SizeChanged;

  15: }

What we are doing here is to set the view state to what state the device is having when the app is loading using the ApplicationView.Value. This contains the current state of the device at all time. Next, we add the control that will be aware of the layout changes.

Now we are able to change the state at any time since we have stored the controller in a list. This means that we are ready to implement the SizeChanged evnet handler:

   1: void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)

   2: {

   3:     string visualState = ApplicationView.Value.ToString();

   4:  

   5:     if (this._layoutAwareControls != null)

   6:     {

   7:         foreach (var layoutAwareControl in this._layoutAwareControls)

   8:         {

   9:             VisualStateManager.GoToState(layoutAwareControl, visualState, false);

  10:         }

  11:     }

  12: }

This gets the new state that the device is in, and sets the controls in the list to the new state.

Now that the app is handling the states correctly, we just need to add the states. Open the project in Expression Blend. What we will do now is to add the UX that will be visible when the app enters the snapped view.

Now, add a new TextBlock on the top left side of the app that got the text “Snapped Mode”. Click on the new TextBlock and set the Visiblity property to “Collapsed”.

Then, go the the States tab and add the following states:
– Snapped
-FullScreenLandscape
-Filled

It’s important that you keep these names as these are the same names that the ApplicationView.Value contains.

You can also add more, based on you’r needs. You can always go into a custom state by writing the state directly instead of using the ApplicationView.Value property.

What we want to do is to hide the other layout of the app that is visible under the FullScreenLandscape-state, and make the snapped UX visible. In this case, i just want to hide everything in snapped mode and show a new controller, a TextBlock with the text SnappedMode.

Click on the Snapped View State and make sure it’s recording (you can see this by the red light in front of the state):

Now, click on the new textBlock in the UX Tree:

and change the Visibility-property to Visible:

Then, set the Visibility-property on the other controllers (while in record mode) and set it to Collapsed. In my case this is the HeaderTextBlock, WriteHereTextBox,ClickMeButton and backButton.

Stop the recording by clicking on the red recording light.

Build and run the application. First the app will load normally and show you the design you made for landscape mode:

then, drag the app to the left side of the screen to snap it:

Thats it!
I have attached the HelloWorld example with the source before and after these changes. There are other changes in the example that we will cover in the next tutorial (Settings charms, back button and so on)

Enjoy!

Source:
HelloWorldApp.zip