Error with a PageControl inside a directNavigation

Bug Reports
1

Hi,

When I put a Page control inside a Page that is in a DirectNavigation the PageControl don’t work!

I reproduce the error here:

<App Theme="Basic" Background="#fff">
    <DockPanel>
        <DirectNavigation ux:Name="_nav" Active="1" />
        <Style>
            <Page ux:InheritStyle="false">
                <EnteringAnimation>
                    <Move X="1" RelativeTo="Size" Duration="1" Easing="CircularInOut" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="-1" RelativeTo="Size" Duration="1" Easing="CircularInOut" />
                </ExitingAnimation>
            </Page>
        </Style>

        <Page ux:Name="1">
            <PageControl>
                <Page Background="#fff">
                    <Text Value="1) GO PAGE 2" Alignment="Center" TextAlignment="Center">
                        <Clicked>
                            <NavigateTo Context="_nav" Target="2"/>
                        </Clicked>
                    </Text>
                </Page>
                <Page Background="#fff">
                    <Text Value="2) GO PAGE 2" Alignment="Center" TextAlignment="Center">
                        <Clicked>
                            <NavigateTo Context="_nav" Target="2"/>
                        </Clicked>
                    </Text>
                </Page>
                <Page Background="#fff">
                    <Text Value="3) GO PAGE 2" Alignment="Center" TextAlignment="Center">
                        <Clicked>
                            <NavigateTo Context="_nav" Target="2"/>
                        </Clicked>
                    </Text>
                </Page>
            </PageControl>
        </Page>
        <Page ux:Name="2" Background="#000">
            <Text Value="GO PAGE 1" Alignment="Center" TextColor="#fff" TextAlignment="Center">
                <Clicked>
                    <NavigateTo Context="_nav" Target="1"/>
                </Clicked>
            </Text>
        </Page>
    </DockPanel>
</App>

How can I fix the PageControl in this context?

Thanks!

2

You’re getting a conflict on the style for Page. PageControl has it’s own Entering/ExitingAnimation to match its swiping direction.

It’s best to avoid using the same Page class when embedding like this. For your outer DirectNavigation you can create a new class instead:

<Page ux:Class="OuterPage"/>

Then style this OuterPage instead of Page, and use it for the elements of your DirectNavigation. This will avoid any interference with the pages used within the PageControl.