Bitsian
Bitsian

Reputation: 2256

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

Actual Intended Result Bottom App Bar Icon should be like this ( Needed)

But appearing like this in emulator But its appearing like this in the emulator

This is the icon Image asset I am usingThis is the image icon am using in the bottom app bar

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.

Upvotes: 1

Views: 555

Answers (4)

Mohamed Thaufeeq
Mohamed Thaufeeq

Reputation: 181

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

Upvotes: 2

sast
sast

Reputation: 478

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.

Upvotes: 0

Amit Bhatiya
Amit Bhatiya

Reputation: 2621

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!

Upvotes: 0

Noor Saifi
Noor Saifi

Reputation: 11

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.

Upvotes: 0

Related Questions