Dynamic pages in Navigator

How-to Discussions
1

Hi guys, i’m facing an issue while trying to have dynamic pages in my navigator.

        <Navigator Transition="Default" >
          <Each Items="{stepDtoList}">
            <Match Value="{typeEnum}">
              <Case String="FROM">
              <StepDTOListFrom ux:Template="StepDTOListFrom" router="router" checkStepListFrom="{checkStepList}"/>
              </Case>

              <Case String="TO">
                <StepDTOListTO ux:Template="StepDTOListTO" router="router" checkStepListTo="{checkStepList}"/>
              </Case>
            </Match>
          </Each>
        </Navigator>

both of my pages look pretty much the same,
this is my StepDTOListTo page:

<DockPanel ux:Class="StepDTOListTO">
  <!-- <Rectangle Layer="Background" Color="White"/> -->
  <object ux:Property="checkStepListTo"/>
  <Router ux:Dependency="router" />
  <StackPanel Padding="0,315,0,0">
      <Panel Margin="20,0,0,0" Height="56">
        <ScrollView AllowedScrollDirections="Horizontal">
            <PageIndicator Navigation="PageControlRealiser">
                <StackLayout Orientation="Horizontal" />
                <DockPanel ux:Template="Dot" Margin="10,0,10,0" HitTestMode="LocalBounds">
                    <ActivatingAnimation>
                        <Change indicator.Opacity="1" />
                        <BringIntoView TargetNode="{Page Title}" />
                    </ActivatingAnimation>
                    <Rectangle ux:Name="indicator" Dock="Bottom" Height="3" CornerRadius="10" Color="#65B8FE" Opacity="0" />
                    <Tab Text="{Page Title}" />
                </DockPanel>
            </PageIndicator>
        </ScrollView>
    </Panel>


  <PageControl ux:Name="PageControlRealiser" Interaction="None" Margin="0,20,0,10" Padding="0,0,0,20" >
          <Each Items="{Property this.checkStepListTo}">
            <MyPage ux:Name="{type}" Title="{type}">
              <Match Value="{type}">
                  <Case String="IDENTITY">
                    <ValiderID/>
                  </Case>
                  <Case String="DISCLAIMER">
                    <Annexes/>
                  </Case>
                  <Case String="ORDER_OF_REPAIR">
                    <Travaux/>
                  </Case>
                  <Case String="RENTAL_CONTRACT">

                  </Case>
                  <Case String="DRIVER_EVALUATION">
                    <DriverEvalutaiton/>
                  </Case>
                  <Case String="DRIVING_LICENCE">
                    <ScanPermis/>
                  </Case>
                  <Case String="CHECK_LIST_CLIENT">
                    <CheckListClient/>
                  </Case>
                  <Case String="STATE_CAR">
                    <EtatDeslieux/>
                  </Case>
                  <Case String="INVOICE">
                    <Facture/>
                  </Case>
                  <Case String="Paiement">
                    <Paiement/>
                  </Case>
                  <Case String="CONCESSION_DOC_VALIDATION">

                  </Case>
                  <Case String="CUSTOMER_DOC_VALIDATION">

                  </Case>
                  <Case String="SIGNATURE">
                    <SignaturePad/>
                  </Case>
                </Match>
            </MyPage>
          </Each>
  </PageControl>
  </StackPanel>

</DockPanel>

and this is my StepDTOListFrom page.

<DockPanel ux:Class="StepDTOListFrom">
  <!-- <Rectangle Layer="Background" Color="White"/> -->
  <object ux:Property="checkStepListFrom"/>
  <Router ux:Dependency="router" />
  <StackPanel Padding="0,315,0,0">
      <Panel Margin="20,0,0,0" Height="56">
        <ScrollView AllowedScrollDirections="Horizontal">
            <PageIndicator Navigation="PageControlRealiser">
                <StackLayout Orientation="Horizontal" />
                <DockPanel ux:Template="Dot" Margin="10,0,10,0" HitTestMode="LocalBounds">
                    <ActivatingAnimation>
                        <Change indicator.Opacity="1" />
                        <BringIntoView TargetNode="{Page Title}" />
                    </ActivatingAnimation>
                    <Rectangle ux:Name="indicator" Dock="Bottom" Height="3" CornerRadius="10" Color="#65B8FE" Opacity="0" />
                    <Tab Text="{Page Title}" />
                </DockPanel>
            </PageIndicator>
        </ScrollView>
    </Panel>


  <PageControl ux:Name="PageControlRealiser" Interaction="None" Margin="0,20,0,10" Padding="0,0,0,20" >
          <Each Items="{Property this.checkStepListFrom}">
            <MyPage ux:Name="{type}" Title="{type}">
              <Match Value="{type}">
                  <Case String="IDENTITY">
                    <ValiderID/>
                  </Case>
                  <Case String="DISCLAIMER">
                    <Annexes/>
                  </Case>
                  <Case String="ORDER_OF_REPAIR">
                    <Travaux/>
                  </Case>
                  <Case String="RENTAL_CONTRACT">

                  </Case>
                  <Case String="DRIVER_EVALUATION">
                    <DriverEvalutaiton/>
                  </Case>
                  <Case String="DRIVING_LICENCE">
                    <ScanPermis/>
                  </Case>
                  <Case String="CHECK_LIST_CLIENT">
                    <CheckListClient/>
                  </Case>
                  <Case String="STATE_CAR">
                    <EtatDeslieux/>
                  </Case>
                  <Case String="INVOICE">
                    <Facture/>
                  </Case>
                  <Case String="Paiement">
                    <Paiement/>
                  </Case>
                  <Case String="CONCESSION_DOC_VALIDATION">

                  </Case>
                  <Case String="CUSTOMER_DOC_VALIDATION">

                  </Case>
                  <Case String="SIGNATURE">
                    <SignaturePad/>
                  </Case>
                </Match>
            </MyPage>
          </Each>
  </PageControl>
  </StackPanel>
</DockPanel>

the result is that both of my pages are available at the same time , and can be clicked both.

2

Hi prince,

something like this usually happens when you mess up Transitions. In you case though, I think it’s the use of Match and Case - I suggest you look into using MatchKey instead.

Somewhat unrelated, but still - instead of trying to figure this out with the complex nested pages you have, have your tried making it work with simple Panels first?