goto next page PageControl

How-to Discussions
1

Hi! It’s posible in javascript to go to the next page in a PageControl that have a Each item inside?

I have something like this but don’t work when I click Next!:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");

		var Pages = Observable();
		var ActivePage = Observable("");

		Pages.add(new Page("1"));
		Pages.add(new Page("2"));
		Pages.add(new Page("3"));

		function Page(Title) {
			this.Title = Title;
		}

		function Next() {
			console.log("Next");
			ActivePage.value = "2";
		}

	    module.exports = {
	    	ActivePage: ActivePage,
	    	Next: Next,
	        Pages: Pages
	    };
	</JavaScript>

	<ClientPanel>
		<Page ux:Class="PageWithTitle" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
			<StackPanel Alignment="VerticalCenter">
				<Panel Color="#595FFF" Width="80%" Height="45">
					<Text Value="{Title}" FontSize="22" Alignment="Center" TextColor="#fff"/>
				</Panel>

				<Panel Margin="0,50,0,0" Color="#000" Width="80%" Height="45">
					<Clicked Handler="{Next}" />
					<Text Value="Next" FontSize="22" Alignment="Center" TextColor="#fff"/>
				</Panel>
			</StackPanel>
		</Page>

		<PageControl Active="{ActivePage}">
			<Each Items="{Pages}">
				<PageWithTitle ux:Name="{Title}" />
			</Each>
		</PageControl>
	</ClientPanel>
</App>
2

Bind against the ActiveIndex property

<PageControl ActiveIndex="{ActivePage}">
1 Like
3

Thanks!!! Work perfect!!!