How to Create a Windows 8 Settings Pane in XAML

There are five charms in Windows 8: search, share, start, devices, and settings. The reason for the charms is to create a single point of invocation for common tasks. What could be more common and more ubiquitous than settings or options or personalization or preferences? But how do we leverage the setting charm in our Windows 8 apps?

Note: The settings charm is not for desktop apps.

UPDATE 2/21/14

It appears that with Windows 8.1, developers will get a conversion exception in its CommandsRequested handler when the SettingsPane initialized the control. The workaround is to supply a GUID string as the item key.

// Identify control for StartPage settings
new SettingsHelper()
    .AddCommand<StartPageSettingsDisplay>
    ("Settings",
     "{E285A7C7-9101-4E4E-8826-38E0CC7EE1CE}");

When the user invokes the settings charm by tapping it, the operating system raises an event in your app. Your event handler updates the event arguments with the different setting command links you want to display in the native settings dialog. When the user taps one of those commands, you can handle the event and reveal a flyout.

In XAML, the flyout is actually accomplished with the popup control. Unlike the flyout in JavaScript, however, the XAML popup must be manually implemented for placement, dismissal, animations, et al. As a result, I wrote the SettingsHelper which I demonstrate in the following video. This self-contained class handles all that and makes settings a matter of one or two lines.

Here we go!

In the video above, I implement my SettingsHelper to show settings in a Windows app. Take my code, learn from it, steal from it, use it, whatever helps most! If you use it, send me a note and let me know!

One more thing

I would be remiss not to mention Callisto on GitHub and available through NuGet in Visual Studio. This is a set of controls (including Flyout) that do a lot of what my helper does. It provides other controls (like DateControl) and is a fine contribution from Tim Heuer here at Microsoft.

Best of luck!