Saturday 29 November 2014

Settings flyout

the Settings flyout is a mechanism where to place navigation to pages that my not be selected frequently for example anything such as a settings page, to an about page etc

to get to the settings page you can swipe from the right or press the windows+c key to open the charms menu, there hit the settings icon. this will open the settings pane

By default not a lot going on here, but before we add our on links here what you need to understand is that when we add a link to the settings pane we do it through out the entire app; hence we have to ensure that our application only adds content to the settings pane once, more on this later for now open up your app.xaml.cs file.

find the onlaunched method, once you have it go to the very end and add your settings logic

protected override void OnLaunched(LaunchActivatedEventArgs e)

    if (System.Diagnostics.Debugger.IsAttached)
        this.DebugSettings.EnableFrameRateCounter = true;

    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();
        // Set the default language
        rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
            //TODO: Load state from previously suspended application

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;

    if (rootFrame.Content == null)
        // When the navigation stack isn't restored navigate to the first page,
        // configuring the new page by passing required information as a navigation
        // parameter
        rootFrame.Navigate(typeof(MainPage), e.Arguments);
    // Ensure the current window is active

    // Settings logic        
    var settings = SettingsPane.GetForCurrentView();

    settings.CommandsRequested += (s, arg) =>
        var about = new SettingsCommand("0", "About", HandleSettings());

        var options = new SettingsCommand("1", "Options", HandleSettings());


with that complete create your HandleSettings function

private UICommandInvokedHandler HandleSettings()
    return new UICommandInvokedHandler(async cmnd =>
        switch (cmnd.Id.ToString())
            case "0":
                await new MessageDialog(cmnd.Label).ShowAsync();
            case "1":
                await new MessageDialog(cmnd.Label).ShowAsync();


now there's numerous ways to skin that cat, but this is just the way I like to do it, you can avoid the switch statement and just create a separate handler for each setting, it's really your call.

Now when you open up your settings view you'll see our freshly added About and Options.

again something to note, if you're ever find yourself in the situation where you have duplicate custom options added to your settings pane that means that you or someone you work with put the logic at the page level instead of the app level and every time that page is navigated to the settings are being added to the settings pane.