Windows Store App Settings Flyout

Prerequisites

Please read the following articles first:

In this post, I’ll be walking through how to create a custom UI for settings (required for C#, C++, and VB) that satisfies the UX design requirements.

UI & UX

  • The settings window may be invoked from the left side of the screen if the system's text direction is right-to-left (like Arabic)
  • The width of the settings flyout has to be either 346px (narrow) or 646px (wide). The screenshot below shows a wide one, while the right side pane of my blog shows a narrow one.
  • Its height has to be 100% of the screen
  • The header is 80px high and houses the following:
    • A back button
    • A title that displays the invoked settings command
    • The app’s small logo (30px by 30px). The background 
  • The header’s background must match the start tile’s background (from the manifest)
  • The flyout’s border must be darker than the header’s background (80% of its value). For instance, the background color in the example below is #999999, so the boarder color is rgb(0.8 * 99, 0.8 * 99, 0.8 * 99), which is rounded to #797979
  • The background of the main content area must be white. This can cause a problem if your app requests the dark theme; The text foreground color is white in the dark them, which renders it invisible when the background color is white. To request the light theme, set RequestedTheme="Light"
  • If you must use the dark theme, you will have to style the controls you’re going to use in the settings flyout to make them use dark foreground colors
  • Settings muse be committed and reflected in the app before the users dismissed the flyout
  • The flyout must be light-dismissible (closes when it loses focus)
  • Both of the header’s and content’s controls must be animated
  • Displayed strings have to be localized

SettingsFlyout Design

Download

I posted the code as a sample at: https://code.msdn.microsoft.com/windowsapps/Settings-Flyout-eceaafea