MvvmCross UWP SplitView

With the new UWP platform to create universal windows app, we now also have a new control called the SplitView.

This control allows us to ‘split’ a page in 2 parts, a left part that is a pane, mostly used for showing a navigation menu. And a right part where we will be loading our content pages.

Microsoft has created a nice demo app on how you could set this up! To be able to load views in only the right part of the SplitView, we need to use a Frame.
Complete demo can be found here https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlNavigation/cs

All good and well, but what when we want to use this setup in our cross platform environment? In other words what do we need to do in our UWP project when we are building it using Xamarin and MvvmCross? For reference we are talking about using a PCL project ( for cross platform use ) and a UWP native project using that PCL, all wired up with MvvmCross.
The basis of this setup came from this blogpost: http://stephanvs.com/implementing-a-multi-region-presenter-for-windows-10-uwp-and-mvvmcross/

We’ll only be focussing on the UWP part, because setting up MvvmCross should be ok for people who know MvvmCross 🙂
When your project is created, we’ll set up a main page where we implement our SplitView.
I’ve added a FirstView and it inherits from MvxWindowsPage, it contains the SplitView with a Frame in the content part. Import thing to note here is that we are providing a name for the Frame, called FrameContent, this will define our MultiRegion.

Nothing fancy so far. But in the code behind of this View we need to add a property called AppFrame, because that will be used later on to enable the page loading in the defined frame. So just add the following in the code behind:

Now for the actual page loading, we will need to override the View Presenter creation of MvvmCross, this is done in the Setup.cs of the UWP project. Because instead of creating normal MvvmCross views, we need a MultiRegionView.
So add the following override in your Setup.cs file:

Last thing to do is indicate what views need to be loaded inside the frame, you do this by adding a MvvmCross attribute above your View definition. So if I want SecondView to be loaded in the region, I just add the following above the class definition of the view in code behind:

This will tell MvvmCross to load the complete view in a Region called FrameContent and like we said earlier, this is the name of our Frame we definied in our FirstView.
Now each time when you navigate to this view by using the MvvmCross viewmodel navigation, it will be shown inside the frame of your SplitView!

That’s it, not that hard actually 😉
A complete demo app of this can be found on my GitHub here https://github.com/Depechie/MvvmCrossUWPSplitView

3 thoughts on “MvvmCross UWP SplitView”

  1. Hello
    Thanks for this. It works great in UWP.
    But how can I do somethign similiar in iOS and Android?
    Can you give me any pointers?

    Thansk a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *