Sync multiple PageControl & Creating function module

General
1

Hello, I’ve question. I want to make carousel view, like this.

file
EFHNS4HW25X3-legacy-files-tUFLvH8btuQuhipv-w5RIIHhWL2_Iq4GCt90uWpkA.png1467×823

For this, i tried below.

<App Theme="Basic" Background="#eee">
    <DockPanel>
        <StatusBarBackground />
        <iOS.StatusBarConfig Style="Light"/>
        <JavaScript File="common.js"/>
        <DockPanel Width="100%" Height="250" Dock="Top">
            <LinearGradient ux:Name="mainGradient" StartPoint="0, 0" EndPoint="0, 1">
                <GradientStop ux:Name="mainGradStart" Offset="0.0" Color="#B5A1F2" />
                <GradientStop ux:Name="mainGradEnd" Offset="1.0" Color="#957CE7" />
            </LinearGradient>
                <PageControl ux:Name="cardView">
                    <Page ux:Name="card1" Margin="30,50,30,30">
                        <WhileActive>
                            <Set mainView.Active="page1"/>
                            <Set mainGradStart.Color="#B5A1F2" />
                            <Set mainGradEnd.Color="#957CE7" />
                        </WhileActive>
                        <Rectangle Height="100%" CornerRadius="5" Width="100%" Fill="White">
                            <Text Margin="10, 10">Card1</Text>
                        </Rectangle>
                    </Page>
                    <Page ux:Name="card2" Margin="30,50,30,30">
                        <WhileActive>
                            <Set mainView.Active="page2"/>
                            <Set mainGradStart.Color="#F485B9" />
                            <Set mainGradEnd.Color="#E14B86" />
                        </WhileActive>
                        <Rectangle Height="100%" CornerRadius="5" Width="100%" Fill="White">
                            <Text Margin="10, 10">Card2</Text>
                        </Rectangle>
                    </Page>
                    <Page ux:Name="card3" Margin="30,50,30,30">
                        <WhileActive>
                            <Set mainView.Active="page3"/>
                            <Set mainGradStart.Color="#554E52" />
                            <Set mainGradEnd.Color="#3C3638" />
                        </WhileActive>
                        <Rectangle Height="100%" CornerRadius="5" Width="100%" Fill="White">
                            <Text Margin="10, 10">Card3</Text>
                        </Rectangle>
                    </Page>
                </PageControl>
        </DockPanel>
        <PageControl ux:Name="mainView">
            <Page ux:Name="page1">
                <Text>Page1</Text>
                <WhileActive Threshold="0.5">
                    <Set cardView.Active="card1" />
                    <Set mainGradStart.Color="#B5A1F2" />
                    <Set mainGradEnd.Color="#957CE7" />
                </WhileActive>
            </Page>
            <Page ux:Name="page2">
                <Text>Page2</Text>
                <WhileActive>
                    <Set cardView.Active="card2" />
                    <Set mainGradStart.Color="#F485B9" />
                    <Set mainGradEnd.Color="#E14B86" />
                </WhileActive>
            </Page>
            <Page ux:Name="page3">
                <Text>Page3</Text>
                <WhileActive>
                    <Set cardView.Active="card3" />
                    <Set mainGradStart.Color="#554E52" />
                    <Set mainGradEnd.Color="#3C3638" />
                </WhileActive>
            </Page>
        </PageControl>
    </DockPanel>
</App>

But… i think this is very inefficient.

So, how could i sync multiple ‘PageControl’, simply? Or, have to make a module for this?