WinRT Settings with Caliburn.Micro

One advantage of developing WinRT applications is that we can implement standard Windows 8 contracts such as Search, Share, or Settings that provides consistent app experience to our users.

Most applications, Metro App or not, allows user to view or modify application settings. In WinRT development especially with XAML/C# , it’s not straight forward as we have to create our own settings flyout as well as handle everything from creating SettingsCommand to closing our settings area. Callisto, a control toolkit for Windows 8 XAML applications created by Tim Heuer, does help by providing a way to create SettingsFlyout and SettingsManagement.

It’s even easier if your app is following MVVM pattern and using Caliburn.Micro as it provides an integrated way to implement Settings charm. Indeed, Caliburn.Micro also utilizes Callisto controls.

You can get Caliburn.Micro using NuGet (Callisto is also installed if your app have not installed it already).

I won’t get into detail about how to have your app implement MVVM pattern with Caliburn.Micro. Here are some links that should help you get started.

In this post, I will add About option into the Settings charm. I start by adding AboutViewModel and AboutView into the project. Caliburn.Micro utilizes convention over configuration pattern, so I can just create the view and view model, and let Caliburn.Micro links them together without explicitly specify it.

The code is pretty simple.

After we have View and View Model ready, we can just register the setting service and About command with AboutViewModel.

Let’s see the app in action:




That’s it. You don’t need to worry about creating a popup wrapping user controls and handle their life cycle. Implementing settings charm won’t pollute your nice and clean MVVM WinRT app anymore 🙂 .

Note: if you want to customize the background header of the setting dialog, you can do something like this.


6 thoughts on “WinRT Settings with Caliburn.Micro

  1. Pingback: Payload contains two or more files with the same destination path | Cyan By Fuchsia

  2. Do you know, if one can navigate directy into the “About” View, instead of first opening the charm and then select “About”?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s