Floating FB popout byF5debug

Settings Panel in Windows Store App – Day 13

 

imageIn this article we are going to see how to use the Settings panel effectively while developing your Windows Store application. In our previous article we have seen how to how to handle data locally while developing your Windows Store Application and the different options to store data in the application. Setting panel in the charm will be used to specify the application settings through the application usage, traditionally we will be providing a page which takes care of the application setting information through which the user interaction can be traced and preference will be added that can be accessed easily from the application.     [more]


With Windows Store Application development this is made easy with the new Setting panel that is added in the charm so while loading the application itself the respective setting for the application will be loaded in the charm. So while accessing the charm bar from any application will load the respective applications settings specifically in the list so that the user can access the settings easily. Let us see the steps on how to use the Setting charm to incorporate the application settings that should be used and access throughout the application.

Open Visual Studio 2012 IDE in administrator mode and create a new Windows Store application with C# and XAML with a valid project name as shown in the screen below.

image

Once the project is created, we can see the blank screen where we can design our requirements. Let us add the below code which need to be registered first, we need to implement a custom CommandRequest event. In the code we can see commandrequest event handler will be used which will be triggered when ever the user tries to call the Settings panel from the charm bar as shown in the code below.

C# Code:

[code:c#]

SettingsPane.GetForCurrentView().CommandsRequested += SettingsPanel_CommandsRequested;

[/code]

image


Now next step is to implement the SettingPanel_CommandsRequested method which will take the arg request where we can create the command that should be shown in the settings panel. We can add a number of commands as per our requirement and register the same with the exact command it should trigger on the click event of that particular command as shown in the code below.

C# Code:

[code:c#]

private void SettingsPanel_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            args.Request.ApplicationCommands.Add(new SettingsCommand("commandID1", "Privacy Policy", CallPrivacy));
            args.Request.ApplicationCommands.Add(new SettingsCommand("commandID2", "About F5debug", CallAbout));
            args.Request.ApplicationCommands.Add(new SettingsCommand("commandID3", "Help", CallHelp));
        }

        private void CallPrivacy(IUICommand privacy)
        {
            var messageDialog = new Windows.UI.Popups.MessageDialog("Privacy Added!!!");
            messageDialog.ShowAsync();
        }

        private void CallAbout(IUICommand about)
        {
            var messageDialog = new Windows.UI.Popups.MessageDialog("About Added!!!");
            messageDialog.ShowAsync();
        }

        private void CallHelp(IUICommand help)
        {
            var messageDialog = new Windows.UI.Popups.MessageDialog("Help Added!!!");
            messageDialog.ShowAsync();
        }

[/code]

image


Now we are done with the code, as you see we have separate methods which has separate implementations which will be triggered on the click event of each of the command which we specified while settings the Arguments in the commandrequested event handler.

Complete Code:

[code:c#]

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ApplicationSettings;
using Windows.UI.Popups;
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;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace SettingPanel
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            SettingsPane.GetForCurrentView().CommandsRequested += SettingsPanel_CommandsRequested;
        }

        private void SettingsPanel_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            args.Request.ApplicationCommands.Add(new SettingsCommand("commandID1", "Privacy Policy", CallPrivacy));
            args.Request.ApplicationCommands.Add(new SettingsCommand("commandID2", "About F5debug", CallAbout));
            args.Request.ApplicationCommands.Add(new SettingsCommand("commandID3", "Help", CallHelp));
        }

        private void CallPrivacy(IUICommand privacy)
        {
            var messageDialog = new Windows.UI.Popups.MessageDialog("Privacy Added!!!");
            messageDialog.ShowAsync();
        }

        private void CallAbout(IUICommand about)
        {
            var messageDialog = new Windows.UI.Popups.MessageDialog("About Added!!!");
            messageDialog.ShowAsync();
        }

        private void CallHelp(IUICommand help)
        {
            var messageDialog = new Windows.UI.Popups.MessageDialog("Help Added!!!");
            messageDialog.ShowAsync();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

[/code]

Now we are done with our code, to start seeing the expected result Build and execute the application and we can see the output as shown in the screens below.

image

image

image


Conclusion:

This article speaks more about how to incorporate the application settings effectively and lively as per the standard app development for Windows Store.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter