Theme independent app bar in windows phone 8.1

1
votes

I am adding app bar in my windows phone 8.1 app . I set requested theme as dark in my app bar button. But when I change my start up theme its color also changes. I tried to put image as app bar button icon still it is dependent on theme as my image is white yet it is showing in black when theme is set to light.

 <Page.BottomAppBar>
    <CommandBar Background="#FFF3A716">
        <AppBarButton Label="Home" RequestedTheme="Dark" Click="AppBarButton_Click">
            <AppBarButton.Icon>
                <BitmapIcon HorizontalAlignment="Center" VerticalAlignment="Center"   UriSource="/Assets/Images/home-icon.png">

                </BitmapIcon>
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Label="Tips" RequestedTheme="Dark">
            <AppBarButton.Icon>
                <BitmapIcon HorizontalAlignment="Center" VerticalAlignment="Center"  UriSource="/Assets/Images/tips-icon.png">

                </BitmapIcon>
            </AppBarButton.Icon>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>

Need help?

2
xamlwindows-phone-8.1appbar

2 Answers

2
votes

Set your button's theme colours on the CommandBar rather than on the button.

You cannot set the colours of the AppBarButtons in an app bar individually on Windows Phone. They buttons will always use the Foreground and Background colours from the CommandBar itself.

<CommandBar RequestedTheme="Dark">

Also make sure that your button images are correct. They will be used as an opacity mask with the transparent pixels showing the background colour and the solid pixels showing the foreground colour. The same images should work for any theme since they don't use the colours encoded in the bitmap. See Details on sizing, padding, scaling, and transparency for Windows Phone Store apps in the Guidelines for app bars on MSDN.

0
votes

Use ThemeManager library to change black <--> white theme, as well as change Accent color.

ThemeManager.ToDarkTheme();

ThemeManager.SetAccentColor(new Color() { R = 214, G = 242, B = 185, A = 255 });