Swipe Pages Callback

How-to Discussions
1

Hi,

I try to mimic the mobile imgur pages layout which you can experience here (with mobile useragent): http://m.imgur.com/gallery/N3kn8Dw

This is my current UX:

<PageControl ux:Name="slides" ClipToBounds="true">
  <Each Items="{contentPages}">
      <Page><NewsItem /></Page> 
  </Each>
</PageControl>

Now I need a way to check if the page has been switched so I can remove the first element of contentPages and add a new one.

2

Hi Moritz,

Why are you going to remove the contents of the page after you have swiped it away? The <Each> block will create a new Page for every item in contentPages, so you can set different layouts and content for each page depending on your object.

3

Hi,

I want to have 3 Pages, [0, 1, 2].

My Main-View should be 1, if the user swipes right, it should move the index and prefetch data like in this screenrecord:

http://recordit.co/m3AUkR2n7O

This represents it in the best way I can think:

<PageControl Active="current">
  <Page Name="current">
      <NewsItem />
    <WhileActive>
        <Callback Handler="{previousAction}" />
    </WhileActive>
  </Page>
  <Page Name="current">
      <NewsItem />
  </Page>
  <Page Name="next">
      <NewsItem />
    <WhileActive>
        <Callback Handler="{nextAction}" />
    </WhileActive>
  </Page>
</PageControl>
4

Hi, I don’t quite get what you mean by looking at the screen recording, all I see is pages being swipped by. I believe what you are trying to do is:

<PageControl>
<LinearNavigation Active="Page1" />

  <Page ux:Name="Page0">
      <NewsItem />
    <WhileActive>
        <Callback Handler="{previousAction}" />
    </WhileActive>
  </Page>

  <Page ux:Name="Page1">
      <NewsItem />
  </Page>

  <Page ux:Name="Page2">
      <NewsItem />
    <WhileActive>
        <Callback Handler="{nextAction}" />
    </WhileActive>
  </Page>
</PageControl>

If you want to go back to the “center” page (Page 1) after swiping to the other ones you would add <NavigateTo Target="Page1" /> after the Callback. Also, if that is indeed the case, I would suggest you do this with SwipeGesture instead of using Pages.

5

Hi,

I tried your solution but it wont work the way, I try to describe it better:

You can swipe left and right to get new newsitems, once you swiped right it should add a new page and remove the first page.

Is there a way to dynamically add a Callback to a Page?

6

Moritz,

I believe that to achieve what you want you should take a look at this demo https://www.fusetools.com/examples/pages-using-js

You will need to load the pages from Javascript as an Observable object and add a new page to it every time you swipe right by calling a javascript function, with <Callback Handler="..." /> exactly as you were doing in the first place.

<Javascript>
function Page(number) {
    this.number = number;
}

var count = 0;
var pages = Observable();


function addNewPage() {
    count += 1;
    pages.add(new Page(count));
}

module.exports {
    addNewPage : addNewPage,
    pages : pages,
    count : count
};
</Javascript>


<PageControl>
<LinearNavigation Active="Page1" />
<Page ux:Name="Page0">
    ...
</Page>
<Page ux:Name="Page1">
    ...
</Page>
<Page ux:Name="Page2">
    <WhileActive>
        <Callback Handler="{addNewPage}" />
    </WhileActive>
</Page>
<Each Items="{pages}">
    <Page>
        <Text Value="{count}" />
    </Page>
</Each>
</PageControl>

I hope this guides you towards the right direction!