Adding a Settings panel to Windows Store Apps

When writing software, it always seems that the last 10% of the project takes 90% of the time, doesn't it?

As I sit here polishing my Tenth Anniversary Microsoft Krypton Crystal award, I'm also wrapping up an app and getting ready to start thinking about hitting that 'Submit" button, but wait.. this app accesses the Internet, so don't I need to include a Privacy Notice? Well, strictly speaking my app only reads data from the internet, but of course that means that it sends out a request to a website, which in theory could be tracked. So, short answer, yes, I need to include a Privacy Notice, even if it just says "I don't capture your data or do aNything with it, promiSe, Are we cool?" .

I could add some kind of pop-up to my app activated by a button to display such a notice, but who wants to clutter up their app with buttons that only do this one thing? No-one, that's who. So it's much better to make use of Settings charm, which pops open a side-bar or flyout. Of course, if your app actually has some settings, this is where you are encouraged to place them. As it stands, Windows automatically creates and populates a default Settings panel for you, with a bare minimum amount of information, thus:

So, well, meh, right? Whatever, it's still a reasonable place to insert a link to your notice, or even a brief notice itself. So how do we go about customizing the Settings panel? In Windows 8 this was actually a bit of a pain to do, because Windows 8 didn't ship with a nice flyout control to display something like this. In fact, the official way of doing it was something like "You want to do what now? Hey, look over there!" and then the documentation ran away and hid behind a door. No, I'm lying of course, the recommendation was really to use something like Callisto, a great supplementary framework which did include a flyout control.

In these enlightened times in which we live, there is no reason to hide, because Windows 8.1 does include the controls you need to create a flyout. Let's have a quick look at how you use it. For a more in-depth look, check out this excellent blog but be aware that the sample code at the end of that linked topic appears to be a little stale.


Step 1

Add a Settings Flyout control to your app, using Add New...

Step 2

Dive into the SettingsFlyout XAML file, and edit it to suit your purposes. I'm adding a Privacy Notice as you can see. There's a <TextBlock> already there for me to mess with, but one trick I needed was the ability to add a line break to the text within the TextBlock. There are dozens of ways to do this on the Web, but the only one that seems to work in this scenario is to use the <Span> tag to wrap a block of text, and separate the blocks with <LineBreak/>.


If you are adding real settings, you know, switches and sliders and stuff, this is where you place them.


Step 3

Now all we need to do is make the app display this flyout as an option when the user taps the Settings charm. This is where my code differs from the excellent MPV article referenced above. Rather than try and replace the entire Settings flyout (which is what I think it was trying to do) I add a new option to the existing Settings list, which opens my Flyout.

Here's the code, which is added to App.xaml.cs so that it's called once at launch to override the Settings defaults:

And here's what it look like:


Tap on Privacy Settings link and you get..



And so Bob's your uncle. For some more example code of this process, here's a C++ Sample and here's a sample for more sensible developers who actually have lives.