Answered by:
Specs for custom appbar icons

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.
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, June 4, 2012 12:41 PM
- Marked as answer by Emad Monday, June 4, 2012 12:58 PM
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.
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, June 4, 2012 12:41 PM
- Marked as answer by Emad Monday, June 4, 2012 12:58 PM
Sunday, June 3, 2012 11:27 PM