WhileTrue inside PageControl

How-to Discussions
1

Hello i have this code

<PageControl ux:Name="pageControl" Transition="None">
    <NavigationMotion GotoEasing="CircularOut" GotoDuration="0.5" Overflow="Open"/>
    <WhileTrue ux:Name="canSwipeCard" Value="{canSwipe}">
        <SwipeNavigate ux:Name="swipeNavigate" ForwardDirection="Right"/>        <!-- TODO Also side (prev/next) cards don't appear as intended -->
    </WhileTrue>
    <Each Items="{movieList}">
        <MovieCard />
    </Each>
</PageControl>

but i noticed that whileTrue inside the pageControl doesn’t work whatever value i give it. If i try the same code without the PageControl it works as i want to. Is there another way i can limit the navigation whenever i want with the Observable canSwipe ?

2

PageControl already has a SwipeNagiate on it. You can build the component yourself to achieve the behavior you want, for example:

<Panel>
    <LinearNavigation />
    <WhileTrue Value="{canSwipe}">
        <SwipeNavigate />
    </WhileTrue>

    <Page ux:Class="NavPage">
        <EnteringAnimation>
            <Move X="-1" RelativeTo="Size" />
        </EnteringAnimation>
        <ExitingAnimation>
            <Move X="-1" RelativeTo="Size" />
        </ExitingAnimation>
    </Page>

    <Each Items="{movieList}">
        <NavPage>
            <MovieCard />
        </NavPage>
    </Each>

</Panel>
3

Hello and thanks for the reply ( and sorry for my late reply ). The reason i used PageControl was because i have some page indicators on the bottom of my screen. The code is :

<Panel Alignment="Bottom" Padding="0,0,0,15">
    <PageIndicator ux:Name="pageIndicator" Navigation="pageControl" Dock="Bottom" Alignment="TopCenter">
        <Circle ux:Template="Dot" ux:Name="dotFac" Color="#C6C6C9" Margin="5" Width="10" Height="20">
            <ActivatingAnimation>
                <Scale Factor="1.1"/>
                <Change dotFac.Color="#fed166" />
            </ActivatingAnimation>
        </Circle>
    </PageIndicator>
</Panel>

i used your code but i now can’t figure out how to use the PageIndicator code. In the Navigation property it asks to use a PageControl ux:Name. Is there a way to combine these two ?

4

You can use the LinearNavigation,

<LinearNavigation ux:Name="_navigation" />

...

<PageIndicator Navigation="_navigation />
5

Perfect thank you very much for the help !! Everything now works as i want !! :smiley: Keep up the good work :slight_smile:

6

You could also disable the interaction on the PageControl <PageControl Interaction="None"/> and then add your own swipe.

Or toggle the Interaction property with a WhileTrue and Change directly (though this should work, I’ve not tested it).

7

Okay i will test that too and report back with my results ! Thanks !