locked
How to load my own image in a Windows Metro AppBar Command

    Question

  • So I have my own images that I want to load in the AppBar. I know I can use a string in the icon property of the command and I read I can also use a png. I cannot find info about how to set that png file. Does it have to be of a special size? How do I need to reference it?

    Thanks

     

    http://bit.ly/sebagomez

    Wednesday, August 08, 2012 11:22 PM

Answers

  • Here's an excerpt from the upcoming RTM preview of my book (Chapter 7; we'll be putting out this next preview when the Win8 RTM build is available).

    Custom Icons

    Earlier we saw that the icon property of an AppBarCommand typically comes from the Segoe UI Symbol font. Although this is suitable for most needs, you might want at times to use a character from a different font (some of us just can’t get away from Wingdings!) or to provide custom graphics. The app bar supports both.

    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";
    }

    To provide graphics of your own, do the following for a 100% resolution scale:

    • 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)'.

    Scenario 3 of the HTML AppBar control sample demonstrates custom icon graphics for an Accept button:

    The icon comes from a file called accept.png, which appears something like this (I’ve adjusted the brightness and contrast and added a border so you can see each cell clearly):

    The declaration for the app bar button then appears as follows (some properties omitted for brevity):

    <button data-win-control="WinJS.UI.AppBarCommand"
       
    data-win-options="{id:'cmdAccept', label:'Accept', icon:'url(images/accept.png)' }">

    Note that although the sample doesn’t have variations of the icon for resolution scales, it does provide variants for high contrast themes, an important accessibility consideration that we’ll come back to in Chapter 17. For this reason, the button element includes style="-ms-high-contrast-adjust:none" to override automatic adjustments for high contrast.

    Thursday, August 09, 2012 2:49 AM

All replies

  • Here's an excerpt from the upcoming RTM preview of my book (Chapter 7; we'll be putting out this next preview when the Win8 RTM build is available).

    Custom Icons

    Earlier we saw that the icon property of an AppBarCommand typically comes from the Segoe UI Symbol font. Although this is suitable for most needs, you might want at times to use a character from a different font (some of us just can’t get away from Wingdings!) or to provide custom graphics. The app bar supports both.

    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";
    }

    To provide graphics of your own, do the following for a 100% resolution scale:

    • 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)'.

    Scenario 3 of the HTML AppBar control sample demonstrates custom icon graphics for an Accept button:

    The icon comes from a file called accept.png, which appears something like this (I’ve adjusted the brightness and contrast and added a border so you can see each cell clearly):

    The declaration for the app bar button then appears as follows (some properties omitted for brevity):

    <button data-win-control="WinJS.UI.AppBarCommand"
       
    data-win-options="{id:'cmdAccept', label:'Accept', icon:'url(images/accept.png)' }">

    Note that although the sample doesn’t have variations of the icon for resolution scales, it does provide variants for high contrast themes, an important accessibility consideration that we’ll come back to in Chapter 17. For this reason, the button element includes style="-ms-high-contrast-adjust:none" to override automatic adjustments for high contrast.

    Thursday, August 09, 2012 2:49 AM
  • Hi

        <Page.BottomAppBar>
            <AppBar Padding="10 0">
                <Grid>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button x:Name="webViewButton" Style="{StaticResource NextAppBarButtonStyle}" AutomationProperties.Name="Web" Click="webViewButton_Click">
                            <Button.Content>
                                <Image Source="Assets/WebLiinkIcon.png" />
                            </Button.Content>
                        </Button>
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>

    Can the purpose be achieved?

    Thursday, August 09, 2012 2:51 AM
  • You have to ask this question in the forum for C#/XAML apps (http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/threads) --this forum is for HTML/JS specifically.

    Thursday, August 09, 2012 4:34 AM
  • -this forum is for HTML/JS specifically.

    Sorry, does not notice.

    Thursday, August 09, 2012 8:09 AM
  • Thanks Kraig, I do have the pdf of the preview of your book and it had helped me a lot! Looking forward for the final version.

    Regards


    http://bit.ly/sebagomez

    • Proposed as answer by wimk Saturday, February 02, 2013 3:29 PM
    Thursday, August 09, 2012 1:17 PM
  • I wont get my icon, as given ..any sugestion?? THNX

    var appbar = document.getElementById("BottomAppBar").winControl; if (appbar) { //Set the app bar commands property to populate it var commands = [ { id: 'cmdDBInfo', label: 'Debiteuren', Icon:'url(images/apm_group.png)' , section: 'global', tooltip: 'Debiteuren' }, { type: 'separator', section: 'global' }, { id: 'cmdPrint', label: 'Print', icon: 'remove', section: 'global', tooltip: 'Afdrukken' }, { type: 'separator', section: 'global' }, { id: 'cmdBetaal', label: 'Betalen', icon: 'delete', section: 'global', tooltip: 'Betalingen' }, { type: 'separator', section: 'global' }, { id: 'cmdLijsten', label: 'Lijsten', icon: 'camera', section: 'global', tooltip: 'Lijsten' }]; appbar.commands = commands;



    • Edited by wimk Saturday, February 02, 2013 3:32 PM wk
    Saturday, February 02, 2013 3:30 PM
  • In your url, use a leading /, as in /images/apm_group.png. That will reference the path from your package root, which is what you want.
    • Proposed as answer by wimk Sunday, February 03, 2013 3:30 PM
    Saturday, February 02, 2013 4:18 PM
  • thanks , that works for a bit

    I saw the image i made only is shown while OnMouseOver is triggert, so i've do more..

    but step 1 is made :)

    Sunday, February 03, 2013 3:30 PM
  • Can we change the color of the icon

    - when the appbar button is in pressed state

    - and we are using the custom icon

    The sample code on msdn for customizing appbar says following css should work. However, it works only for the default icons.

    /* To match background color, set the pressed state icon color */

    .win-appbar.customIconsAppBar button:hover:active .win-commandimage,

    .win-appbar.customIconsAppBar button:-ms-keyboard-active .win-commandimage,

    .win-appbar.customIconsAppBar button[aria-selected=true] .win-commandimage {

        color: rgb(90, 200, 90);

    }

    Monday, March 04, 2013 11:26 PM