How can I get this done with a PageControl?

How-to Discussions
1

How can I get this done with a PageControl?

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/wrmC3vGTJKYx-image-1487283123574.09.17 PM.png)

I try many things but I always get this:

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/uS3O6UL5kdLe-image-1487283718178.21.43 PM.png)

My PageControl code:

<PageControl ux:Name="proyectos">
	<Panel ux:Class="SliceClass" ux:Name="Slice" Alignment="VerticalCenter" Width="77%" Height="50%">
		<WhileActive>
			<Change ProyectoPageControl.Height="80%" Duration="0.3" Easing="QuadraticInOut" />
		</WhileActive>

		<Rectangle Color="#68A038" CornerRadius="5" />
	</Panel>

	<SliceClass />
	<SliceClass />
	<SliceClass />
	<SliceClass />
</PageControl>
```
Thanks!
2

The trick is in the Scale property on Entering- and ExitingAnimation. :slight_smile:
Take a look at this example for instance: https://www.fusetools.com/examples/swipe-gesture-reveal

3

Thanks Remi! Work great! But I have a problem:

If you notice the video only work when I start dragging, after that the other elements don’t appear

My code:

<Panel ux:Name="Slider">
	<!-- -->
	<LinearNavigation ux:Name="nav">
	<NavigationMotion GotoEasing="QuadraticOut" GotoDuration="0.3" />
	</LinearNavigation>
	<SwipeNavigate SwipeDirection="Left"/>
	<!-- -->

	<Panel ux:Class="SliceClass" ux:Name="Slice" Opacity="0.8" Alignment="VerticalCenter" Width="77%" Height="65%">
		<ActivatingAnimation>
			<Change Slice.Opacity="1" Duration="0.5"/>
			<Change Slice.Height="80%" Duration="0.3" Easing="QuadraticInOut" />
		</ActivatingAnimation>
		<EnteringAnimation Scale="0.5">
			<Move X="-1.6" RelativeTo="ParentSize" Duration="0.5"/>
		</EnteringAnimation>
		<ExitingAnimation Scale="0.5">
			<Move X="1.6" RelativeTo="ParentSize" Duration="0.5"/>
		</ExitingAnimation>

		<Rectangle Color="#68A038" CornerRadius="5" />
	</Panel>

	<SliceClass />
	<SliceClass />
	<SliceClass />
	<SliceClass />
</Panel>

<PageIndicator Alignment="Center" Margin="5" Navigation="nav" Y="60%">
	<Circle ux:Template="Dot" Width="9" Height="9"  Margin="4">
		<SolidColor ux:Name="dotStrokeBody" Color="#0000" />
		<Stroke ux:Name="dotStroke" Width="1">
			<SolidColor ux:Name="dotStrokeColor" Color="#fff" />
		</Stroke>
		<ActivatingAnimation>
			<Change dotStrokeBody.Color="#fff" />
			<Change dotStrokeColor.Color="#fff" />
		</ActivatingAnimation>
	</Circle>
</PageIndicator>
```
Thanks!
4

I can’t see anything wrong with your code. I’d expect it to work. Can you show me the surrounding UX as well so I can test with a bit larger fragment?

5

Here is the code and the issue in a video:

<App ux:Class="MainView">
		<Page HitTestMode="LocalBoundsAndChildren" ClipToBounds="true">
			<Panel ux:Name="Slider">
			    <!-- -->
			    <LinearNavigation ux:Name="nav">
			    <NavigationMotion GotoEasing="QuadraticOut" GotoDuration="0.3" />
			    </LinearNavigation>
			    <SwipeNavigate SwipeDirection="Left"/>
			    <!-- -->

			    <Panel ux:Class="SliceClass" ux:Name="Slice" Opacity="0.8" Alignment="VerticalCenter" Width="77%" Height="65%">
			        <ActivatingAnimation>
			            <Change Slice.Opacity="1" Duration="0.5"/>
			            <Change Slice.Height="80%" Duration="0.3" Easing="QuadraticInOut" />
			        </ActivatingAnimation>
			        <EnteringAnimation Scale="0.5">
			            <Move X="-1.6" RelativeTo="ParentSize" Duration="0.5"/>
			        </EnteringAnimation>
			        <ExitingAnimation Scale="0.5">
			            <Move X="1.6" RelativeTo="ParentSize" Duration="0.5"/>
			        </ExitingAnimation>

			        <Rectangle Color="#68A038" CornerRadius="5" />
			    </Panel>

			    <SliceClass />
			    <SliceClass />
			    <SliceClass />
			    <SliceClass />
			</Panel>

			<PageIndicator Alignment="Center" Margin="5" Navigation="nav" Y="60%">
			    <Circle ux:Template="Dot" Width="9" Height="9"  Margin="4">
			        <SolidColor ux:Name="dotStrokeBody" Color="#0000" />
			        <Stroke ux:Name="dotStroke" Width="1">
			            <SolidColor ux:Name="dotStrokeColor" Color="#fff" />
			        </Stroke>
			        <ActivatingAnimation>
			            <Change dotStrokeBody.Color="#fff" />
			            <Change dotStrokeColor.Color="#fff" />
			        </ActivatingAnimation>
			    </Circle>
			</PageIndicator>
		</Page>
</App>
```

Thanks!
6

This appears to be a defect with how Scale is applied during rooting – basically it isn’t, so all those animations are set to 100%, thus none of them appear. This will require a fuselibs fix to resolve.

I did find a workaround though, and I understand why none of our tests picked this up. Any post-rooting change will basically switch to the right values. In this case I managed to use Deferred to get this working:

			<Deferred>
				<SliceClass />
				<SliceClass />
				<SliceClass />
				<SliceClass />
			</Deferred>