#Win8Dev Tutorial: Integrating Settings Panel in Windows 8 Charm Bar

Many of us need to integrate settings page in our applications. All we generally do is by creating a separate page in our project. But Windows 8 provide us a separate settings panel in Charm bar which you can use for your settings page.

In this post we will learn more about it from scratch and integrate it to our demo application. Also, we will learn how to invoke the charm bar to show the settings panel.

Charm bar is the floated vertical bar attached at the right side of the screen, consists of Search, Share, Start, Devices and Settings button to invoke appropriate commands. You can bring the charm bar by moving your mouse pointer at the top right corner of the screen. Here’s the screenshot of the charm bar (rotated 90 degree in left direction to accumulate in this post):

Clicking the settings button there in the charm bar, brings the settings panel in the screen where you can show application specific settings/configurations.

To integrate your settings panel in your application, you need to add application specific commands in the settings panel. To do this, you need to register the “CommandsRequested” event in your page. You can chose between application level or page level settings panel.

Write the following code to register the event first:

SettingsPane.GetForCurrentView().CommandsRequested += OnSettingsPaneCommandRequested;

Then you need to add the specific commands one by one in the settings panel from the commands requested event implementation. Add settings command to the pane by following the below code snippet:

private void OnSettingsPaneCommandRequested(SettingsPane sender,
                                            SettingsPaneCommandsRequestedEventArgs args)

{

    // Add the commands one by one to the settings panel

    args.Request.ApplicationCommands.Add(new SettingsCommand("commandID", 
                                                             "Command Name", DoOperation));

}

private void DoOperation(IUICommand command)

{

    // Write the logic here that you want to do, when the user clicks it

}

Once you integrate this in your page, you will see something similar to this in your settings pane as shown in the below screenshot:

In case you want to invoke the settings pane to show by a button click, you can write the below code in the button click implementation:

SettingsPane.Show();

That’s all to integrate the settings pane in your Windows Store application. I hope, this will now help you to understand the settings pane integration. If you have further queries on this, please don’t forget to ask. Your feedbacks are always welcome to improve the articles.

Connect with me on Twitter, Facebook and Google+ for any kind of discussions. Subscribe to my blog’s RSS feed and email Newsletter to receive instant notification directly in your inbox.