Two stacks of pages

How-to Discussions
1

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

2

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 :slight_smile:

<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 :slight_smile:

3

Hello Vegard,

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


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

4

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

Thanks for your patience

5

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

6

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 :

                <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

7

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

8

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

<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