Change color of AppBarButton

Question

Hello, I am have struggled to change the foreground color and stroke color of the ellipse for AppBarButtons in WP8.1

I have tried making my own style and tried overriding default theme values, none of which worked

This is a severe problem for our company and I am unable to find any help online

I do not want to change the font or icons, just the color

PLEASE HELP

Answer 1

AppBarButtons always use their standard styling on Windows Phone.

On Windows you can customise the template.

Answer 2

AppBarButtons always use their standard styling on Windows Phone.

If that is the case, the documentation needs to be updated with this information, and also that the AppBarButton.Foreground property isn't supported on the phone.

If you don't have menu (secondary) items in the AppBar, a possible workaround is to use regular buttons, style them to look like AppBarButtons, and put them at the bottom of the page.

Answer 3

Well it looks like the new Instagram Beta for 8.1 was able to change their appbarbutton colors to bluish purple.

Do they know something we don't?

Answer 4

I can't reverse engineer their app, but they're probably not using a standard app bar.

Answer 5

well it looks just like one with the 3 dots for "more" and secondary menu items and all

Answer 6

I have done this in some of my apps. It works on WP7, (but may not for WP8/8.1 app target, I haven't tried):

CType(ApplicationBar, ApplicationBar).BackgroundColor = appBarColor1
CType(ApplicationBar, ApplicationBar).ForegroundColor = appBarColor2

You'll need to translate that VB to C# if that's what you're using. I don't have access to my code/dev machine right now, but I think the appBarColor type is Windows.UI.Color.

If you can't get it to work reply to this and I'll get you the correct code when I'm back at my dev PC where I have a full working app (in C#) with this functionality.

This technique works perfectly for me (I use it in an app that can have multiple themes), and it even updates in real time when you change the colours at runtime.

EDIT

The following works on WP8.1 (C#):   

myAppBar.BottomAppBar.Foreground = new SolidColorBrush(Colors.Red);    
myAppBar.BottomAppBar.Background = new SolidColorBrush(Colors.Green);

---

I'm a self-taught noob amateur. Please take this into account when responding to my posts or when taking advice from me.

Answer 7

Thanks Pumpkinszwan.

Note that that changes the colours for the entire bar (and its buttons as a collection), not the individual buttons as (I think) Keek is looking for.

Keek, can you clarify what you're trying to do?

--Rob

Answer 8

I want to keep the commandbar background the same as my app.

I only want to change the border color and foreground color of the appbarbuttons

msdn documentation says you can do this

Answer 9

I do not want a different color for each button, I want them all the same color

we want all our buttons to have the brand color of our company

Answer 10

ok this worked:

this.BottomAppBar.Foreground = newSolidColorBrush(Colors.Red);

but I had to put it into my codebehind, does this mean I need to put it in every codebehind page in my app?

Why can't I just declare it once?

It also changed the color of the templates ellipse?

Answer 11

FWIW, the xaml equivalent is:

    <Page.BottomAppBar>
        <CommandBar IsOpen="True" Foreground="Yellow" Background="Blue">
            <AppBarButton x:Name="SettingsButton" Icon="Setting" Label="settings"/>
            <AppBarButton x:Name="HelpButton" Icon="Help"  Label="help"/>
        </CommandBar>
    </Page.BottomAppBar>

Answer 12

no I want to do it in a resource file and have it applied for all appbarbuttons in the app

I don't want to have to repeat this everywhere

DRY principal

Answer 13

I want to do it in a resource file and have it applied for all appbarbuttons in the app

I don't want to have to repeat this everywhere

I verified that it can be done on Windows but not on Windows Phone, just as Rob Caplan had said earlier. It simply hasn't been implemented yet on the phone. You'll have to use workarounds.

Answer 14

ok so for the moment we will say this is answered by using c# in every view and we will wait to see if Microsoft implements this for resource files

Answer 15

You can set the CommandBar's foreground and background from resources. What you can't change are the individual buttons. I don't recommend the following colour scheme :)

    <Page.BottomAppBar>
        <CommandBar Foreground="{ThemeResource CommandBarForeground}" Background="{ThemeResource CommandBarBackground}">
            <AppBarButton Icon="Favorite" />
            <AppBarButton Icon="Add" />
            <AppBarButton Icon="Attach" />
        </CommandBar>
    </Page.BottomAppBar>

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <SolidColorBrush x:Key="CommandBarBackground" Color="Magenta"/>
                    <SolidColorBrush x:Key="CommandBarForeground" Color="Cyan"/>
                </ResourceDictionary>
                <ResourceDictionary x:Name="HighContrast">
                    <SolidColorBrush x:Key="CommandBarBackground" Color="{ThemeResource PhoneBackgroundColor}"/>
                    <SolidColorBrush x:Key="CommandBarForeground" Color="{ThemeResource PhoneForegroundColor}"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Application.Resources>

Answer 16

I know this is an old post, but I was looking for the same issue and resolved it like this.

 <AppBarButton Visibility="Visible" >
        <AppBarButton.Content>
               <Grid>
                    <Ellipse Fill="Green" Stroke="Black" StrokeThickness="2" />
                    <SymbolIcon Symbol="Accept" Foreground="White" ></SymbolIcon>
                </Grid>
         </AppBarButton.Content>
</AppBarButton>

Set the Fill of the Ellipse to whatever you want the background of the button to be.