A few days ago I blogged about our new Dashboard sample included in WPF Elements. The sample demonstrates how to create a sales dashboard using a few of our WPF controls like the Data Grid, Time Explorer and Charts. It was built with the help of the Caliburn Micro framework to give it a robust MVVM architecture. In this blog post I’ll walk you through a simple tutorial for getting started with using Caliburn Micro in a WPF application. This is just part 1 in a series I will be writing so I hope you’ll subscribe and follow along with me as we build up to a useful application.

Step 1: Getting Started

Caliburn Micro targets .NET framework 4.0, so you’ll need Visual Studio 2010 to create the application. Start by creating a new WPF Application and add a reference to Caliburn.Micro.dll and System.Windows.Interactivity.dll which come with the Caliburn Micro download. Since Caliburn Micro is going to take care of creating the window for you, delete MainWindow.xaml and remove the StartupUri attribute from App.xaml. App.xaml will now look like this:

Caliburn Micro promotes a View-Model-First approach, so the next step is to add a class to represent the view model. Large applications can have many view models, each of which provides the logic for a different view. Below is a code example of an empty view model. Since this tutorial is focused on simply getting started with incorporating Caliburn Micro into a WPF application, we are not going to make the view model do anything for now.

The first thing to notice here is the name of the class. Caliburn Micro expects a particular naming convention so it can hook up the view model to the appropriate view. The class name of a view model should end with “ViewModel”. What you put in front of “ViewModel” is up to you. The other thing to notice here is that this class extends the PropertyChangedBase. This is provided by Caliburn Micro and makes it easy to raise property change notifications without needing to implement INotifyPropertyChanged in all your view models. Although this example view model doesn’t do anything, I’ve included the PropertyChangedBase as good practice. When adding properties to the view model, it will come in handy.

Step 3: The View

In order to display something in the window, you’ll need to create a view for the view model created in the previous step. This is as simple as adding a new UserControl to the project as seen below. I should point out again that Caliburn Micro expects a particular naming convention so it can hook up the view to the appropriate view model. View names should end with “View” and start with the same name you used for the view model. So for my example here, “AppView” is the view for rendering the “AppViewModel”. In the code below I have also set the width, height and background of the grid so that when you run this application you can see that it is working correctly.

The bootstrapper is the mechanism used to incorporate Caliburn Micro into your application. It is also a place where you can configure the framework for the needs of your application. For the purposes of this tutorial, I have used a very simple bootstrapper implementation seen here:

Caliburn Micro has 2 different bootstrappers available. The one used above lets you set the generic type to be the view model that you want to be used at startup. The last step is to tell the application to use the bootstrapper. This is done by adding your bootstrapper to a resource dictionary in App.xaml. After doing this, App.xaml will now look something like this:

Now when you run up the application, you’ll see a small window with a light blue background. Your application is now primed and ready to take advantage of all the great support provided by Caliburn Micro. It’s easy to get help for using this framework due to its growing community. You can also look through the documentation on CodePlex.

Hello. First I want to thank you for getting this out and made very simple. Next I would like to ask: Normal practices tell me to create layers in my app for the ViewModels, Views, and Models. Doing this in the sample gives me an error stating that the Bootstrapper cannot locate my view(named as explained above). To serve as an example: View name is MainView; ViewModel name is MainViewModel.

So to my question: Do the views and viewmodels need to be in the same base folder in order for this to correctly work?

Thanks!

MikeJan 23rd, 2014

Hello Mike

I don’t think they need to be in the same base folder. I usually put the views and the view-models in separate folders somewhere in the project. Did you remove the Class=”…” property from the user control xaml code? Doing so can cause this kind of exception. If you still see this exception, you can send the project to jason@mindscape.co.nz and I’ll see if I can find the solution.

JasonJan 23rd, 2014

Hello Jason,
I really thank you for providing this great tutorial and making the caliburn framework so easy to understand. It was really hard for me to understand this framework as there we no much tutorials. But thumps up for this tutorial. Hope to get such kind of tutorials from you even in future.

Nomesh GajareApr 10th, 2014

Thanks Nomesh

I’m glad the tutorial has helped you work with Caliburn Micro! I hope our other tutorials in the Caliburn Micro tutorial series will help you too.

JasonApr 11th, 2014

Hello Jason,
I would like to en-light a point in the earlier comments by Mike which which states
“Do the views and viewmodels need to be in the same base folder in order for this to correctly work?”.

I too made the seperate directory for view and viewmodel and it does not works for me too. I get the error as Bootstrapper cannot locate view.
Can you please explain what might be the problem and how to fix it.

Nomesh GajareApr 11th, 2014

Hello Nomesh

If you added the view and view-models directly into the different folders (as opposed to dragging them from a common folder), then your view and view-model are probably in different namespaces. I think they need to be in the same namespace in order for Caliburn Micro to match them up. Try setting their namespaces to be the same to see if that solves the problem. If not, try add the view and view-model to the same folder to see if there is some other problem involved. If your project is simple so far (or if you can build a simple repro project) fell free to send it to jason@mindscape.co.nz and I’ll take a quick look.

JasonApr 13th, 2014

Hi there,

I had the same issue as Mike and Nomesh and moving files out to root from individual folders did not help. What worked for me was when I renamed my Bootstrapper implementation from xxxBootstrapper.cs to AppBootstrapper.

Perhaps its the name CaliburnMicro expects ??

ashxMay 5th, 2014

Hello ashx

I have projects with custom bootstrapper names, so I don’t think that is an issue. I’m not sure how this solved your issue, unless you had “AppBootstrapper” mentioned in App.xaml while your bootstrapper class had a different name. Good that you have it working though!

JasonMay 6th, 2014

Hi,
i downloaded your project and somehow i have the same issue as Mike and Nomesh, even with your project.

Error 1 The name “AppBootstrapper” does not exist in the namespace “clr-namespace:CaliburnMicroApp”.

Can you pls tell me how to fix it?
Im a bit confused, because its obviously in the same namespace :(

BiberiumJul 3rd, 2014

Hello Biberium

When I download the application from this blog and run it as is, everything seems to work fine. Did you make any changes, such as pointing it at the latest version of Caliburn Micro? That would most likely cause issues, otherwise, I’m not sure what the problem could be sorry.