PageControl inside Page and custom animation

How-to Discussions
1

I have this code :

<Page ux:Name="moviePanel" Transition="None">
  <Image File="05.png" Alignment="Center" Layer="Background"/>
  <LinearNavigation ux:Name="navigation">
      <NavigationMotion GotoEasing="CircularOut" GotoDuration="0.5" Overflow="Open"/>        <!-- TODO Duration check on phone -->
  </LinearNavigation>
  <SwipeNavigate ux:Name="swipeNavigate" ForwardDirection="Right"/>

  <PageControl ux:Name="pageControl" >
    <Each Items="{movieList}">
        <MovieCard />
    </Each>
  </PageControl>

  <Panel Alignment="Bottom">
    <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>
</Page>

I added pageControl so i can have the pageIndicators at the bottom of my screen. My problem is that when i added the pageControl it ignored completely the LinearNavigation and SwipeNavigation plus every EnteringAnimation, WhileActive etc i have inside MovieCard class. What am i doing wrong ?

Thanks

2

Hi!

<PageControl /> has default animations for Pages put in it. Try setting <PageControl Transition="None" />

please also have a look at the docs for PageControl

3

Hello and thanks for the answer! i added Transition="None" to the PageControl as you said. My problem now is that i can’t find out how to add my old transition effects; or what i am doing wrong…

I tried adding these lines inside the PageControl

<LinearNavigation ux:Name="navigation">
    <NavigationMotion GotoEasing="CircularOut" GotoDuration="0.5" Overflow="Open"/>
</LinearNavigation>
<SwipeNavigate ux:Name="swipeNavigate" ForwardDirection="Right"/>

but when i do the swipe doesn’t work.

Without PageControl

As i show you in the first video without the pageControl my original animation was like this and the left and right cards were still shown but with different opacity. Now if i add the pageControl the result is the second video.

With PageControl

4

A <PageControl /> already has LinearNavigation and SwipeNavigate on it. Have a look at this example:

<App>

    <Page ux:Class="MyPage" TransformOrigin="TopLeft">
        <EnteringAnimation>
            <Rotate Degrees="90" />
            <Scale Factor="0.5" />
        </EnteringAnimation>
        <ExitingAnimation>
            <Move RelativeTo="Size" X="1" />
        </ExitingAnimation>
    </Page>

    <PageControl Transition="None">
        <MyPage Color="#fc0" />
        <MyPage Color="#0cf" />
        <MyPage Color="#cf0" />
    </PageControl>

</App>
5

I already have EnteringAnimation and ExitingAnimation to my pages and i found my way with the navigationMotion and SwipeNavigate. My problem now is that as show to the videos above it keeps dissapearing the next and previous cards. Any idea why ?

Thank you very much for the help so far !