Navigator in side another Navigator, Page Control Problem

Bug Reports
1

Navigator in side another Navigator, Page Control Problem, When I swipe to the left in the top part, no problem. but swipe to right, both top and inside page are change, and render is wrong.

My code below:

<App Theme="Basic">
    <Panel>
        <Style>
            <Panel>
                <EnteringAnimation>
                    <Move X="-1" RelativeTo="ParentSize"/>
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
                </ExitingAnimation>
            </Panel>
        </Style>
        <LinearNavigation Active="mainpage" Easing="CircularOut" />
        <SwipeNavigate SwipeDirection="Left"/>
        <Panel Background="Blue">
            <Text Alignment="Center">Top Level Left</Text>
        </Panel>
        <Panel ux:Name="mainpage" Background="White">
            <DockPanel>
                <Panel Dock="Top">
                    <Text>Top Part</Text>
                </Panel>
                <Panel Dock="Bottom">
                    <Text>Bottom Part</Text>
                </Panel>
                <Panel>
                    <Style>
                        <Panel>
                            <EnteringAnimation>
                                <Move X="-1" RelativeTo="ParentSize"/>
                            </EnteringAnimation>
                            <ExitingAnimation>
                                <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
                            </ExitingAnimation>
                        </Panel>
                    </Style>
                    <LinearNavigation Active="Page2" Easing="CircularOut" />
                    <SwipeNavigate SwipeDirection="Left"/>
                    <Page Name="Page1" Background="#39C3FF">
                        <Text>Center Left</Text>
                    </Page>
                    <Page Name="Page2" Background="#FF74EE">
                        <Text Alignment="Center">Center Part</Text>
                    </Page>
                    <Page Name="Page3" Background="#FFE057">
                        <Text>Center Right</Text>
                    </Page>
                </Panel>
            </DockPanel>
        </Panel>
        <Panel Background="Red">
            <Text Alignment="Center">Top Level Right</Text>
        </Panel>
    </Panel>
</App>
2

Hi, it works fine for me.

Can you please explain more specifically what’s wrong?

What version are you using? What platform?

3

You should create distinct page types for each of your navigation – and never style Panel itself (since most controls are derived from panel they will all get this style).

To define a new page type use ux:Class. For example:

<Panel ux:Class="MainPAge">
  <EnteringAnimation>...
  <ExitingAnimation>...
</Panel>

<panel>
   <LinearNavigation/>
   <MainPage>...</MainPage>
   <MainPage>...</MainPage>

IN this fashion each navigation has a distinct page type with its own animations.

4

My Fuse version: 0.9.5(build 5419), and MAC OS 10.11.3beta(15D9c) and in local preview, when I swipe the “mainpage” to right, the results has problems, it is not display the right page correct,:

    <Panel Background="Red">
      <Text Alignment="Center">Top Level Right</Text>
    </Panel>

in the page also include the page I define inside the “mainpage” and also swipe the inside page from page2 to page3.

I also try to define the panel Class for each of the navigation, but it did not solve this problem.

5

Can you please provide the code that includes the class approach that doesn’t work?

6

The code include class below:

<App Theme="Basic">
  <Panel ux:Class="MainPageType">
        <EnteringAnimation>
          <Move X="-1" RelativeTo="ParentSize"/>
        </EnteringAnimation>
        <ExitingAnimation>
          <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
        </ExitingAnimation>
 </Panel>
   <Panel ux:Class="InnerPageType">
        <EnteringAnimation>
          <Move X="-1" RelativeTo="ParentSize"/>
        </EnteringAnimation>
        <ExitingAnimation>
          <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
        </ExitingAnimation>
 </Panel>
<DockPanel>
    <StatusBarBackground Dock="Top"/>
    <BottomBarBackground Dock="Bottom"/>
    <DirectNavigation ux:Name="topNav" Active="mainpage" />
    <SwipeNavigate SwipeDirection="Left"/>

    <MainPageType ux:Name="topLeft" Background="Blue">
      <Text Alignment="Center">Top Level Left</Text>
    </MainPageType>
    <MainPageType ux:Name="mainpage" Background="White">
      <DockPanel>
        <Panel Dock="Top">
          <Text>Top Part</Text>
        </Panel>
        <Panel Dock="Bottom">
          <Text>Bottom Part</Text>
        </Panel>
        <Panel>
           <LinearNavigation ux:Name="insideNav" Active="Page2" Easing="CircularOut" />
          <SwipeNavigate SwipeDirection="Left"/>
          <InnerPageType Name="Page1" Background="#39C3FF">
            <Text>Center Left</Text>
          </InnerPageType>
          <InnerPageType Name="Page2" Background="#FF74EE">
            <Text Alignment="TopCenter">Center Part</Text>
            <Button Height="20" Text="Goto Right Page">
                <Clicked>
                    <NavigateTo NavigationContext="topNav" Target="topRight" />
                </Clicked>
            </Button>
          </InnerPageType>
          <InnerPageType Name="Page3" Background="#FFE057">
            <Text>Center Right</Text>
          </InnerPageType>
        </Panel>
      </DockPanel>
    </MainPageType>
    <MainPageType ux:Name="topRight" Background="Red">
        <DockPanel>
          <Text Dock="Top" Alignment="Center">Top Level Right</Text>
          <Panel Background="Blue" Dock="Fill" />
        </DockPanel>
    </MainPageType>
  </DockPanel>
</App>
7

Hi!

I have tested your code and can see that it behaves strange. Nesting navigations with SwipeNavigate might result in some conflicts when determining where to navigate to. Can you explain what kind of navigation hierarchy you want to make? Then I can show you in UX code how I would go about it :slight_smile: