MainView.ux

<App>
  <ClientPanel>
    <Router ux:Name="mainRouter"/>

    <Page ux:Class="Pag">
		<WhileInactive>
			<Change this.IsEnabled="false"/>
		</WhileInactive>
    </Page>

    <PageControl Active="first">
      <Pag ux:Name="first">
        <JavaScript>
          exports.gotoSecond = () => {
            mainRouter.goto("second");
          }
        </JavaScript>
        <Activated>
          <DebugAction Message="first activated" />
        </Activated>
        <StackPanel Alignment="Center" >
          <Text FontSize="40" Value="FIRST" />
          <Button Text="GoTo Second">
            <Clicked Handler="{gotoSecond}"/>
          </Button>
        </StackPanel>
      </Pag>
      <Pag ux:Name="second" IsEnabled="false">

        <Activated>
          <DebugAction Message="second wrapper activated" />
        </Activated>

        <Navigator DefaultPath="secondFirst" ux:Name="secondNavigator">

          <Pag ux:Name="secondFirst" >
            <WhileEnabled>
              <DebugAction Message="!!! secondFirst activated" />
            </WhileEnabled>
            <JavaScript>
              exports.gotoFirst = () => {
                mainRouter.goto("first");
              }
              exports.gotoSecondSecond = () => {
                mainRouter.pushRelative(secondNavigator, "secondSecond");
              }
            </JavaScript>
            <StackPanel Alignment="Center" >
              <Text FontSize="40" Value="SECOND-FIRST" />
              <Button Text="GoTo First">
                <Clicked Handler="{gotoFirst}"/>
              </Button>
              <Button Text="GoTo Second-Second">
                <Clicked Handler="{gotoSecondSecond}"/>
              </Button>
            </StackPanel>
          </Pag>

          <Pag ux:Name="secondSecond">
            <JavaScript>
              exports.gotoFirst = () => {
                mainRouter.goto("first")
              }
              exports.goBack = () => {
                mainRouter.goBack()
              }
            </JavaScript>

            <WhileEnabled>
              <DebugAction Message="!!! secondSecond activated" />
            </WhileEnabled>

            <StackPanel Alignment="Center" >
              <Text FontSize="40" Value="SECOND-SECOND" />
              <Button Text="GoTo First">
                <Clicked Handler="{gotoFirst}"/>
              </Button>
              <Button Text="Go Back">
                <Clicked Handler="{goBack}"/>
              </Button>
            </StackPanel>
          </Pag>
        </Navigator>
      </Pag>
    </PageControl>
  </ClientPanel>
</App>