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:

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

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!

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:

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

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
  • 174
    views
  • 3
    users
Frequent Posters