Home/ Questions/Q 9176427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:06:28+00:00

I have created an appbar for my windows8 application using javaScript. I want to

  • 0

I have created an appbar for my windows8 application using javaScript.

I want to put the label of the appbar button besides the appbar icon, instead of below the appbar icon.

Can any one plz tell me whether it is possible or not. If yes, how?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, I’d be a bit wary of changing the default behavior in such a way, since it will deviate from the experience that the user will have with most other applications on the platform. That said, I think it should be doable, in at least one way.

    Here are a couple of approaches to consider, not that I consider any ‘optimal’, but they may be you a place to start:

    Looking at the structure of the generated object (you can use Interactive Mode in Blend) you can see the command is two stacked span tags (one containing the icon and circle, and the other the command text). From WinJS.UI.AppBar doc, you can style these spans, but since a span is an in-line element, I don’t believe you’ll can move it vertically so that it sits next to the button. You can play with margin-right and margin-left a bit though.

    Now another option is to try rewriting the DOM that’s generated so that you throw away the representation as span tags and build something yourself, but that’s a lot of work with unknown fragility.

    A third option is roughly the design-time equivalent of modifying the DOM. Instead of using the default behavior of AppBar, create a custom layout. For instance, the following markup (which is not production-quality, with in-line styles and all :)) produces the image that then follows:

        <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout: 'custom'}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 1</span>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 2</span>
</div>

    enter image description here

    There is an AppBar sample on the Windows Dev Center that may help you as well if you go the custom route.

    • 0