locked
Styling Permissions Flyout RRS feed

  • Question

  • Is there a way to style the default Permissions flyout? I mean the way I can define entries in ThemeDictionaries in resources to change colours, etc. Or the other way around, how do I get the colours from it so I can style my flyouts the same way. Thanks.
    Wednesday, September 18, 2013 7:19 PM

Answers

  • Correct.

    See the Define your settings UI section in Guidelines for app settings:

    • ....
    • The header background color and border color should reflect the app color (same as the background color of your tile. 
    • The border color should be the same color, but 20% darker.
    • Display settings contents on a white background.

    --Rob

    • Marked as answer by IvanIL Friday, September 20, 2013 6:15 AM
    Thursday, September 19, 2013 8:23 PM
    Moderator

All replies

  • No, the system provided settings use system colors. App provided settings should use the app's colors.

    --Rob

    Wednesday, September 18, 2013 7:56 PM
    Moderator
  • So I should not try to make my flyouts look the same like the predefined ones?
    Thursday, September 19, 2013 6:15 AM
  • Correct.

    See the Define your settings UI section in Guidelines for app settings:

    • ....
    • The header background color and border color should reflect the app color (same as the background color of your tile. 
    • The border color should be the same color, but 20% darker.
    • Display settings contents on a white background.

    --Rob

    • Marked as answer by IvanIL Friday, September 20, 2013 6:15 AM
    Thursday, September 19, 2013 8:23 PM
    Moderator
  • Thanks Rob, I guess I have some more reading to do :)

    Ivan

    Friday, September 20, 2013 6:15 AM
  • So this white background ended up being a serious search & replace operation. My app has a dark theme, so in order to have properly styled controls on a white background I had to copy all those resources (brushes and other settings) for a light theme from generic.xaml AND the styles for all the controls I needed. But that wasn't enough, some settings were still seeping through from the standard resources, e.g. colouring of the circle in a radiobutton or the whole switch part in toggleswitch, so I also renamed all used brushes so the control styles could not be overwritten... Pretty ugly. Is there en elegant way to do this? I guess the problem is in how my and standard resources are merged and sometimes mine are losing. It would be really nice if there was a property on let's say page level where you could specify if the theme is coming from an app (default) or is a particular one.

    Ivan

    Friday, September 20, 2013 10:14 AM
  • The elegant way to solve this is found in Visual Studio 2013 and Windows 8.1 which has a properly styled settings flyout control.  You only need to specify the header color.  The content area has a white background and controls that are added are correctly styled for it.

    Before 8.1, my solution was to copy the light-theme styles for the controls that I was going to use and add them as a local resource for the flyout.  I renamed them to avoid conflicts.


    • Edited by jrboddie Friday, September 20, 2013 11:31 AM
    Friday, September 20, 2013 11:21 AM
  • Thanks for the tip. Looks like I have to move on to VS2013 and W8.1 quickly. W8.0 makes me work hard to achieve things that should already be there.
    Friday, September 20, 2013 11:36 AM