The SplitView is, in my opinion, the most important control in the new Windows 10 universe. Getting it to work with version 2.0.2 of Caliburn.Micro is not an option but you can as of 3.0.0 Beta 1. Let’s walk through it.
The inspiration from this post came from working through the HelloUWP sample project. I’ll use what I learned from this sample project to demonstrate how to use the SplitView with Caliburn.Micro to display a bunch of different view models. You can download the full code here.
If you are new to Caliburn Micro in UWP, check out my previous post on how to integrate it in your project before you start!
Update 14 March 2016: You can use Caliburn Micro 3.0.0 (stable). You no longer need to use the Beta version.
Quick word about the SplitView
The SplitView has two main parts: the pane and the content. The pane contains your menu options and the content, as the name implies, is what you use your menu to display or manipulate. For example: if you have an option called “Users” in the pane, then show your Users page in the content.
The SplitView UI guidelines are worth a read. There’s more detail in the Microsoft documentation but I find their example quite poor.
[caption id="attachment_105” align="aligncenter” width="300”]
Image by Microsoft[/caption]
I’m assuming you want your menu options to show different pages - that’s the point of this article. If you’re a Caliburn.Micro user, you want to do it by calling your ViewModels, with minimal code-behind while also having support navigation - back and forward. Thankfully 3.0.0 beta 1 has what you need.
Setting up your Project with 3.0.0 Beta 1
- Open VS 2015
- Start > New Project > Visual C# > Windows > Universal > Blank App (Universal Windows)
- Enter a name and path of your project
- Up to you if you want Application Insights. You can always add it later. Note that you need an Azure account for Application Insights
- Create folders called Views and ViewModels
- Open NuGet, get Caliburn.Micro 3.0.0 beta 1. If you don’t see it, make sure to look for prereleases
Create some Views and ViewModels
So at this point I want to create three views, with their accompanying ViewModels. I’m going to keep it very simple. In two of the pages I’ll just display some unique and only display some text but in the third I’ll add some buttons and a textbox - just to demonstrate CM is working. The ViewModels inherit from Screen. So nothing fancy. Checkout the sample project if you haven’t already.
One thing to point out in this sample code is that we’re using the “Overlay” style of SplitView, meaning the pane is hidden by default. That’s why we have a separate button to open it. You don’t need to do this in your project. I’m just too lazy, in my code, to set it up properly with some icons.
ShellView
The one key thing here, which the HelloUWP sample demonstrated, is their “ShellView”. The purpose of this view is to hold the SplitView. From here we call the other views from this view.
[code language="xml”] <Page x:Class="Caliburn.Micro.HelloUWP.Views.ShellView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cm="using:Caliburn.Micro" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Page.Resources> <SolidColorBrush x:Key="AccentBrush" Color="#FF34495E" /> </Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <SplitView x:Name="NavigationView" DisplayMode="Overlay" OpenPaneLength="150"> <SplitView.Pane> <StackPanel Background="{ThemeResource AccentBrush}"> <Button x:Name="PleaseGoBack" Content="Go Back" Margin="24" /> <Button x:Name="ShowDevices" Content="Device Specific Views" Margin="24" /> <Button x:Name="SecondView" Content="My Second View" Margin="24" /> <Button x:Name="ThirdView" Content="My Third View" Margin="24" /> </StackPanel> </SplitView.Pane> <SplitView.Content> <Grid> <Frame cm:Message.Attach="[Event Loaded] = [SetupNavigationService($source)]" DataContext="{x:Null}" /> <Button Click="OpenNavigationView" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" VerticalAlignment="Top" Margin="24" /> </Grid> </SplitView.Content> </SplitView> </Grid> </Page> [/code]
The key thing to pickup above is the Frame element. We’re define the content of the SplitView to be a Frame. Our pages will live within it and that means we can then navigate forward/back to other pages. The SetupNavigationService method registers the frame in the WinRTContainer object, as we’ll see below.
[code language="csharp”] using Windows.UI.Xaml.Controls; using Caliburn.Micro;
namespace UWP_CM3Beta1.ViewModels { public class ShellViewModel : Screen { private readonly WinRTContainer _container; private INavigationService _navigationService;
public ShellViewModel(WinRTContainer container) { _container = container; }
public void SetupNavigationService(Frame frame) { _navigationService = _container.RegisterNavigationService(frame); }
public void PleaseGoBack() { if (_navigationService.CanGoBack == false) return;
_navigationService.GoBack(); }
public void OpenFirstView() { _navigationService.For().Navigate(); }
public void OpenSecondView() { _navigationService.For().Navigate(); }
public void OpenThirdView() { _navigationService.For().Navigate(); } } } [/code]
End Result
Here’s what my app looks like:
Questions
I’ll be honest - there are a few things I don’t quite get with this release. The main one is why I didn’t need to add Behaviours SDK in order to get it working. EDIT 02 Sept 2015 - I confirmed we don’t need to add this anymore to our projects!