Thanks for much awaited answer. I've used the same article as you provided to create an appbar. But still it gives so much problem.
When I run my app from Visual Studio, and click right button to activate the appbar, it looks fine. It shows a top blue bar with 4 buttons I created. As soon as I click one of the buttons to navigate to a different page, the appbar becomes wider. Now If
I click mouse right button, the blue bar covers half the screen. And buttons positions go out of places. I'm copy pasting mark-up over here. Please give a look. I'm tired of trying and looking for this since a week.
My default.html file from a navigation template project:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>watchTime</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- watchTime references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/navigator.js"></script>
</head>
<body>
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'top'}">
<hr
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type: 'separator', section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'homeButton', label:'Clock', icon:'clock', section:'global', tooltip:'Go to the home page'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'p2', label:'StopWatch', icon:'page', section:'global', tooltip:'Go to Page2'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'p3', label:'Timer', icon:'page', section:'global', tooltip:'Go to Page3'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add timer'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'Edit',section:'global',tooltip:'Edit timer'}">
</button>
</div>
</body>
</html>
PArt of default.js from the project :
args.setPromise(WinJS.UI.processAll().then(function () {
//Retrieve the app bar.
var appbar = document.getElementById("appbar").winControl;
//Attach even handlers to the command buttons:
var homeButton = appbar.getCommandById("homeButton");
homeButton.addEventListener("click", goToHomePage, false);
var page2Button = appbar.getCommandById("P2");
page2Button.addEventListener("click", gotoP2, false);
var timerButton = appbar.getCommandById("p3");
timerButton.addEventListener("click", gotoP3, false);
if (nav.location) {
nav.history.current.initialPlaceholder = true;
return nav.navigate(nav.location, nav.state);
} else {
return nav.navigate(Application.navigator.home);
}
}));
}
});
function goToHomePage(eventInfo) {
WinJS.Navigation.navigate("/pages/home/home.html");
}
function gotoP2(eventInfo) {
WinJS.Navigation.navigate("/pages/p2/p2.html");
}
function gotoP3(eventInfo) {
WinJS.Navigation.navigate("/pages/p3/p3.html");
}
