Navigation between two panels, two pages each

How-to Discussions
1

I have the following layout. Can anybody please help me to understand why when I click on “panel C” button, I get page B2 (which is into panel B). I can’t find a reason…please shed a light for me

Thanks Max

<App Theme="Basic">
    <ClientPanel>
        <DockPanel>
            <Grid ColumnCount="2" Dock="Top" Background="#0cf">

                <Button Text="Panel B">
                    <Clicked>
                        <NavigateTo Target="_b" NavigationContext="_mainNavigation" />
                    </Clicked>
                </Button>
                <Button Text="Panel C">
                    <Clicked>
                        <NavigateTo Target="_c" NavigationContext="_mainNavigation" />
                    </Clicked>
                </Button>
            </Grid>

            <Panel Dock="Fill">
                <LinearNavigation ux:Name="_mainNavigation" Easing="CubicInOut" />

                <Panel   ux:Name="_b">
                    <LinearNavigation ux:Name="nav_b" />
                    <EnteringAnimation>
                        <Move X="-1" RelativeTo="Size" />
                    </EnteringAnimation>
                    <ExitingAnimation>
                        <Move X="1" RelativeTo="Size" />
                    </ExitingAnimation>
                    <Style>
                        <Page Background="#800">
                            <EnteringAnimation>
                                <Move X="-1" RelativeTo="ParentSize"/>
                            </EnteringAnimation>
                            <ExitingAnimation>
                                <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
                            </ExitingAnimation>
                        </Page>
                    </Style>
                    <Page ux:Name="b1">
                        <Text Alignment="Top" TextColor="#fff" Height="40" Value ="This is B1" />
                        <Button Width="50" Height="50" Text ="Go to b2" >
                            <Clicked >
                                <NavigateTo Target ="b2" />
                            </Clicked>
                        </Button>

                    </Page>
                    <Page ux:Name="b2">
                        <Text Alignment="Top" TextColor="#fff" Height="40" Value ="This is B2" />
                        <Button Width="50" Height="50" Text ="Back to b1" >
                            <Clicked >
                                <NavigateTo Target ="b1" />
                            </Clicked>
                        </Button>
                    </Page>
                </Panel>


                <Panel   ux:Name="_c">
                    <LinearNavigation ux:Name="nav_c" />

                    <EnteringAnimation>
                        <Move X="-1" RelativeTo="Size" />
                    </EnteringAnimation>
                    <ExitingAnimation>
                        <Move X="1" RelativeTo="Size" />
                    </ExitingAnimation>
                    <Style>
                        <Page Background="#f00">
                            <EnteringAnimation>
                                <Move X="-1" RelativeTo="ParentSize"/>
                            </EnteringAnimation>
                            <ExitingAnimation>
                                <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
                            </ExitingAnimation>
                        </Page>
                    </Style>
                    <Page >
                        <Text Alignment="Top" TextColor="#fff" Height="40" Value ="This is C1" />
                    </Page>
                    <Page ux:Name="c2">
                        <Text Alignment="Top" TextColor="#fff" Height="40" Value ="This is C2" />
                    </Page>
                </Panel>


            </Panel>
        </DockPanel>
    </ClientPanel>
</App>
2

Hi!

The Pages in your Panels that contains Navigations are animated by the Entering\ExitingAnimation, this means that your pages that are not active will be moved X="-1" or X="1" as described in your style. So you get cases where some of your Elements will overlap because of where they are moved around.

This is simple to avoid, just add ClipToBounds="true" to the _b and _c Panels. As long as you do not depend on stuff being visible while outside the bounds, ClipToBounds is safe to use :slight_smile:

3

Yes it works !!! Didn’t find such detail in the doc.

Thanks Max