Lock page swiping

How-to Discussions
1

Hi, I’ve got 2 pages, I want to disable page swiping from Page1 to Page2 unless when click on button. Here is my basic code:

<App Theme="Basic">
    <PageControl Active="Page1">
        <Page ux:Name="Page1">
            <Panel Background="#808080">
                <Text Value="Page 1" Alignment="TopCenter" />
                <Button Text="Go" Height="20" Margin="20,0">
                    <Clicked>
                        <NavigateTo Target="Page2" />
                    </Clicked>
                </Button>
            </Panel>
        </Page>
        <Page ux:Name="Page2">
            <Panel Background="#c5c5c5">
                <Text Value="Page 2" Alignment="TopCenter" />
            </Panel>
        </Page>
    </PageControl>
</App>

Can anyone please assist? Thanks!

2 
        ...
        &lt;JavaScript&gt;
            var Observable = require(&quot;FuseJS/Observable&quot;);</p>
<div class="highlighted_code"><pre><code class="language-uno">        var canSwipe = Observable(false);
        var currentPage = Observable(&amp;quot;page1&amp;quot;);
        module.exports = {

            canSwipe: canSwipe,
            currentPage: currentPage,

        };
    &amp;lt;/JavaScript&amp;gt;

    ...
    &amp;lt;LinearNavigation ux:Name=&amp;quot;navigation&amp;quot; Easing=&amp;quot;CircularOut&amp;quot; Active=&amp;quot;{currentPage}&amp;quot; /&amp;gt;
    &amp;lt;WhileTrue ux:Name=&amp;quot;canSwipe&amp;quot; Value=&amp;quot;{canSwipe}&amp;quot;&amp;gt;
        &amp;lt;SwipeNavigate ux:Name=&amp;quot;swipeNavigate&amp;quot; SwipeDirection=&amp;quot;Left&amp;quot; SwipeEnds=&amp;quot;Closed&amp;quot;/&amp;gt;
    &amp;lt;/WhileTrue&amp;gt;
    &amp;lt;Page ux:Name=&amp;quot;page1&amp;quot;&amp;gt;
    ...
    &amp;lt;/Page&amp;gt;
    &amp;lt;Page ux:Name=&amp;quot;page2&amp;quot;&amp;gt;
    ...
    &amp;lt;/Page&amp;gt;
</code></pre></div>
<p></code></pre></div></p>
<p>
3

Great, thanks a lot, I’ve managed to apply your code to get it work. One part was missing though, once I swipe back to Page1, the need to set canSwipe back to false. Here is how I’ve done it:

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var canSwipe = Observable("false");
        var currentPage = Observable("page1");

        function goToPage1() {
            canSwipe.value = "false";
            currentPage.value = "Page1";
        }

        function goToPage2() {
            canSwipe.value = "true";
            currentPage.value = "Page2";
        }

        module.exports = {
            canSwipe: canSwipe,
            currentPage: currentPage,

            goToPage1: goToPage1,
            goToPage2: goToPage2
        };
    </JavaScript>
    <Panel>
        <Style>
            <Page>
                <EnteringAnimation>
                    <Move X="-1" RelativeTo="ParentSize"  Duration="0.5" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="1" RelativeTo="ParentSize" Duration="0.5" />
                </ExitingAnimation>
            </Page>
        </Style>
        <LinearNavigation ux:Name="navigation" Easing="CircularOut" Active="{currentPage}" />
        <WhileTrue ux:Name="CanSwipeTag" Value="{canSwipe}">
            <SwipeNavigate SwipeDirection="Left" />
        </WhileTrue>
        <Page ux:Name="Page1" Background="#808080">
            <Text Value="Page 1" Alignment="TopCenter" />
            <Button Text="Go" Height="20" Margin="20,0" Clicked="{goToPage2}" />
        </Page>
        <Page ux:Name="Page2" Background="#c5c5c5">
            <WhileInExitState>
                <Set CanSwipeTag.Value="false" />
            </WhileInExitState>
            <Text Value="Page 2" Alignment="TopCenter" />
            <Button Text="Back" Height="20" Margin="20,0" Clicked="{goToPage1}" />
        </Page>
    </Panel>
</App>

Thanks again, much appreciated!