locked
App bar icons disappear when I enable multilingual app toolkit for my js metro project.

    Question

  • Hi,

    I use Multilingual App Toolkit for Visual Studio 2012 to translate my UI strings. But when I enable multilingual app toolkit On the Tools menu and rebuild my project. I find that the buttons' icons on appbar disappear. Like this:

    And then I disable the multilingual app toolkit. Thoes icons will come back. Like this:

    I recreate a blank project to verify this problem. The code is simple:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>OneStroke</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <p>Content goes here</p>
        <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="" style="background-color:gray">
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
            </button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}">
            </button>
            <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'global'}" />
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global',tooltip:'Delete item'}">
            </button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}">
            </button>
        </div>
    </body>
    </html>
    

    The toolkit was download from here: Multilingual App Toolkit for Visual Studio 2012. And I have installed Update 3 for my VS.

    Please tell me how to resolve the problem.

    Sunday, July 21, 2013 8:33 AM

Answers

  • Hello,

    Please try to add data-win-res attribute to each app bar command with this pattern:

    <div data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand" 
    	 data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}"
    	 data-win-options="{id:'cmdCommand1',icon:'add',section:'global'}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
    	 data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}"
    	 data-win-options="{id:'cmdCommand2',icon:'remove',section:'global'}">
    </button>
    </div>

    #How to localize WinJS controls (Windows Store apps using JavaScript and HTML)

    http://msdn.microsoft.com/en-us/library/windows/apps/jj673579.aspx

    Hope this helps, thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Lattimore Wednesday, July 24, 2013 1:16 AM
    Tuesday, July 23, 2013 10:01 AM
    Moderator

All replies

  • Hello,

    Please try to add data-win-res attribute to each app bar command with this pattern:

    <div data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand" 
    	 data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}"
    	 data-win-options="{id:'cmdCommand1',icon:'add',section:'global'}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
    	 data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}"
    	 data-win-options="{id:'cmdCommand2',icon:'remove',section:'global'}">
    </button>
    </div>

    #How to localize WinJS controls (Windows Store apps using JavaScript and HTML)

    http://msdn.microsoft.com/en-us/library/windows/apps/jj673579.aspx

    Hope this helps, thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Lattimore Wednesday, July 24, 2013 1:16 AM
    Tuesday, July 23, 2013 10:01 AM
    Moderator
  • Thanks.
    Wednesday, July 24, 2013 1:16 AM