Custom transition on Page in PageControl

How-to Discussions
1

I have a router navigation set up with PageControl, but I have one page which isn’t really supposed to be part of the PageControl, it needs to slide up into the view from the bottom ( <Move Y="-1" RelativeTo="Size" Duration... Easing... /> )

The problem is this doesn’t “fit in” to the PageControl, because it shouldn’t be accessible by swiping and should just go over whatever the current page is. How would I go about doing this, while still holding on to normal router functions like passing data through .push() and that page having it’s own bit of navigation? Thanks

2

Hi, something like this?

<Panel>
    <Panel> 
        <!-- ... this is the sliding up panel .. -->
        <WhileTrue Value="{showOverlay}">
            <Move ... />
        </WhileTrue>
    </Panel>
    <PageControl />
3

Hey, that works! But would it still be accessible vai the router?

4

You can encode whether to have the overlay open in your route parameter:

router.goto("foo", { showOverlay: true });

Then you can do:

<Panel ux:Name="overlayContainer" >
  <JavaScript>
      var Observable = require("FuseJS/Observable");

      overlayContainer.showOverlay = Observable(false);

      module.exports = { showOverlay: overlayContainer.showOverlay }
  </JavaScript>
  <Panel> 
      <!-- ... this is the sliding up panel .. -->
      <WhileTrue Value="{showOverlay}">
          <Move ... />
      </WhileTrue>
  </Panel>
  <PageControl />

Then from the pages within your pagecontrol, you can do

this.onParameterChanged(function(param) {
    overlayContainer.showOverlay.value = param.showOverlay;

If the pages are classes, you have to make a dependency: <Panel ux:Dependency="overlayContainer">

5

Thanks!