How can I get this done with a PageControl?

Back to How-to Discussions

How can I get this done with a PageControl?

file

I try many things but I always get this:

file

My PageControl code:

````

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

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

``` Thanks!

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: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 />

``` Thanks!

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?

Here is the code and the issue in a video:

````

            <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>

```

Thanks!

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>
Post Stats
  • 5
    replies
  • 656
    views
  • 3
    users
Frequent Posters