locked
Appbarcommand Image size RRS feed

  • Question

  • Hi,

    I have added an button in appbar as following

     
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'btn1',label:'TestButton',icon:'url(./images/test.jpeg)'}"> </button>

    But the image does not appear properly on the button.

    I did not find a way of specifying the width and height.

    How can I resolve this issue.

    Regards

    Lalit

    Friday, August 31, 2012 5:08 AM

Answers

  • To answer your question (as the author of the post you linked to), yes, the 160x80 graphic is the requirement for a custom app bar graphic, because it's necessary to have the different states of the button available for the control.

    At the same time, note that this is the requirement for custom raster icons. You can also use glyphs from other fonts if that is an option for you. I describe how this works in Chapter 7 of Programming Windows 8 Apps with HTML, CSS, and JavaScript, which is available (for free) in its second preview. Specifically look in the section entitled "Custom Icons"--here's the relevant excerpt:

    To use a different font for the whole app bar, simply add a class to the app bar and create a rule based on win-appbar:

    win-appbar.customFont {
       
    font-family: "Wingdings";
    }

    To change the font of a specific command button, add a class to its extraClass property (such as customButtonFont) and create a rule with the following selector (as used in Scenario 1 of the modified sample):

    button.customButtonFont .win-commandimage {
        
    font-family: "Wingdings";
    }

    .Kraig

    Friday, August 31, 2012 3:13 PM

All replies

  • Hi Lalit,

    try to point the icon to a 48x48px .png instead of .jpg. This will work fine.

    Greets

    Marco

    Friday, August 31, 2012 8:03 AM
  • Hi,

    Pointing to a 48X48 png does not work.

    I found this solution at http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/3e64613f-41d4-4062-b886-fd77011ef237

    Create a 160x80 pixel png sprite image with a transparent background, saving the file with the .scale-100 suffix in the filename.
    • This sprite is divided into two rows of four columns, that is, 40x40 pixel cells. The top row is for the light styling theme, the bottom is for the dark theme.
    • Each row has four icons for the following button states, in this order from left to right: default (rest), hover, pressed (active), and disabled.
    • Each image is centered in its respective 40x40 cell, but remember that a ring will be drawn around the icon, so generally keep the image in the 20-30 pixel range vertically and horizontally. It can be wider or taller in the middle areas, of course, where the ring is widest.

    For other resolution scales, multiple the sizes by 1.4 (140%) and 1.8 (180%), and use the .scale-140 and .scale-180 suffixes in the image filename.

    To use the custom icon, point the command’s icon property to the base image URL (without the .scale-1x0 suffixes), for instance, icon: 'url(images/icon.png)'

    This solution does work, but is this the only way to achieve the desired result?

    Friday, August 31, 2012 8:31 AM
  • To answer your question (as the author of the post you linked to), yes, the 160x80 graphic is the requirement for a custom app bar graphic, because it's necessary to have the different states of the button available for the control.

    At the same time, note that this is the requirement for custom raster icons. You can also use glyphs from other fonts if that is an option for you. I describe how this works in Chapter 7 of Programming Windows 8 Apps with HTML, CSS, and JavaScript, which is available (for free) in its second preview. Specifically look in the section entitled "Custom Icons"--here's the relevant excerpt:

    To use a different font for the whole app bar, simply add a class to the app bar and create a rule based on win-appbar:

    win-appbar.customFont {
       
    font-family: "Wingdings";
    }

    To change the font of a specific command button, add a class to its extraClass property (such as customButtonFont) and create a rule with the following selector (as used in Scenario 1 of the modified sample):

    button.customButtonFont .win-commandimage {
        
    font-family: "Wingdings";
    }

    .Kraig

    Friday, August 31, 2012 3:13 PM
  • Not sure if you knew this, but here's a list of canonical icons that you can just reference by name:

    http://www.jaimerodriguez.com/blog/winjs-ui-appbaricon/

    Friday, August 31, 2012 4:44 PM