This post is a part of a series of posts about the Social Media Dashboard Sample. This post was written by Dag König. For an introductionary blog post, click here.

According to the certifications rule 4.1.1 “Your app must have a privacy statement if it is network-capable”, you need to have a privacy policy when you fetch anything from Internet, even if it is only a RSS feed. You need to create a web site where you display this privacy policy and you should also display information about this policy inside the app. You usually do this by adding a menu item on the Settings charm as I have done below by adding the menu item Policy.

clip_image002

When you click on this menu item, a page, Flyout, is sliding in from the right of the screen. This is the preferred way to show pages from the Settings charm.

clip_image004

How to implement a Flyout

On a high level, it takes three steps to implement this feature:

1. Create Flyout page

2. Register a menu item on the Settings charm

3. Create code that displays the flyout when the user clicks on the menu item

Create Flyout page

The PrivacyPolicyFlyoutPage.xaml in the Social Media Dashboard Template is located in the directory SettingsFlyout in the Windows 8 project. It inherits from SettingsFlyoutPage.cs, which has some infrastructure features.

PrivacyPolicyFlyoutPage.xaml page is actually a regular page. Nothing special here. It does not need to be a page. A usercontol is a good alternative.

Register the menu item in the Settings charm

The static class SettingsPane represent the Settings charm in the app. When the user opens the Settings charm, the event CommandsRequested on this class is called. Register a listener to this event and instantiate the menu items that you want to be shown.

In our example, App.xaml.cs has this code.

protected override void OnWindowCreated(WindowCreatedEventArgs args)
{
      SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;
}

In the event OnWindowCreated, which is fired when a windows is created, we register for the event CommandsRequested. It will call a method in the same class called App_CommandsRequested.

void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand);

    SettingsCommand aboutCommand = new SettingsCommand("AU", "About", handler);
    args.Request.ApplicationCommands.Add(aboutCommand);
    SettingsCommand privacyCommand = new SettingsCommand("PP", "Policy", handler);
    args.Request.ApplicationCommands.Add(privacyCommand);
}

UICommandInvokeHandler represent a callback function that handles the event that is fired when the user invokes a menu command. The method, with the name onSettingsCommand is the callback that will be called. In this example all commands uses the same method.

We create a SettingsCommand for each menu item. The constructor takes three parameters: an id, a label and the callback. We add each of these SettingCommands objects to the ApplicationCommands collection.

Create code that displays the flyout when the user clicks on the menu item
private void onSettingsCommand(IUICommand command)
{
    Rect windowBounds = Window.Current.Bounds;
    settingsPopup = new Popup();

    settingsPopup.Closed += settingsPopup_Closed;
    Window.Current.Activated += Current_Activated;
    settingsPopup.IsLightDismissEnabled = true;
    SettingsFlyoutBase settingPage = null;

    switch (command.Id.ToString())
    {
        case "AU":
            settingPage = new AboutFlyoutPage();
            break;
        case "PP":
            settingPage = new PrivacyPolicyFlyoutPage();
            break;
    }

    settingsPopup.Width = settingsWidth;
    settingsPopup.Height = windowBounds.Height;

    // Add the proper animation for the panel.
    settingsPopup.ChildTransitions = new TransitionCollection();
    settingsPopup.ChildTransitions.Add(new PaneThemeTransition()
    {

        Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ?
        EdgeTransitionLocation.Right :
        EdgeTransitionLocation.Left
    });

    if (settingPage != null)
    {
        settingPage.Width = settingsWidth;
        settingPage.Height = windowBounds.Height;
    }

    // Place the SettingsFlyout inside our Popup window.
    settingsPopup.Child = settingPage;

    // make sure any web controls are hidden
    settingPage.CharmsFlyoutOpened(this, null);

    // Let's define the location of our Popup.
    settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (windowBounds.Width - settingsWidth) : 0);
    settingsPopup.SetValue(Canvas.TopProperty, 0);
    settingsPopup.IsOpen = true;
}

The method onSettingsCommand is responsible for displaying the flyout. What it really does is to create an Popup that will host the flyout page that you created earlier, hock up a couple of events, set the height and width, add an animation (so it slides out from right) and displays it.

Note the line:

settingsPopup.IsLightDismissEnabled = true;

This is very useful because it will automatically hide your flyout when the user clicks somewhere outside of it.

The flyout is displayed when we set settingsPopup.IsOpen to true.