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:

image

image

image

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.