CODEWITHSUNDEEP
c#xamlwin-universal-appuwpuwp-xaml
ispiro
ispiro

Reputation: 27633

Change CommandBar (AppBar) colors

I want to change the background color of a CommandBar's Background and Foreground. However, simply setting Background="whatever" Foreground="whatever" doesn't change the overflow part.

I tried for hours using Templates and Styles etc. but I don't really know what I'm doing so it's not usefull . I've read https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/styling-controls and https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/control-templates (and others such as numerous questions on this site) which really just tell you that there is such a thing as changing the style and they show you how to set an element to a certain style. But they don't show you which elements have which available variables... Also, when right clicking on the CommandBar - edit style - edit a copy - what I get is an empty one which promptly makes the CommandBar invisible. This doesn't make sense to me.

So - how do I change the style/template of the CommandBar?

Upvotes: 1

Views: 1707

Answers (1)

Clint
Clint

Reputation: 6220

This blog post goes into detail about how to address the overflow issue:

https://metronuggets.com/2015/08/04/universal-windows-apps-appbars-and-custom-colours/

It involves specifying a style for the overflow case.

The main magic is here:

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

Upvotes: 3

Related Questions