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

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    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

  • Question
    Sign in to vote
    1
    Sign in to vote

    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

  • Question
    Sign in to vote
    1
    Sign in to vote

    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    Thanks.
    Wednesday, July 24, 2013 1:16 AM