Application Bar For Windows 10 Universal App Using WinJS

The App bar is designed to expose application commands to the user. There are two types of app bar you can use.

TopAppBar
BottomAppBar

You can put any control that you like into the app bar.

Let’s see the steps.

Create new Windows 10 universal application using JavaScript. For creating a new Windows 10 universal project, refer to the following:

Develop Apps For Windows 10

Now go to your default.html page and write the following code.

<divid="appBar" data-win-control="WinJS.UI.AppBar">
<buttondata-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'save', section: 'global', label: 'save', icon: 'save', tooltip:'save'}">
</button>
<buttondata-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'play', section: 'global', label: 'Play', icon: 'play', tooltip:'play'}">
</button>
<buttondata-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'pause', section: 'global', label: 'Pause', icon: 'pause', tooltip:'pause'}">
</button>
</div>
<divid="appBarClick">
</div>

Here, I create three appbar buttons, save, play and pause. Set the button id, icon and label for your appbar. You can see the available appbar icons in ui.js file like the following screen.

code

Now go to your default.js file present underjs folder in the solution files and write the following code in the end of the file to perform the appbar button click event.

(function()
{
"use strict";
var page = WinJS.UI.Pages.define("default.html",
{
ready: function(element, options)
{
document.getElementById("save").addEventListener("click", clickSave, false);
document.getElementById("play").addEventListener("click", clickPlay, false);
document.getElementById("pause").addEventListener("click", clickPause, false);
},
});
functionclickSave()
{
document.getElementById("appBarClick").innerText = "Save button clicked";
}
functionclickPlay()
{
document.getElementById("appBarClick").innerText = "Play button clicked";
}
functionclickPause()
{
document.getElementById("appBarClick").innerText = "Pause button clicked";
}
})();

Now run the application and see the output looks like the following screen.

output

For more information on Windows 10 UWP, refer to my e-book:

Windows 10 UWP E-book

Source Code

Read more articles on Universal Windows Platform:

10 Comments

Join the conversation! Your thoughts help the community grow.

Gowtham Rajamanickam10y ago
good share
Kirtan Parmar10y ago
thanks
Kirtan Parmar10y ago
great share
Debasis Saha10y ago
Good share..
Dhanasekar10y ago
Thanks for sharing
Rahul Kumar Saxena10y ago
Nice One
Karthikeyan K10y ago
Good one
Gowtham Rajamanickam10y ago
good one..
Vignesh Mani10y ago
Good
Mohammed Ibrahim10y ago
nice