locked
Specs for custom appbar icons RRS feed

  • Question

  • What are the specs for a custom appbar icon? i.e. dimensions, colors, background, transparency, etc...  

    Also how do I set the appbar to use a custom icon...  I tried setting the icon property to /images/myicon.png and it didn't work


    www.emadibrahim.com

    Thursday, May 31, 2012 10:12 AM

Answers

  • The specs I've seen is this: create a PNG that's 160px wide x 80px tall. Each 40x40 cell in the image is for one of the icon variants, with each one centered in that cell. Each icon is 20-30px wide (to fit in the circle). The light version is the top row, the dark rows is the bottom row. The order of the icons is rest (default state), hover, pressed, and disabled.

    Hope that is sufficient.

    Sunday, June 3, 2012 11:27 PM

All replies

  • Maybe check this out:
    http://code.msdn.microsoft.com/windowsapps/App-bar-sample-a57eeae9


    Couldn't find a custom button in the code examples, but I only had a quick glance.


    • Edited by Harlequin Friday, June 1, 2012 1:56 PM Fix my poor grammar...
    Thursday, May 31, 2012 2:35 PM
  • There was a custom icon in there but it still doesn't tell me what the specs are for creating a custom button.  I need to tell my designer how to do it and not just reverse engineer.

    For the sake of others, i have attached the png image from the sample above.

    Thanks.


    www.emadibrahim.com

    Friday, June 1, 2012 9:18 PM
  • The specs I've seen is this: create a PNG that's 160px wide x 80px tall. Each 40x40 cell in the image is for one of the icon variants, with each one centered in that cell. Each icon is 20-30px wide (to fit in the circle). The light version is the top row, the dark rows is the bottom row. The order of the icons is rest (default state), hover, pressed, and disabled.

    Hope that is sufficient.

    Sunday, June 3, 2012 11:27 PM