Adding a settings flyout to your application has become much simpler with the release of the Windows 8.1 preview and the preview of Blend for Visual Studio 2013. The settings flyout is now supported out of the box and can be added to your project by using an item template.

Adding a Settings Flyout

A settings flyout can be added to your project just by adding a new item. You can do this by right-clicking on a project in the project panel and select Add New Item. From the list on the New Item dialog select the Settings Flyout. You have to give the flyout a name. I named it “DemoSettingsFlyout”. Hit OK to add the flyout to your project.

The settings flyout basically is a ContentControl with a title, an icon, a couple of brushes and methods to show and hide the flyout.

The easiest way to show a flyout is to call its Show method. Do demonstrate this, I added a button to my main page. From the properties panel, by going to events list via the lightning bolt icon, I added an event handler for the Tapped event. In the code behind I added the following lines to the event handler:

DemoSettingsFlyout flyout = new DemoSettingsFlyout();
flyout.Show();

I don’t think this code needs any explanation. I also don’t think you are going to use a settings flyout by hitting a button, or at least not only that way. A settings flyout needs to be accessible through the settings charm.

Using the charm

To get the setting flyout accessible through the settings charm you’ll have to attach it to the settings panel of your app. To get this done you first have to get a hold of the SettingsPane for the current view. And than handle the CommandsRequested event. This event is raised at the moment the settings panel is opened. I attached a handler to this event in the OnNavigatedTo method of the page and detach it in the OnNavigatedFrom method.

In the handler of the CommandsRequested event we’re going to create a SettingsCommand that, when called, shows the settings flyoulllt. The SettingsCommand needs a key (“DemoAppSettings”), a label (“Demo Settings”) and a handler that is called when the command is invoked.

The code on my page looks like this:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var settingsPane = SettingsPane.GetForCurrentView();
    settingsPane.CommandsRequested += MainPage_CommandsRequested;
    base.OnNavigatedTo(e);
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    var settingsPane = SettingsPane.GetForCurrentView();
    settingsPane.CommandsRequested -= MainPage_CommandsRequested;
    base.OnNavigatedFrom(e);
}

void MainPage_CommandsRequested(SettingsPane sender,
                                SettingsPaneCommandsRequestedEventArgs args)
{
    SettingsCommand demoSettings =
        new SettingsCommand("DemoAppSettings", "Demo Settings",
        (handler) => {
            DemoSettingsFlyout demoSettingsFlyout = new DemoSettingsFlyout();
            demoSettingsFlyout.Show();
        });
    args.Request.ApplicationCommands.Add(demoSettings);
}

Where to go from here?

In this tutorial I only talked about adding a settings flyout to you application and showing that. To add actual settings to my application I would use some sort of model that I set to the DataContext of the flyout. On the flyout I bind all settings of the model to controls to set that. The storing and retrieving of the actual settings would be a whole tutorial on its own.