Working with app bar in WinJS based Windows Store Application

In this post we will learn to work with the app bar in a WinJS based Windows Store application. Let us start with creating an app bar. The app bar can be created by setting the data-win-control value of a div to WinJS.UI.AppBar.


<div data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">


Now you can add command buttons in an app bar as follows:


   <div data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand"
        <button data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdsave',icon:'save',tooltip:'click to save'}">

As of now we have added two command buttons with the icon, tooltip etc. A command button can be added to a app bar using the button control attributed with the WinJS.UI.AppBarCommand attribute.


Let us say you want to add a flyout on the click of the app bar command. That can be added in two steps.


<div id="volumeFlyout"
        <h3>Volume</h3> <input type="range" />

As the second step we can use this flyout as option in app bar command. This can be done as follows


<button data-win-control="WinJS.UI.AppBarCommand"
            id: 'flyout',
            icon: 'volume',
            label: 'Volume',
            type: 'flyout',
            flyout: select('#volumeFlyout')}"></button>

On running application you will find that click of volume command gives a flyout .


You can also style the app bar. For example app bar color can be changed using the CSS a below,


    background-color: red;
    border: 3px solid blue;

On running you will find that app bar color has been changed as shown below:


You can change the image of the icons using the CSS shown below:


.win-appbar .win-commandimage
    color: rgb(28, 160, 218);

On running you will find that app bar color has been changed as shown below:


You can apply many such style to app bar and its commands. You can attach event to the command buttons and call a function to perform a task.

I hope this post is useful. Thanks for reading.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at