3 Comments

imageIt’s happy times for the WinRT developers: Caliburn.Micro for WinRT is here. The core parts (INPC, EventAggregator) have actually been available since the developer preview was released last year, but now Nigel Sampson and Keith Patton have done a great work and have ported the rest of the framework to WinRT. Here’s a short introduction about how to get started, aimed for those who have previous experience working with the framework.

Note: Caliburn.Micro is aimed to the XAML & C#-developers. It’s built as a class library so it cannot be used with C++.

Update 5.12.2012:The post and the sample has been updated to work with the Caliburn.Micro version 1.4.

Bootstrapper

This guide is based on the “Blank App XAML” –template. The project needs to reference the following assemblies:

  • Caliburn.Micro.WinRT
  • Caliburn.Micro.WinRT.Extensions
  • Windows.UI.Interactivity

After creating a new solution, the first thing we need is to make the Caliburn.Micro to bootstrap the application. With other supported platforms, this is usually done with a dedicated Bootstrapper-class. But with WinRT we use a custom “Application”-class to make this happen.

Every WinRT XAML template has a class called App (in App.xaml and App.xaml.cs files). The built-in App-class inherits the Windows.UI.Xaml.Application. When Caliburn.Micro is used in WinRT, the App is replaced with a class which inherits Caliburn.Micro.CaliburnApplication. This requires two modifications. First, we change the XAML from this:

<Application 
    x:Class="caliburn_micro_winrt_getting_started.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:caliburn_micro_winrt_getting_started">

    <Application.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries>

                <!-- 
                    Styles that define common aspects of the platform look and feel 
                    Required by Visual Studio project and item templates 
                 --> 
                <ResourceDictionary Source="Common/StandardStyles.xaml"/> 
            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary> 
    </Application.Resources> 
</Application>

to this:

<cal:CaliburnApplication 
    x:Class="caliburn_micro_winrt_getting_started.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:caliburn_micro_winrt_getting_started" 
    xmlns:cal="using:Caliburn.Micro">

    <Application.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries>

                <!-- 
                    Styles that define common aspects of the platform look and feel 
                    Required by Visual Studio project and item templates 
                 --> 
                <ResourceDictionary Source="Common/StandardStyles.xaml"/> 
            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary> 
    </Application.Resources> 
</cal:CaliburnApplication>

Note that we have replaced the first and last line of the declaration. The same change must be done to code-behind:

sealed partial class App : Caliburn.Micro.CaliburnApplication 
{

Or alternatively:

sealed partial class App 
{

Our “bootstrapper” is now in place but as you can notice, the project doesn’t compile. What we need to do is to replace the code in App.xaml.cs with the initialization code required by Caliburn.Micro. As you can see, this class ends up looking like the “Bootstrapper” –class from other platforms. Here’s an example of a working App.xaml.cs:

using System;
using System.Collections.Generic;
using Caliburn.Micro;
using Windows.ApplicationModel.Activation;

namespace caliburn_micro_winrt_getting_started
{
    sealed partial class App
    {
        private WinRTContainer container;

        public App()
        {
            InitializeComponent();
        }

        protected override void Configure()
        {
            container = new WinRTContainer();
            container.RegisterWinRTServices();
        }

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

        protected override void PrepareViewFirst(Windows.UI.Xaml.Controls.Frame rootFrame)
        {
            container.RegisterNavigationService(rootFrame); 
        }

        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            DisplayRootView<MainPage>();
        }
    }
}

The bootstrapper is now in place so it’s time to build the views and view models.

The view

In our bootstrapper we defined “MainPage” as the default view. The Visual Studio template already contains the MainPage so we don’t have to implement it. What is required is the view model.

The view model

Add a class called MainPageViewModel to the project. Caliburn.Micro will automatically bind the view against this class. An instance of MainPageViewModel is created and set as the data context of the MainPage. As with other supported platforms, MainPageViewModel can be inherited from a Screen-class and also the Conductor is available:

public class MainPageViewModel : Screen 
{ 
}

At this point we’re actually all set and can start adding features like we usually do with Caliburn.Micro. Our sample app still looks rather uninteresting so let’s add something simple to the view.

Conventions

Caliburn.Micro for WinRT supports conventions like the other supported Caliburn.Micro platforms. For example the framework can automatically bind a button against a view model’s method and a text box against the view model’s string-property. Let’s add a button and an empty textbox to the MainPage.xaml:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Button x:Name="SayHello" Content="Say hello!" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
    <TextBlock x:Name="HelloText" HorizontalAlignment="Left" VerticalAlignment="Center"/> 
</Grid>

And then add the following to to MainPageViewModel:

public class MainPageViewModel : Screen 
{ 
    private string helloText; 
    public string HelloText 
    { 
        get { return helloText; } 
        set { helloText = value; NotifyOfPropertyChange(() => HelloText); } 
    }

    public void SayHello() 
    { 
        this.HelloText = "Hi from the Caliburn.Micro for WinRT!"; 
    } 
}

And we’re all set. The button named “SayHello” is automatically bound against the SayHello-method and the same happens with the textbox HelloText.

image

Conclusion

Caliburn.Micro has previously been easily the best framework to make you more productive when building apps for Windows Phone, Silverlight and WPF. And now we have the same powerful framework available for WinRT.

Links

Comments

Comment by ray ban wayfarer

ray ban wayfarer...

Many thanks a whole lot for sharing!...

Comment by cheap jordans

cheap jordans...

I will immediately seize your rss as I can not to find your e-mail subscription link or e-newsletter service. Do you have any? Kindly let me realize so that I may subscribe. Thanks....