Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Universal Windows Apps, AppBars and Custom Colours

In your Universal app, you may want to have AppBars that have different colours from the default theme colours, which is understandable if you want to add your own branding to it. But when you set the Foreground/Background colours, you may end up with behaviour you weren’t fully expecting.

The Problem

Consider the following xaml:

    
    <Page.BottomAppBar>
        <CommandBar Background="Blue"
                    Foreground="White">
            <CommandBar.PrimaryCommands>
                <AppBarButton Label="settings"
                              Icon="Setting"
                              Foreground="White"/>
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="about"
                              Foreground="White"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

You can see here that we have an AppBar with both primary and secondary commands. When you run the app, you’ll end up with a Window that looks like this:

Desktop:
AppBarNotOpen

Phone:
PhoneAppBarNotOpen

So this is the PrimaryCommands, all looking good, we tap the ellipsis, and this is where we get the unexpected behaviour:

Desktop:
AppBarOpen

Phone:
PhoneAppBarOpen

As you can see (just), the SecondaryCommands area of the CommandBar has not respected the colours you set against it, it uses whatever your app’s theme is set as.

The Solution

Tucked away in MSDN, there’s a little sentence that says: “The default overflow menu is styled to be distinct from the bar. You can adjust the styling by setting the CommandBarOverflowPresenterStyle property to a Style that targets the CommandBarOverflowPresenter.” There is nothing to state what the effects of not doing this are (basically what you see above).

What this means is you just need to add a little bit of extra xaml to enable this in your appbar:

    
    <Page.BottomAppBar>
        <CommandBar Background="Blue"
                    Foreground="White">
            <CommandBar.CommandBarOverflowPresenterStyle>
                <Style TargetType="CommandBarOverflowPresenter">
                    <Setter Property="Background"
                            Value="Blue" />
                </Style>
            </CommandBar.CommandBarOverflowPresenterStyle>
            <CommandBar.PrimaryCommands>
                <AppBarButton Label="settings"
                              Icon="Setting"
                              Foreground="White"/>
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="about"
                              Foreground="White"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

Note the extra CommandBarOverflowPresenterStyle (a mouthful, right!). Which gives the result:

Desktop:
AppBarFixedOpen

Phone:
PhoneFixedAppBarOpen

So there you get the expected behaviour (certainly expected on phone).

I’m told that the reason for this is to prevent the “L” shape you see in the fixed desktop version, but at least you know there is a way to make it like that should your design dictate it.

Source: https://github.com/Ferret-Labs/MetroNuggetsCode/tree/master/AppBarCustomColour

SL

Advertisements

One response to “Universal Windows Apps, AppBars and Custom Colours

  1. kali February 16, 2016 at 11:28

    thanks for the tutorial,is there any way to change the height of the BottomAppBar??I can’t do it with specific values thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: