Partager via

Windows Store App Settings Flyout

  • Article

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

Comments

  • Anonymous
    October 20, 2012
    Nice..really deserves 5 star rating .. Senior :)

  • Anonymous
    October 20, 2012
    Thank you!

  • Anonymous
    October 10, 2013
    Can we use this code in windows 8 not 8.1 , and will the guideline allows us to use Right Flyout with English language (Not Right to left as Arabic).

  • Anonymous
    October 11, 2013
    Shivam, yes, this example works with Windows 8. I think the guideline didn't change regarding the direction.

  • Anonymous
    October 28, 2013
    The comment has been removed

  • Anonymous
    October 29, 2013
    The comment has been removed

  • Anonymous
    November 26, 2013
    Most of the code works fine under 8.1. However, I can't get the controls (other than the header) in the flyout to show. Also the height drops to default. The style height of '*' also seems not to function. I had to modify Position() with this.Height = Window.Current.Bounds.Height; to correct that - which I'm pretty sure is not according to standards.

  • Anonymous
    November 26, 2013
    Solved my own problem for controls not showing. It was purely a colour problem. Your code is fine in that regard on 8.1 but the 80% did not get used.

  • Anonymous
    December 17, 2014
    Can anybody tell me the step by step procedure of Windows Store App Settings Flyout with a example. or pls post link so that i can know about this. Thanks.