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


</div>

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"
                data-win-options="{id:'cmdhome',icon:'home',section:'selection',tooltip:'home'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdsave',icon:'save',tooltip:'click to save'}">
        </button>
       
    </div


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.

image

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"
         data-win-control="WinJS.UI.Flyout">
        <h3>Volume</h3> <input type="range" />
    </div>

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"
                data-win-options="{
            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 .

image

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

 


.win-appbar
{
    background-color: red;
    border: 3px solid blue;
}

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

image

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:

clip_image002

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s