Mixing Router and PageControls

Hey guys,
I hope you can help me out here, because I am really doubtful about how I am structuring my navigation.

What I am trying to build:
I am starting my app, which is starting with 2 different pages.
A login and a registration page.

After a successfull login/registration I get redirected to the “main part” of my app.
Here I want to have 2 (and later more) different pages (lets call them map.ux and overview.ux) and a PageIndicator with is always visible at the bottom (only visible in my main part, not in the login/registration).
From one of the two pages (overview.ux) I can enter a third page (details.ux), which is not accessible via the bottom PageIndicator.
(I fetch a data list on the page and want to redirect to the third page, showing detailed information about the selected data field on the previous page).

Right now I am starting my Main.ux with a Router and a Navigator.
This navigator only contains three pages (login, registration and my “loggedin-page”).
Both pages (login & registration) can redirect me to my loggedin-page.

This loggedin-page contains a PageControl with the two mentioned pages and a PageIndicator at the bottom.

Is this the right way to handle this?
I am currently struggeling in redirecting from my overview.ux to the details.ux page.
I am fetching data and each them in a StackPanel:

<StackPanel>
      <Each Items="{data}">
        <DockPanel Clicked="{gotoDetail}">
          <Text value="{title}"/>
         </DockPanel>
      </Each>
</StackPanel>

The gotoDetail-Function should lead me to the details page (which, somehow, should still contain my fetched data and the information about which information I have picked).
But I don’t know how to continue here.

Having layers of navigation is a common pattern, and what you describe sounds much like what I do on my sample projects. I have an outer Navigator to handle general states. One of them has a PageControl, with an action bar. Some of those pages in turn may have another navigator to get to sub-pages.

Alternately, if the sub-pages should hide the action-bar I might place them back in the outer navigation. This makes it easier to get the UI right to hide the action bar.

Rest assured that nesting is fully supported, and we expect it in typical applications.

Thank you for your reply!
But I don’t know how to get my PageControl to a Sub-Page, which is not visible in my PageIndicator.
But at the same time, I don’t want to lose my PageIndicator when I am on that Sub-Page.
The Indicator should be still visible, but the Sub-Page shouldn’t be included in that Indicator.

How can I do that?

The logical app-page structure doesn’t need to map to the UI structure. You can put your sub-page back at the level of the first Navigator, for example:

<Navigator ux:Name="topLevel">
   <Login ux:Template="login"/>
   <TabbedPanel ux:Template="home"/>

   <TabSubPage ux:Template="sub"/>

Where TabbedPanel contains your PageControl and PageIndicator. In this panel, when the user navigates to a logical sub-page you can call router.push( 'sub' ) for a top-level change. The entire TabbedPanel will be shifted away to go to the TabSubPage.

The user doesn’t see these path names, and it’ll behave to them as a page transition from the PageControl.

I’ve done some layouts with more layers involved, but they resolve around this same concept. Just keep in mind that the logical sub-page doesn’t have to be an actual sub-page in the UI-tree.

Exactly.
Thats how I do my ‘Top Level Navigation’

But if I use router.push( 'sub' ) to navigate to another page of that Navigator, then I am losing my PageIndicator right?

I still want to see my PageIndicator on that specific sub page (to still be able to navigate around).
But I don’t want that sub-page to be available in that PageIndicator.

Okay, I understood you wanted to hide the tab bar. To stay in the same view you can place another Navigator inside the PageControl. Something like:

<Navigator>
	<Login ux:Template="login"/>
	<PageControl ux:Template="home">
		<PageOne ux:Name="one"/>
		<PageTwo ux:Name="two"/>
		<PageWithSubPages ux:Name="three"/>
	</PageControl>
</Navigator>

<Panel ux:Class="PageWithSubPages">
	<Navigator DefaultPath="start">
		<StartPage ux:Name="start"/>
		<SubPage ux:Name="sub"/>
	</Navigator>
</PageWithSubPages>

When you go to login/three it’ll implicitly go to login/three/start as the default path. To go to the subpage navigate to login/three/sub.

I basically understand what you are meaning but I am still a little stuck.
Maybe you can help me out a little bit more detailed?

This is my main navigation in my Main.ux:

<Router ux:Name="router" />
<Navigator DefaultPath="LoggedInPage">
   <LoginPage ux:Template="LoginPage" router="router"/>
   <RegistrationPage ux:Template="RegistrationPage" router="router"/>
   <LoggedInPage ux:Template="LoggedInPage" router="router"/>
</Navigator>

My LoggedInPage.ux:

  <DockPanel>
    <PageControl ux:Name="loggedInNavigation" Interaction="None">
        <DetailPage ux:Name="detail" />
        <ListPage ux:Name="list" />
    </PageControl>

   <PageIndicator Dock="Bottom" Navigation="loggedInNavigation">
    <!-- the content doesn't matter here -->
   </PageIndicator>
</DockPanel>

Each page is an individual .ux file.
This is all working fine, but now I need to navigate from my ListPage to another page. Let’s call them InfoPage.
On that InfoPage, the PageIndicator should still be visible.
But the InfoPage should not be available from the PageIndicator.

I understood your mentioned structure but I am not sure how to implement this in my case.
Can u help me here?

I made it!

As you already mentioned, I placed another Navigator inside my PageControl:

    <PageControl ux:Name="loggedInNavigation">
        <MapPage ux:Name="map"/>
        <Page>
          <Navigator ux:Name="listNav" DefaultPath="list">
            <PoiListPage ux:Template="list" />
            <DetailViewPage ux:Template="detail" />
          </Navigator>
      </Page>
    </PageControl>

Now I can navigate to my subpage with router.pushRelative(listNav, "detail").
Thank you for your help!

Is there any article about how to provide data between different pages?
For example:
I have three different, clickable objects in my listpage which are all linking to my details-page.

How can my details-page know, which of the three objects I have clicked?

Jxns wrote:

Is there any article about how to provide data between different pages?
For example:
I have three different, clickable objects in my listpage which are all linking to my details-page.

How can my details-page know, which of the three objects I have clicked?

Of course there is. If you have not yet done so, please take the whole Tutorial. In particular, the Navigation and routing section covers passing arguments between pages.

Thank you!
I have one last question to that case.
After I switched to the Detailpage with router.pushRelative the specific PageIndicator Button is also always leading me to the DetailsPage then.
Is it possible that this Button is always leading me to my ListPage, no matter if I pushed a Relative on that page?

This last question is not directly related to whatever else was discussed up until this point (also the previous one wasn’t).

Please make a new forum post, and include a complete, minimal reproduction of your code to illustrate what you’re asking. Without one it’s impossible to help.