Custom PageControl Transition

How-to Discussions
1

Hi, Guys.

I’m trying to make a slide between two pages using the PageControl class, like this way:

  <PageControl>
    <Page Background="Yellow" />
    <Page Background="Blue" />
  </PageControl>

The problem is that I want to tweak the default behavior a little bit. I want 20% of the second page (the blue one) visible on the first screen (the yellow one) and I also want the same behavior when I swipe to the second screen, that is, 20% of the first page (the yellow one) appearing. Like the image in the link below:

Fuse Custom Page Navigation Example

I tried to put an Offset property on the pages and I also tried to play with EnteringAnimation and ExitingAnimation with no success. I look into the Onboarding example and the Swipe Gesture Review example, but I couldn’t find the answer.

I believe this is something easy to achieve, so I’ll be grateful to anyone who can help me.

Thanks in advance!

2

Hi!

You are looking for the <Transition> class: https://www.fusetools.com/docs/fuse/triggers/transition

3

Thanks, Anders!

I ended up making a bigger panel, larger than the viewport size. Then I split it in half with a Grid Layout where each column has its own color. This way I can control the animation using Translation.
I don’t know if this is the best approach but it seems the easiest one. I took a look at the Transition class but I couldn’t make it work properly for this scenario.