Windows Store XAML App–Adding a Privacy Page

Posted on by

A quick post to answer a question that I received from someone around adding a privacy page to a Windows Store app.

Why would you need a privacy policy? If you take a look at the page;

“Avoiding common certification failures (Windows)”

You’ll find the section that says;

If your app connects to a network, you must make sure your app includes a privacy statement in your app's metadata. Customers must also be able to access the privacy statement from the Settings charm when they open your app.. You must provide access to your privacy policy in the Description page of your app, as well as in the app’s settings as displayed in the Windows Settings charm. (See certification requirement 4.1 for more info.)

So, if you’re building an app that connects to the network then you’ll need to do something about this in that you’ll need to implement the settings charm.

If you take one of the built-in templates like the Grid template in Visual Studio, you’ll notice that the application that you run doesn’t have any kind of settings display for interaction with the settings charm as below;

image

and so, at the simplest level you need to pull that in. There’s a number of things you might do;

Add a Privacy Link to a Web Page

There are various applications in Store which do this. If we had a simple class like this one (not 100% finished because it has 2 hard-coded strings in it);

namespace App3
{
  using System;
  using Windows.System;
  using Windows.UI.ApplicationSettings;

  internal static class PrivacyPolicy
  {
    public static void Initialise(Uri settingsUri)
    {      
      SettingsPane settingsPane = SettingsPane.GetForCurrentView();

      settingsPane.CommandsRequested += (s, e) =>
        {
          SettingsCommand settingsCommand = new SettingsCommand(
            "PRIVACY_ID", // NB: should be in a constant
            "Privacy",    // NB: should be in a resource for internationalisation
            command =>
            {
#pragma warning disable 4014 
              Launcher.LaunchUriAsync(settingsUri);      
#pragma warning restore
            }
          );
          e.Request.ApplicationCommands.Add(settingsCommand);
        };                
    }
  }
}

Then we can use that to make a call PrivacyPolicy.Initialise(new Uri(“http://mypolicy.com”)); and then this code will cause us to have an option on the Settings charm which displays the word “Privacy Policy” as below;

image

and when we click that it’ll open up the browser to display whatever web page we’ve specified by that Uri.

Add a Flyout Panel to Display Privacy

A lot of apps seem to put the privacy information on an About panel like I did in my own kwiQR application;

image

where the About link links to;

image

This is pretty simple. We can make use of the SettingsFlyout control from the Callisto library. You get this via NuGet;

image

image

and then you can write code like this;

namespace App3
{
  using System;
  using Callisto.Controls;
  using Windows.UI.ApplicationSettings;
  using Windows.UI.Xaml.Controls;

  internal static class PrivacyPolicy
  {
    public static void Initialise()
    {      
      SettingsPane settingsPane = SettingsPane.GetForCurrentView();

      settingsPane.CommandsRequested += (s, e) =>
        {
          SettingsCommand settingsCommand = new SettingsCommand(
            "ABOUT_ID", // NB: should be in a constant
            "About",    // NB: should be in a resource for internationalisation
            command =>
            {              
              SettingsFlyout flyout = new SettingsFlyout();
              flyout.HeaderText = "About"; // NB: should be in a resource again.

              flyout.Content = new TextBlock()
              {
                Text = "This is my privacy policy"
              };

              flyout.Width = (double)SettingsFlyout.SettingsFlyoutWidth.Wide;
              flyout.IsOpen = true;        
            }
          );
          e.Request.ApplicationCommands.Add(settingsCommand);
        };                
    }
  }
}

which will leave an “About” option (hard-coded in English) on the Settings charm;

image

which when tapped then displays;

image

The “magic” thing to know about the code that sets the Content of the SettingsFlyout to be a TextBlock is that in a XAML framework like this that Content could be any piece of UI including a user control (which is what I would usually do) or just a Panel of some sort containing arbitrary UI. As a made-up example;

             SettingsFlyout flyout = new SettingsFlyout();
              flyout.HeaderText = "About"; // NB: should be in a resource again.

              Grid grid = new Grid();
              grid.Background = new SolidColorBrush(Colors.Red);
              grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
              grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

              grid.Children.Add(new HyperlinkButton()
              {
                Content = "Click for Privacy Policy",
                NavigateUri = new Uri("http://www.microsoft.com")
              });
              Button b = new Button()
              {
                Content = "Click all you like, nothing happens"
              };
              grid.Children.Add(b);
              Grid.SetRow(b, 1);

              flyout.Content = grid;

              flyout.Width = (double)SettingsFlyout.SettingsFlyoutWidth.Wide;
              flyout.IsOpen = true;

will display;

image

and you probably get the idea at that point.

Beyond that, there’s a number of samples on the developer centre that deal with settings in .NET – take a flick through some of those and there’s also a section on adding settings in the FlickR demo videos on my site here.