locked
Change color of AppBarButton RRS feed

  • 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

    Friday, October 10, 2014 9:09 PM

Answers

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


    • Edited by pumpkinszwan Friday, October 17, 2014 5:03 AM added extra info
    • Marked as answer by Keek Employee Monday, October 20, 2014 4:02 PM
    Friday, October 17, 2014 4:36 AM

All replies

  • AppBarButtons always use their standard styling on Windows Phone.

    On Windows you can customise the template.

    Friday, October 10, 2014 10:37 PM
  • 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.

    Saturday, October 11, 2014 9:35 AM
  • 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?

    Wednesday, October 15, 2014 4:33 PM
  • I can't reverse engineer their app, but they're probably not using a standard app bar.
    Wednesday, October 15, 2014 6:13 PM
  • well it looks just like one with the 3 dots for "more" and secondary menu items and all
    Wednesday, October 15, 2014 6:28 PM
  • 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.


    • Edited by pumpkinszwan Friday, October 17, 2014 5:03 AM added extra info
    • Marked as answer by Keek Employee Monday, October 20, 2014 4:02 PM
    Friday, October 17, 2014 4:36 AM
  • 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

    Friday, October 17, 2014 5:54 AM
  • 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

    Friday, October 17, 2014 6:23 PM
  • 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

    Friday, October 17, 2014 6:26 PM
  • 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?

    Friday, October 17, 2014 6:43 PM
  • 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>

    Friday, October 17, 2014 6:59 PM
  • 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

    Friday, October 17, 2014 7:59 PM
  • 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.
    Saturday, October 18, 2014 12:21 AM
  • 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
    Monday, October 20, 2014 4:01 PM
  • 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>
    


    Wednesday, October 22, 2014 10:15 PM
  • 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.

    Tuesday, January 16, 2018 8:50 PM