horizontal scrollable page indicator

How-to Discussions
1

Hi guys, i’m struggling with building a horizontal scrollable page indicator, i dont get how can i specify a layoutMaster if my pages are observables and how can i make my horizontal scrollview scroll while i’m navigating.

<App>
	<ClientPanel Color="#64b5f6">
		<JavaScript>
		var Observable = require("FuseJS/Observable");
		var pages = Observable({"name":"page1", "title":"Annexes", "highlight":"#34495e"}, {"name":"page2", "title":"Travaux", "highlight":"#32595e"}, {"name":"page3", "title":"Rating", "highlight":"#37775f"}, {"name":"page4", "title":"CheckList", "highlight":"#34d6ee"}, {"name":"page5", "title":"CheckListBis", "highlight":"#34495e"}, {"name":"page6", "title":"CheckListBis", "highlight":"#39995e"}, {"name":"page7", "title":"CheckListBis", "highlight":"#34495e"})

	module.exports = {
		pages: pages,
		pageCount: pages.length
	}
		</JavaScript>

		<Page ux:Class="MyPage">
				<ResourceFloat4 Key="Highlight" Value="{highlight}" />
				<Rectangle Color="{highlight}" />
		</Page>


		<Grid Rows="1*,10*">
			<Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4">
				<string ux:Property="Text" />
				<Text Value="{ReadProperty Text}" Color="#FFF" Font="Bold" Alignment="Center" />
			</Panel>


			<!-- <Rectangle ux:Name="indicator"  LayoutMaster="{ReadProperty  }" Alignment="Bottom" Height="4" Color="#6c7a89">
				<LayoutAnimation>
						<Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
				</LayoutAnimation>
		</Rectangle> -->

<Panel>
	<ScrollView  AllowedScrollDirections="Horizontal">
		<StackPanel Orientation="Horizontal" Margin="30,0,0,0" ItemSpacing="40">
			<Each Items="{pages}">
				<Panel ux:Name="{name}">
					<Tab Text="{name}"/>
				</Panel>
			</Each>
		</StackPanel>
	</ScrollView>
</Panel>



			<PageControl ux:Name="pages">
				<Each Items="{pages}">
					<MyPage/>
				</Each>
		</PageControl>
		</Grid>
	</ClientPanel>
</App>
2

Hi prince,

you should make use of the PageIndicator class, which is specifically made for this purpose. The docs are pretty clear and several examples on Fuse website use it, too.

Here’s your snippet, cleaned up and refactored to do what you asked for (in one particular way at least):

<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var pages = Observable({"name":"page1", "title":"Annexes", "highlight":"#34495e"}, {"name":"page2", "title":"Travaux", "highlight":"#32595e"}, {"name":"page3", "title":"Rating", "highlight":"#37775f"}, {"name":"page4", "title":"CheckList", "highlight":"#34d6ee"}, {"name":"page5", "title":"CheckListBis", "highlight":"#34495e"}, {"name":"page6", "title":"CheckListBis", "highlight":"#39995e"}, {"name":"page7", "title":"CheckListBis", "highlight":"#34495e"})

    module.exports = {
        pages: pages,
        pageCount: pages.length
    }
    </JavaScript>

    <Page ux:Class="MyPage">
        <ResourceFloat4 Key="Highlight" Value="{highlight}" />
        <string ux:Property="Title" />
        <Rectangle Color="{highlight}" />
    </Page>

    <Panel ux:Class="Tab">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Font="Bold" Alignment="Center" />
    </Panel>

    <ClientPanel Color="#64b5f6">

        <Panel Dock="Top" Height="56">
            <ScrollView AllowedScrollDirections="Horizontal">
                <PageIndicator Navigation="pages">
                    <StackLayout Orientation="Horizontal" />
                    <DockPanel ux:Template="Dot" Width="80" HitTestMode="LocalBounds">
                        <ActivatingAnimation>
                            <Change indicator.Opacity="1" />
                        </ActivatingAnimation>
                        <Rectangle ux:Name="indicator" Dock="Bottom" Height="4" Color="#6c7a89" Opacity="0" />
                        <Tab Text="{Page Title}" />
                        <Clicked>
                            <NavigateTo Target="{Page Visual}" />
                        </Clicked>
                    </DockPanel>
                </PageIndicator>
            </ScrollView>
        </Panel>

        <PageControl ux:Name="pages">
            <Each Items="{pages}">
                <MyPage Title="{name}" />
            </Each>
        </PageControl>

    </ClientPanel>
</App>