How to customize AppBar button icon image in XAML/C++ project RRS feed

All replies

  • From a code point of view the HTML AppBar and the Xaml AppBar are essentially unrelated. The png image spec is the same for everybody.

    What do you mean by the press image not being good? How are you creating the AppBar button? Are you using the template from the XAML AppBar control sample ? Just adding a Button directly? Something else?

    It helps if you can explain:

    1. What is your app doing? What code do you have to set the AppBar and its button? What is the png you are using? How can we reproduce the problem? Can you reproduce this with minor modifications to the XAML AppBar control sample ?
    2. What behavior do you expect?
    3. What behavior do you actually get?

    You can see the template used for the buttons in the XAML AppBar control sample and can modify them for your app if necessary. It assumes that the button glyphs are actually text from the Segoe UI Symbol font. If you look in its StandardStyles.xaml file at the AppBarButtonStyle's "Pressed" VisualState it will change the Foreground color of the Content and BackgroundGlyphs. This will change the colours correctly if the Content and BackgroundGlyph are text, but PNGs cannot change color that way.

    If you want the button to invert its colors when pushed you would need to have two PNGs and swap them. Another option is to leave the foreground alone but to show a filled ellipse behind it when pushed.


    Friday, August 10, 2012 7:22 AM
  • Hi Rob san,

    Thank you for the comment.

    The sample(XAML AppBar control sample) does not use png image, only use static resource, I think.

    I made the png using Greenfish Icon Editor Pro.

    I only use alpha channel and white color. This is 40x40px image.

    It only has Normal state of image.

    The background color is black.

    When I press the button, the button(the inner side of the circle) become all white color.

    I expected it become invert image.

    I mean the white part become black, and the black part become white.

    >>If you want the button to invert its colors when pushed you would need to

    >>have two PNGs and swap them.

    This is what I wanted to do.

    How to specify the second(inverted) png image in the  Xaml.


    • Edited by kata._ Friday, August 10, 2012 8:03 AM
    Friday, August 10, 2012 7:54 AM
  • anybody was able to resolve this?
    Sunday, December 23, 2012 12:24 AM
  • Hi,

    I've been waiting for a solution.


    Tuesday, December 25, 2012 5:44 AM