# Navigation between two panels, two pages each

**URL:** <https://forums.fusetools.com/t/navigation-between-two-panels-two-pages-each/6256>\
**Category:** How-to Discussions\
**Created:** [January 9, 2016, 12:07pm UTC](https://forums.fusetools.com/t/navigation-between-two-panels-two-pages-each/6256 "2016-01-09T12:07:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![massimiliano.aronica](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@massimiliano.aronica](https://forums.fusetools.com/u/massimiliano.aronica)\
**Post date:** [January 9, 2016, 12:07pm UTC](https://forums.fusetools.com/t/navigation-between-two-panels-two-pages-each/6256/1 "2016-01-09T12:07:26Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [January 9, 2016, 12:38pm UTC](https://forums.fusetools.com/t/navigation-between-two-panels-two-pages-each/6256/2 "2016-01-09T12:38:05Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![massimiliano.aronica](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@massimiliano.aronica](https://forums.fusetools.com/u/massimiliano.aronica)\
**Post date:** [January 10, 2016, 1:40pm UTC](https://forums.fusetools.com/t/navigation-between-two-panels-two-pages-each/6256/3 "2016-01-10T13:40:44Z")

</div>

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

Thanks Max