AppBar goes out of sync when I navigate between pages in a Navigation Template Project RRS feed

  • Question

  • In a project with Navigation template, I've successfully added a second page and an app bar.  When I run the app, everything works and looks fine with appbar on top with 3 buttons on right. But when I use those buttons to navigate between 3 pages, the app bar goes out of sync. When I click on any app bar buttons to navigate from one page to second page, the buttons on appbar comes down of that blue bar. What is the problem?

    Wednesday, April 10, 2013 7:15 PM

All replies

  • Hello,

    Could you describe what the appbar comes down of that blue bar. Could you share us your markup for us to reproduce this issue?

    I would like to suggest you follow the steps and try the navigation sample in the the following article:



    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, April 12, 2013 5:45 AM
  •   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>
        <meta charset="utf-8" />
        <!-- 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>
        <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'}">
                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 data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'Edit',section:'global',tooltip:'Edit timer'}">

      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) {
        function gotoP2(eventInfo) {
        function gotoP3(eventInfo) {

    Friday, April 12, 2013 7:52 PM
  • Hi,

    Just tried reproducing your issue but I could not see any issue with the same.

    One minor mistake I found was this:

    var page2Button = appbar.getCommandById("P2");
    Should be

    var page2Button = appbar.getCommandById("p2"); // Should be small P

    But I cannot see any blue bar as such as you have mentioned. I guess that is in your CSS. May be the issue is in CSS.

    Please share your CSS to help you better.

    - Girija

    Friday, April 12, 2013 8:06 PM
  •   Thanks for looking into it. Here is CSS part. All 3 pages in the project has similar CSS.

    body {
    	display: -ms-grid;
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 1fr;
    	background-color: #5DF3CC;
    #mainContent {
    	display: -ms-grid;
    	-ms-grid-columns: 128px 1fr;
    	-ms-grid-rows: 128px 1fr;
    #header {
    	-ms-grid-column: 2;
    	-ms-grid-row: 1;
    #section {
    	-ms-grid-column: 2;
    	-ms-grid-row: 2;
    	display: -ms-grid;
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 1fr 50px 1fr;
    #stopWatch {
    	-ms-grid-row: 1;
    	height: 300px;
    	vertical-align: middle;
    	display: inline-block;
    	line-height: 300px;
    	text-align: center;
    #buttons {
    	-ms-grid-row: 3;
    	text-align: center;
    .showTime {
    	vertical-align: middle;
    	display: inline-block;
    	text-align: center;
    .buttonStyle input {
    	display: inline-block;
    	height: 100px;
    	width: 200px;
    	border: 2px solid #216005;
    	text-align: center;
    	color: #F5FBFB;
    	background-color: #42B566;
    	font-family: Arial, Helvetica;
    	font-size: xx-large;
    	font-weight: bold;
    	font-style: normal;
    	padding: 14px;
        border-radius: 50px;
        box-shadow: 0 8px 0 #1b383b;
        text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
    .hideButton input {
    	display: none;

    This CSS is applied to  second page. HTML for that: 

        <div id="mainContent" class="stopWatch fragment">
            <header id="header" aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">StopWatch</span>
            <section id="section" aria-label="Main content" role="main">
                <div id="stopWatch" class="showTime"><span id="hours" class="showTime"></span>
                    <span id="minutes" class="showTime displayTimer"></span>
                    <span id="seconds" class="showTime displayTimer"></span>
                    <span id="miliseconds" class="showTime"></span>
                <div id="buttons" class="showTime">
                    <span id="ssButtons" class="buttonStyle"><input class="buttonStyle" type="button" id="startBt" value="Start" /></span>
                        <span id="stopButton" class="buttonStyle hideButton"><input class="buttonStyle hideButton" type="button" id="stop" value="Stop" />
                    <span id="resetButton" class="buttonStyle"><input class="buttonStyle" type="button" id="reset" value="Reset" /></span>

    I have not changed anything in default.css. It is same as it comes with a navigation template project.

    • Edited by SonalMac Sunday, April 14, 2013 5:14 AM
    Friday, April 12, 2013 11:21 PM
  • HI,

    I still do not see any top blue bar you mentioned. Also I do not see any mention for style of appbar in the CSS you have provided. I cannot see nay style for app bar as you mentioned.

    - Girija 

    Sunday, April 21, 2013 6:19 AM