# Two stacks of pages

**URL:** https://forums.fusetools.com/t/two-stacks-of-pages/683
**Category:** How-to Discussions
**Created:** [January 6, 2016, 2:50pm UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683 "2016-01-06T14:50:34Z")
**Posts on this page:** 8
**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 6, 2016, 2:50pm UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/1 "2016-01-06T14:50:34Z")

</div>

Hi all,

I can’t set up the desired architecture of my app, which would consist in two (or more) series of pages. I mean:

I must be able to swipe between pages A1,A2,A3.

I must be able to swipe between pages B1,B2,B3.

But -swiping- between group A and group B should not be possible. Switching between the two groups must be possible only through a button in the bar.

I have read the documentation and tried lots of combinations nesting differents components, but couldn’t find a working layout. For example, if I set all the pages on the same level, how can I avoid swiping from page A3 to page B1? Or in alternative, how to set pages on two different, independant levels?

Thanks for any help Max

---

<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 6, 2016, 5:56pm UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/2 "2016-01-06T17:56:21Z")

</div>

Hi!

Thanks for you post and feedback. The kind of navigation you describe should be very easy to build with fuse. Have a look at the code I have put together, if I understood your issue correct this should be the architecture you want 🙂

```auto
<App Theme="Basic">
    <ClientPanel>
        <DockPanel>
            <Grid ColumnCount="2" Dock="Top" Background="#0cf">
                <Button Text="A">
                    <Clicked>
                        <NavigateTo Target="_a" NavigationContext="_mainNavigation" />
                    </Clicked>
                </Button>
                <Button Text="B">
                    <Clicked>
                        <NavigateTo Target="_b" NavigationContext="_mainNavigation" />
                    </Clicked>
                </Button>
            </Grid>

            <Panel Dock="Fill">

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

                <Style>
                    <PageControl ClipToBounds="true">
                        <Style>
                            <Text Alignment="Center" FontSize="30" />
                        </Style>
                        <EnteringAnimation>
                            <Move Y="-1" RelativeTo="Size" />
                        </EnteringAnimation>
                        <ExitingAnimation>
                            <Move Y="1" RelativeTo="Size" />
                        </ExitingAnimation>
                    </PageControl>
                </Style>

                <PageControl ux:Name="_a">
                    <Page Background="#fc0">
                        <Text Value="A1" />
                    </Page>
                    <Page Background="#0fc">
                        <Text Value="A2" />
                    </Page>
                    <Page Background="#c0f">
                        <Text Value="A3" />
                    </Page>
                </PageControl>

                <PageControl ux:Name="_b">
                    <Page Background="#cf0">
                        <Text Value="B1" />
                    </Page>
                    <Page Background="#0cf">
                        <Text Value="B2" />
                    </Page>
                    <Page Background="#f0c">
                        <Text Value="B3" />
                    </Page>
                </PageControl>

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

```

Let me know if this does not solve your issue 🙂

---

<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 7, 2016, 8:52am UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/3 "2016-01-07T08:52:35Z")

</div>

Hello Vegard,

I really appreciate your response to my post, but unfortunately the code cannot compile due to this error:

```auto

Compiling syntax tree
C:\Users\User\Desktop\test 2\tab-bar-navigation.build\Simulator\Local17\Cache\GeneratedCode\TabBarNavigation.g.uno(1,8): E4009: Cannot use a sealed class as base class
(1.282,04 ms)

```

Any help?

Max

---

<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 7, 2016, 11:31am UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/4 "2016-01-07T11:31:48Z")

</div>

Sorry about that 🙂 I was using a slightly newer version than the current release. I have updated the code in my previous post!

Thanks for your patience

---

<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 7, 2016, 12:35pm UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/5 "2016-01-07T12:35:17Z")

</div>

Hello Vegard

NavigationContext was the word…yes, great, it’s working as expected ! You got exactly what I needed and provided the right code!

Thanks a million…

Max

---

<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 7, 2016, 6:48pm UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/6 "2016-01-07T18:48:56Z")

</div>

Hello Vegard,

a last thing… if the app logic needs, how to prevent swiping between pages A1 A2 A3 ?

A Fuse example uses this easy way to switch wiping off/on :

```auto
                <WhileTrue ux:Name="canSwipe" Value="true">
                    <SwipeNavigate ux:Name="swipeNavigate" SwipeDirection="Left" SwipeEnds="Closed"/>
                </WhileTrue>

```

but in your code there is NO trace of SwipeNavigate…and swiping works…so how could I stop swiping ?

Thanks !!!

Max

---

<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 8, 2016, 8:31am UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/7 "2016-01-08T08:31:30Z")

</div>

Ok I solved by myself, I just replaced one of the PageControl components with a Panel, and inside that Panel I can decide if swipe feature is available or not. When not available, I let user to change page only with buttons and only when the application logic allows it. As far as I have seen, swipe is enabled by default in a PageControl (don’t know how to stop it), while in a Panel it must be allowed by a SwipeNavigate tag. If this is not correct don’t hesitate to advise, it would be interesting also for other guys in the community !

Thanks a lot

Max

---

<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 8, 2016, 10:01am UTC](https://forums.fusetools.com/t/two-stacks-of-pages/683/8 "2016-01-08T10:01:13Z")

</div>

Glad to see you figured it out 🙂 What you did with Panel and SwipeNavigate is good, a PageControl is actually the same, we have added it for convenience when you want:

```auto
<Panel ux:Class="Fuse.Controls.PageControl">
    <Style>
        <Page>
            <EnteringAnimation>
                <Move X="-1" RelativeTo="ParentSize"/>
            </EnteringAnimation>
            <ExitingAnimation>
                <Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
            </ExitingAnimation>
        </Page>
    </Style>
    <LinearNavigation ux:Name="TheNavigation" Easing="CircularOut" />
    <SwipeNavigate SwipeDirection="Left" SwipeEnds="Closed"/>
</Panel>

```

So when you want more finegrained control like enabling/disabling swiping you have to build that with the UX elements needed