In this article we are going to see the newly available feature with Windows 8 called the Charm Bar which provides quick ways to access some of the functions in Windows 8 application as well provides option to share the information with the users in effective manner. Charm Bar is basically available in each and every screen that the user navigates and also it will be available by default to all the application with some of the base and inbuilt options. In order to access the Charm Bar just hover the mouse pointer to the upper right or the bottom right corner of the screen and we can see the charm bar popping out. By default the Charm Bar has options for Search, Share, Start, Devices and Settings. As mentioned in this article we will see how we can effectively utilize the Charm Bar to integrate in the application while developing and do some manipulations which basically required in any of the application development.       [more]

So how the Charm Bar looks?

Just scroll your mouse to the Upper Right or Bottom Right corner and we can see the Charm Bar popped out as shown in the screen below.

Now click on the settings option and we can see the Charm Bar options available for the settings page listed at the top of the popped out screen as shown in the screen below. Here is the shortcut we can use Windows + C buttons to open the charm bar.

So if we want to control some settings in your application we can generally use this Charm Bar to incorporate the settings to it, as a design principle Microsoft suggests to use this Charm Bar to incorporate most of the settings like About Us, Contact Us, Information, Privacy Settings, Customization, Personalization etc.. which gives unique experience to the users. Now let us see how we can use the Charm Bar to incorporate a settings option like Privacy Statement which is mandatory if your application is going to use the Internet Capability feature. Open Visual Studio 2012 IDE in administrator mode and Create a new Project for Windows Store with C# and XAML as a code base with a valid project name as shown in the screen below. I would suggest you to read my previous article on how to create your first Windows Store application (Developing your first Windows Store App in C# and XAML – Day 3) which will provide some insights and step by step approach on starting the IDE.

We can select the template as per the requirement, please read the article Selecting a right Template and Language for your Windows Store App – Day 2 which provides some insights on which template an be selected for your requirement. Once the project is created we can see a list of default files and folders added to the solution, refer to the previous article to understand the usage of each file. Once we selected the appropriate template we can see the files and folders available in the solution explorer, open the App.XAML page and we can see some base default code available.

Our first step is to add the below two using statements which will initialize the necessary properties that are required to access the charm bar programmatically as shown in the code below.

Code:

using Windows.UI.Popups;
using Windows.UI.ApplicationSettings;

Next step is to register the CommandRequest handler while the application is getting initialized which means we are going to tell the application to use the appropriate function when the Privacy is requested. Add the below code right next to the application initializer which basically will be called while the application is launched which we will do in the next step.

Code:

private void SettingCharmManager_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
       {
           args.Request.ApplicationCommands.Add(new SettingsCommand(“privacypolicy”, “Privacy policy”, OpenPrivacyPolicy));
       }

       private async void OpenPrivacyPolicy(IUICommand command)
       {
           Uri uri = new Uri(“https://f5debug.net/win8policy.html”);
           await Windows.System.Launcher.LaunchUriAsync(uri);
       }

Here we have specified our privacy statements and hosted the page in a hosting environment () so we have just provided the URL which has the Privacy statement mentioned. Now we are done with the general assigning of the charm bar privacy statement, next is we need to tell the application to initialize it as soon as the application is launched so that when the user uses the charm bar the application shows the Privacy statement to do that add the below code in the OnLaunched event in the App.xaml page as shown in the code below.

Code:

SettingsPane.GetForCurrentView().CommandsRequested += SettingCharmManager_CommandsRequested;

So your final App.XAML code will look like below which has the steps on using the Privacy statement, or we should rather say using the Charm Bar effectively to provide the required options that the application basically needed to display to the end users as shown in the code below.

App.XAML Full Code:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Popups;
using Windows.UI.ApplicationSettings;

// The Blank Application template is documented at http://go.microsoft.com/fwlink/?LinkId=234227

namespace CharmBarDemo
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        private void SettingCharmManager_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            args.Request.ApplicationCommands.Add(new SettingsCommand(“privacypolicy”, “Privacy policy”, OpenPrivacyPolicy));
        }

        private async void OpenPrivacyPolicy(IUICommand command)
        {
            Uri uri = new Uri(“https://f5debug.net/win8policy.html”);
            await Windows.System.Launcher.LaunchUriAsync(uri);
        }

        /// <summary>
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used when the application is launched to open a specific file, to display
        /// search results, and so forth.
        /// </summary>
        /// <param name=”args”>Details about the launch request and process.</param>
        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            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();

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

                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
                SettingsPane.GetForCurrentView().CommandsRequested += SettingCharmManager_CommandsRequested;
            }

            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
                if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
                {
                    throw new Exception(“Failed to create initial page”);
                }
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name=”sender”>The source of the suspend request.</param>
        /// <param name=”e”>Details about the suspend request.</param>
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Now we are done with the code, let us build and execute the application and use the short cut Windows + C to get the charm bar which the Privacy Statement option which opens the html privacy page in the windows 8 IE explorer as shown in the screens below.

Conclusion:

So we can use it across in the application development to add the number of options that are basically required by the application which makes the application unique and which showcases the application uses the Modern Design Principles while developing to have the unique feature set. So in the upcoming article we will see how we can enhance and use the Windows Store development capabilities one by one and successfully build an application to ship it to the Windows Store.