Split view

Two panes app, for example, an app which constructed with Menu tab area and contents area can create super easy if using the Split view control.
This article explains how to relate the View Model of the Menu and Contents to the app which used in previous article which focuses to xBind binding, using MVVM design pattern.

>>Sample solution for Visual Studio 2017

>>Visual Studio 2017 community is free

・XAML

There is two XAML files structuring the app. I want to show you at the first XAML is displayed as contents area. And another one provides the Menu area.
The Split view control provides the feature which keeps visible or invisible area can change dynamic toggle. So when the Menu list clicked, then the Selection Changed event handler of the List navigates any view model to target frame.

If needs the copy, use the GitHub Gist at end of this article.

The SplitView.Pane of the Split view holds the Menu list of the app, the pane is opened as inline, so other area pushed to remaining area in the right hand of the Application window. The contents is put into the ContentsFrame of this right area.

・XAML of contents

Another one xaml file provides contents.
Set xClass to the class of any content, And TextBox control needs TwoWay binding if it’s put value by user.

・XAML.cs

For explaining the view model, It needs explain several classes.

The Context class of the content page needs instancing at code behind of the page. This class extends from Page class provided by .NET Framework, and the keyword ‘ViewModel’ bind to data context of the page, so it’s specified class type and input instanced object of any class. This sample use the Content class. This class is displayed when the Menu list selection changed.

It’s same as the Context page,It needs instancing at code behind of the MainPage. The keyword ‘ViewModel’ specified class type and input instanced object of the MainVM class.

・ViewModel

For explain, there is one view model in sample code though, it’s better that create individual class files for maintenance.

The app’s Menu is displayed by list of the MenuContext class. The class has the Title property and the Body property, the Title property is used for Menu item label, and the Body property is used for contents page.

If user click the app’s menu item, the value of the Body property pass to the ContentsFrame.Navigate() method at MenuList_SelectionChanged event handler of the page code behind. In initial timing, its selection is first item which indexed with zero(line 33 of above code).

The Content class of the content page instancing for the view model at constructor of the content page’s code behind(line 29 of Profile.xaml.cs). The class displays on app’s initial timing.

・MainPage.xaml

・Profile.xaml

・MainPage.xaml.cs

・Profile.xaml

・ViewModel