What is the best design for a app has subdiv with pages navigation RRS feed

  • Question

  • Ok, i have many question here for the design of page navigation.

    I have an app using the multi page navigation design as here:


    At the same time i have one page1 has a divX, which i want to switch pages in divX but keep other part of page1, the behavior of divX is like a frame. But i don't want to use iframe to replace the divX, because i want it like a widget to easy to use. so the problem comes:

    1) if the pages switch in divX also use the pageNavigator, it will impact the whole app navigator, and exception is thrown without any useful info:


    2) it has same issue using render when first load divX, it will have exception when back to page1 from other pages

    WinJS.UI.Pages.render("/pages/shell/shell.html", renderHost, {
                    controlText: "This control created by calling WinJS.UI.Pages.render",
                    message: "Render control"

    3) if i use 2) to switch pages in divX and change divX to iframe, the issue is gone. but i don't want to use iframe like i said.

    From the test, i suppose it should not use multi nesting PageControlNavigator. because there only has one winjs.navigation, right?

    but what is the recommended design for my scenario? Like I have a widget, also need page switch in it, but i don't want it has impact to the whole app and other part, how can i load it in the app? 

    Tuesday, September 17, 2013 4:11 AM

All replies

  • Can you upload your problem demo project to SkyDrive? That will help understand the problem better.

    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Tuesday, September 17, 2013 10:39 PM
  • Was there ever a solution to this problem?  I need to do the same thing.  I have a page with some buttons on the left.  When I click the buttons, I want to render different PageControls on the right.  If I nest the PageControlNavigator, the nested one takes over all navigation and messes up the app.  If I manually use the WinJS.UI.Pages.render method, I don't get the automatic firing of the unload and other events of the PageControls.  

    It would be nice if I could treat the buttons like tabs and the PageControls like tab pages.  

    Tuesday, April 22, 2014 5:19 PM
  • I tested this out, couldn't make a nested navigator work. If you don't need to use navigation in the page with the <button> tabs (i.e., top level multi-page navigation), why not try to add the <button> tabs to a left column in default.html, and get rid of the nesting? Then you use the navigator just when you click the button tabs.

    Wednesday, April 23, 2014 11:16 PM
  • HTML Grid might be a good way to go for the <button> tabs. It is discussed here:


    You might also read this:


    I created a simple app that does this. It uses the navigator only when you click one of the left column buttons. I left the Back button in page 2 and page 3, and it works, but it should probably be removed.

    1) Started with Navigation template.

    2) Added two page controls (page2, page3) in their own folders (page2, page3, respectively).

    3) Updated Default.html:

        <div id="myGrid">
            <div id="item1">
                <button class="btnPage1">Page 1</button>
                <button class="btnPage2">Page 2</button>
                <button class="btnPage3">Page 3</button>
            <div id="item2">
                <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">
                   <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
                </div> -->

    4) Added these to default.css

    #myGrid {
        display: -ms-grid;
        border: blue;
        -ms-grid-columns: 130px 100%;
        -ms-grid-rows: 500px;

    #item1 {
      background: transparent;
      border: orange solid 0px;
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    #item2 {
      background: transparent;
      border: green solid 0px;
      -ms-grid-row: 1;
      -ms-grid-column: 2;

    .btnPage1 {
        top: 150px;
        left: 20px;

    .btnPage2 {
        top: 175px;
        left: 20px;

    .btnPage3 {
        top: 200px;
        left: 20px;

    5) Added this to default.js in initialization section:

            var btn1 = document.querySelector(".btnPage1");
            btn1.addEventListener('click', btn1Handler);

            var btn2 = document.querySelector(".btnPage2");
            btn2.addEventListener('click', btn2Handler);

            var btn3 = document.querySelector(".btnPage3");
            btn3.addEventListener('click', btn3Handler);

    6) Added these event handlers to default.js, inside the anonymous function, right after app.start() call:

        function btn1Handler(args) {
            if (WinJS.Navigation.location != "/pages/home/home.html") {

        function btn2Handler(args) {
            if (WinJS.Navigation.location != "/pages/page2/page2.html") {

        function btn3Handler(args) {
            if (WinJS.Navigation.location != "/pages/page3/page3.html") {

    Thursday, April 24, 2014 8:44 PM