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.

Code sample

In Solution Explorer, right-click “References” and then Add Reference to add a reference to Callisto to the project. Callisto can be found in Windows –> Extensions.

App.xaml.cs:

using Windows.UI.ApplicationSettings;

using Callisto.Controls;

using Windows.UI;

Now, in the onLaunched() method, register handler for CommandsRequested events from the settings pane:

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

In the event handler:

void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

{

// Add a command

var pref= new SettingsCommand("preferences", "Preferences", (handler) =>

{

var settings = new SettingsFlyout();

settings.Content = new PreferencesUserControl();

settings.HeaderBrush = new SolidColorBrush(Colors.Blue);

settings.Background = new SolidColorBrush(Colors.Blue);

settings.HeaderText = "Preferences";

settings.IsOpen = true;

});

args.Request.ApplicationCommands.Add(pref);

}

Finally, create a new user control (in this example, PreferencesUserControl) and add your settings content there.

Note that in this sample, we’re merely creating the base of the settings menu UI and have no actual settings saving/loading mechanism. Also in an actual app, you should check for duplicates before registering the app command(s), as the onLaunched might be called from a couple of different scenarios (such as search).

Download the full sample code here.

Post By Karl Ots (33 Posts)

Cloud, mobile and usability enthusiast. Windows Azure Insider. Official Windows 8 and Windows Phone 8 Trainer.

Connect