Post
Ask Question

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:

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

  1. <divid="appBar" data-win-control="WinJS.UI.AppBar">  
  2.     <buttondata-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'save', section: 'global', label: 'save', icon: 'save', tooltip:'save'}">  
  3.         </button>  
  4.         <buttondata-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'play', section: 'global', label: 'Play', icon: 'play', tooltip:'play'}">  
  5.             </button>  
  6.             <buttondata-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'pause', section: 'global', label: 'Pause', icon: 'pause', tooltip:'pause'}">  
  7.             </button>  
  8.           </div>  
  9.       <divid="appBarClick">  
  10.   </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.
  1. (function()   
  2.  {  
  3.     "use strict";  
  4.     var page = WinJS.UI.Pages.define("default.html",  
  5.     {  
  6.         ready: function(element, options)  
  7.         {  
  8.             document.getElementById("save").addEventListener("click", clickSave, false);  
  9.             document.getElementById("play").addEventListener("click", clickPlay, false);  
  10.             document.getElementById("pause").addEventListener("click", clickPause, false);  
  11.         },  
  12.     });  
  13.     functionclickSave()  
  14.     {  
  15.         document.getElementById("appBarClick").innerText = "Save button clicked";  
  16.     }  
  17.     functionclickPlay()   
  18.     {  
  19.         document.getElementById("appBarClick").innerText = "Play button clicked";  
  20.     }  
  21.     functionclickPause()   
  22.     {  
  23.         document.getElementById("appBarClick").innerText = "Pause button clicked";  
  24.     }  
  25. })();  
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:

Source Code

Read more articles on Universal Windows Platform:


Similar Articles