# Sync multiple PageControl & Creating function module 

**URL:** <https://forums.fusetools.com/t/sync-multiple-pagecontrol-creating-function-module/2745>\
**Category:** General\
**Created:** [December 26, 2015, 8:37am UTC](https://forums.fusetools.com/t/sync-multiple-pagecontrol-creating-function-module/2745 "2015-12-26T08:37:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Junseok\_Kim](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/junseok_kim/32/492_2.png) [@Junseok\_Kim](https://forums.fusetools.com/u/Junseok_Kim)\
**Post date:** [December 26, 2015, 8:37am UTC](https://forums.fusetools.com/t/sync-multiple-pagecontrol-creating-function-module/2745/1 "2015-12-26T08:37:18Z")

</div>

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

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/EFHNS4HW25X3-legacy-files-tUFLvH8btuQuhipv-w5RIIHhWL2_Iq4GCt90uWpkA.png)

For this, i tried below.

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