# How can I get this done with a PageControl?

**URL:** <https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434>\
**Category:** How-to Discussions\
**Created:** [February 16, 2017, 10:22pm UTC](https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434 "2017-02-16T22:22:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [February 16, 2017, 10:22pm UTC](https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434/1 "2017-02-16T22:22:34Z")

</div>

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](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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/uS3O6UL5kdLe-image-1487283718178.21.43) PM.png)

My `PageControl` code:

````auto
<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!
````

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [February 17, 2017, 7:54am UTC](https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434/2 "2017-02-17T07:54:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [February 17, 2017, 2:49pm UTC](https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434/3 "2017-02-17T14:49:31Z")

</div>

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

- [Attached MOV file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/bl08liCun5p3-image-1487342618599.mov)

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

My code:

````auto
<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!
````

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [February 17, 2017, 3:36pm UTC](https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434/4 "2017-02-17T15:36:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [February 17, 2017, 3:48pm UTC](https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434/5 "2017-02-17T15:48:43Z")

</div>

Here is the code and the issue in a video:

- [Attached MOV file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/wFdBXRY5hYhd-image-1487346464517.mov)

````auto
<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!
````

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [February 20, 2017, 2:57pm UTC](https://forums.fusetools.com/t/how-can-i-get-this-done-with-a-pagecontrol/5434/6 "2017-02-20T14:57:24Z")

</div>

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:

```auto
			<Deferred>
				<SliceClass />
				<SliceClass />
				<SliceClass />
				<SliceClass />
			</Deferred>

```