Windows Store App Settings Flyout

Windows Store App Settings Flyout

Rate This
  • Comments 8

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: http://code.msdn.microsoft.com/windowsapps/Settings-Flyout-eceaafea

Leave a Comment
  • Please add 6 and 8 and type the answer here:
  • Post
  • Nice..really deserves 5 star rating .. Senior :)

  • Thank you!

  • 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).

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

  • thanks for response Mohamed ,

    Do you have any Code For Left Flyout in windows 8 metro app. please help me out to find that if you have done something like that . One more thing i came to know During R & D on this that is in 8.1 They have given Flyout control but i couldnt able to find the Information that we can use at left side of screen . if you have any idea please let me know .

    Thanks in Advance .

  • Shivam, unfortunately I don't think it's possible out-of-the-box, please check in the forums, you should get an answer there.

  • 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.

  • 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.

Page 1 of 1 (8 items)