Caliburn.Micro & Windows 10 UWP apps

As a big fan of Caliburn.Micro, I’m happy to see that the team is working on extending their platform support to Windows 10, Xamarin, Xamarin.Forms and so on… An official release is not available yet, but I couldn’t wait to try the UWP support.

So I created a Blank Universal Windows app:

 

I added the Caliburn.Micro package through NuGet(don’t forget to check the Include prerelease checkbox):

And then replaced the default App.xaml file with the following code:

	<cm:CaliburnApplication
	x:Class="MyFirstUWP.App"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:cm="using:Caliburn.Micro"
	RequestedTheme="Light">
	</cm:CaliburnApplication>

view raw App.xaml hosted with ❤ by GitHub

	public sealed partial class App
	{
	private WinRTContainer _container;
	private IEventAggregator _eventAggregator;
	public App()
	{
	InitializeComponent();
	}
	protected override void Configure()
	{
	_container = new WinRTContainer();
	_container.RegisterWinRTServices();
	_container
	.PerRequest<ShellViewModel>();
	_eventAggregator = _container.GetInstance<IEventAggregator>();
	}
	protected override void OnLaunched(LaunchActivatedEventArgs args)
	{
	// Note we're using DisplayRootViewFor (which is view model first)
	// this means we're not creating a root frame and just directly
	// inserting ShellView as the Window.Content
	DisplayRootViewFor<ShellViewModel>();
	}
	protected override void OnSuspending(object sender, SuspendingEventArgs e)
	{
	}
	protected override object GetInstance(Type service, string key)
	{
	return _container.GetInstance(service, key);
	}
	protected override IEnumerable<object> GetAllInstances(Type service)
	{
	return _container.GetAllInstances(service);
	}
	protected override void BuildUp(object instance)
	{
	_container.BuildUp(instance);
	}
	}

view raw App.xaml.cs hosted with ❤ by GitHub

The only thing missing is a View and a corresponding ViewModel. As Caliburn prefers convention over configuration, we can create a Views folder and put a ShellView.xaml there, the corresponding viewmodel is placed in the ViewModels folder:

	<Page
	x:Class="MyFirstUWP.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="120">
	<SplitView.Pane>
	<StackPanel Background="{ThemeResource AccentBrush}">
	</StackPanel>
	</SplitView.Pane>
	<SplitView.Content>
	<Grid>
	<Frame cm:Message.Attach="[Event Loaded] = [SetupNavigationService($source)]" DataContext="{x:Null}" />
	<Button Click="OpenNavigationView" Content="&#xE700;" FontFamily="{ThemeResource SymbolThemeFontFamily}" VerticalAlignment="Top" Margin="24" />
	</Grid>
	</SplitView.Content>
	</SplitView>
	</Grid>
	</Page>

view raw ShellView.xaml hosted with ❤ by GitHub

	/// <summary>
	/// An empty page that can be used on its own or navigated to within a Frame.
	/// </summary>
	public sealed partial class ShellView : Page
	{
	public ShellView()
	{
	this.InitializeComponent();
	}
	private void OpenNavigationView(object sender, RoutedEventArgs e)
	{
	NavigationView.IsPaneOpen = true;
	}
	}

view raw ShellView.xaml.cs hosted with ❤ by GitHub

	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);
	}
	}

view raw ShellViewModel.cs hosted with ❤ by GitHub

That’s all we need to get started!