How to add a settings menu (Flyout) in a Windows 8 Metro-style app

In Windows 8 development, there are some differences between the Javascript and XAML APIs. Some things are available in JS but not in XAML and vice versa. One example is the SettingsFlyout control. There is no SettingsFlyout control for creating a settings menu item in XAML, although that exists in JS. The de facto solution is to create your own custom page and show/dismiss it according to the settings charm events. As this is something that basically every Metro app (or “Windows 8 style application“) has to include, it’s fortunate that there’s now a bit less tiresome way of doing this.

Callisto control suite

I’m implementing the settings menu by leveraging SettingsFlyout control, available in Callisto control suite. Callisto is a community project led by Tim Heuer. The suite contains awesome controls for Metro style apps written in XAML. Download and install Callisto from here. After you’re finished, you can start playing around with Callisto, and implement the header menu using my sample code below.

Read full article here