Application Bar icons appearing as white even if the icons are colored in Windows phone app?

Question

Actual Intended Result

But appearing like this in emulator

This is the icon Image asset I am using

Am adding the application bar icon in c# like this:

 public void SetAppBar()
    {
        if (ApplicationBar == null)
        {
            ApplicationBar = new ApplicationBar();
            ApplicationBar.Mode = ApplicationBarMode.Default;
        }

        this.ApplicationBar.Buttons.Clear();

        ApplicationBarIconButton applicationBarIconButton = new ApplicationBarIconButton();
        applicationBarIconButton.Text = "play all";

        applicationBarIconButton.IconUri = new Uri("Images/play_off.png", UriKind.Relative);
        applicationBarIconButton.Click += AppBarButton_Click_1;

        this.ApplicationBar.Buttons.Add(applicationBarIconButton);

        ApplicationBar.IsVisible = true;
    }

I have read the best practices for bottom app bar icons here but as of now I dont have access to an icon with white forgeround on a transparent background. This is the icon I have, Is there any way I can get the intended green color in the app bar icon ? I have tried setting foreground color of the app bar icon to green but that doesn't change the result. Its still always white. Is there any way I can remove this automatic functionality of windows phone sdk to color icons with white or black. I want the icon to appear exactly same as the image asset i use.(green colored)

Please let me know if its possible.

Thanks.

Answer 1

By default, All your application icon will have light and dark colors depend on your emulator/phone theme.

To change the foreground color of the application icon, use

XAML

ForegroundColor="Red" //your desired color

C#

ApplicationBar.ForegroundColor = Color.FromArgb(255, 167, 246, 0); //your desired color's RGB code

Answer 2

try this instead: If using the app bar is not a must, use the page footer to place the controls and have full control over their appearance.

Answer 3

Unfortunately there is no way to do this unless you create your own Appbar Control.

Here are some Guidelines for using windows phone buit in AppBar:

All the icons used in the ApplicationBar should be 48x48 PNG files, white with transparent background.

Windows Phone will take care of changing the color of the icon if the the user is using a light theme (so the icon will turn to black)

You can read here the rules for the icons, and here on how to create a new one!

Answer 4

Setting application bar foreground color should work:

ApplicationBar.ForegroundColor = Color.FromArgb(255, 167, 246, 0);

However, your icon does not work. The icon should have opaque foreground with transparent background. The foreground is painted with the given foreground color.

You can probably find a suitable icon from the Windows Phone SDK:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons

The file transport.play.png looks very similar to the one you have.