Developing Windows Store apps with Caliburn Micro Part 1: setup and first view

I have been developing Windows Store apps for some time. I have always used MVVM, but mostly “my own” MVVM. I have finally decided to use a “real” MVVM framework and I have chosen Caliburn Micro, because I did not like MVVM very much. In this article I am going to show you how to use Caliburn Micro, Unity and Fody to develop Windows Store apps.

Caliburn Micro

Caliburn Micro is a small, yet powerful framework, designed for building applications across all Xaml Platforms. With strong support for MVVM and other proven UI patterns, Caliburn.Micro will enable you to build your solution quickly, without the need to sacrifice code quality or testability.

Unity

When I started with Calibun Micro I discovered an article by Thomas Baker about using Unity as DI container with Caliburn Micro. His article also contains code that makes it easy for you to save and load state when the app gets suspended. With his permission, I have created a Nuget package from his code, this article is going to use this package.

Fody

I have been using Fody with Windows Phone and Windows Store apps for some time now. I especially use the INotifyPropertyChanged weaver I wrote about earlier. Check the article for more information if you are not already familliar with Fody.

Application setup

Let’s start buidling a simple demo application. This demo application will show you how little code you need to write to get something done when using the mentioned libraries.

Create a Blank App. Add the Caliburn.Micro.Unity.WinRT package from Nuget. It will install all the dependencies you need. Install PropertyChanged.Fody from Nuget. Next you need to hook up PropertyChanged.Fody with Fody. Open FodyWeavers.xml and change it to

<?xml version="1.0" encoding="utf-8"?>
<Weavers>
  <PropertyChanged EventInvokerNames="NotifyOfPropertyChange" />
</Weavers>

PropertyChanged.Fody now knows that it should call the NotifyOfPropertyChange method from Caliburn Micro when a property gets changed. Let’s do some cleanup next. Delete MainPage.xaml, rename the Common folder to Resources and create a few additional folders:

• Views
• ViewModels
• Data
• Converters
• Services
• Code

Next make you app inherit from CaliburnUnityApplication by changing App.xaml to

<code:CaliburnUnityApplication
    x:Class="Fraus.WordTrainerBasic.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    xmlns:code="using:Caliburn.Micro.Unity.WinRT.Code">

    <code:CaliburnUnityApplication.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/StandardStyles.xaml"/>                
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </code:CaliburnUnityApplication.Resources>
</code:CaliburnUnityApplication>

and cleaning up and changing App.xaml.cs to

sealed partial class App : CaliburnUnityApplication
    {        
        public App()
        {
              
            this.InitializeComponent();
        }

        protected override async void OnLaunched(LaunchActivatedEventArgs args)
        {            
            if (args.PreviousExecutionState != ApplicationExecutionState.Running)
            {
                //first View to navigate to goes here            
            }
        }
    }

First ViewModel

Now you can create your first ViewModel and your first View. Caliburn Micro uses a naming convention to pair a ViewModel and a View. Create a new class called MainViewModel in the ViewModels folder. Make the class inherit from ViewModelBase and implement the default constructor:

create a new string property called Title. Add the ImplementPropertyChanged attribute to the class. This makes NotifyPropertyChanged.Fody call the NotifyOfPropertyChange whenever any of the properties (just Title for now) changes. Assing some text to the Title property in the constructor:

[ImplementPropertyChanged]
public class MainViewModel: ViewModelBase
{
  public string Title { get; set; }

  public MainViewModel(INavigationService navigationService) : base(navigationService)
  {
    Title = "Caliburn Demo";
  }
}

First View

Now create a view for the MainViewModel as a Blank Page. According to the naming conventions, it needs to be called MainView and created in the Views folder. Add a TextBlock to the View. To bind the text of this TextBlock to the Title property, you could use Text=”{Binding Title}”. This works just fine but you do not have to do it. Just name the TextBlock the same as the property you want it to bind to (in our case Title):

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  <TextBlock x:Name="Title" />
</Grid>

Navigating to the view

There is only one more thing left to do. You need to tell the framework to navigate to the MainView when the app starts. This is done in the OnLaunched method in App.xaml.cs

sealed partial class App : CaliburnUnityApplication
    {        
        public App()
        {
              
            this.InitializeComponent();
        }
 
        protected override async void OnLaunched(LaunchActivatedEventArgs args)
        {            
            if (args.PreviousExecutionState != ApplicationExecutionState.Running)
            {
               await DisplayRootView(typeof(MainView));        
            }
        }
    }

Run you app

Hit F5 and you will see your app start, navigate to MainView and show the text from the Title property in this view.

You can find the code on Github and stay tuned for Part 2!