#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):

 

Charm Bar in Windows 8

 

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.


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

6 comments

  1. Thanks for the article; can you provide an example on how to respond to the user clicking on "Command Name"? Specifically, I would like to allow the user to change a value with a TextBox...

    ReplyDelete
  2. Hi

    I am using Visual Studio Express for Windows 8 for creating my Windows 8 app.

    I need to change the name appearing in the Charm setting bar.
    Example:
    TheAppName
    By AbcDeveloper.

    can you please help me for this

    ReplyDelete
  3. Yes, you can do that by changing the Display Name value in the manifest file. This will be applied everywhere.

    ReplyDelete
  4. Thanks for your reply

    ReplyDelete
  5. Chaudhary sb, I am using editgrid spreadsheets, now i want to put full editgrid spreadsheet in my page, on a 500x400 box with out menu and other editgrid tags on it, just sheet. please inform me how.
    thanks

    arshad chaudhary goarshadgo@yahoo.com

    ReplyDelete
  6. Any way to change the "label" name for instance "Toggle Music On" once clicked in the event handler that passes you the IUICommand it has a property for label but altering to say "Toggle Music Off" does nothing.

    ReplyDelete

 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top