ActiveIndex is not working with LinearNavigation

How-to Discussions
1

Example link : https://www.fusetools.com/examples/swipe-gesture-reveal

In this code I am supposed to set ActiveIndex=“3” in the LinearNavigation to start from the 3rd value but it doesn’t does anyone know what am I doing wrong ?

    <App>
<ClientPanel>

	<Fuse.iOS.StatusBarConfig Style="Light" />
	<JavaScript File="MainView.js" />

	<LinearGradient StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#CED6DE" />
        <GradientStop Offset="1" Color="#93ADBD" />
    </LinearGradient>

	<Grid ColumnCount="3" Height="20" Alignment="Top" Margin="20">
		<Image File="Assets/Icons/search.png" Alignment="Left"/>
		<Text Value="INTEREST" Color="#fff" Alignment="Center"/>
		<Image File="Assets/Icons/gps.png" Alignment="Right"/>
	</Grid>
	<Grid ColumnCount="3" Height="30" Alignment="Bottom" Margin="20">
		<Image File="Assets/Icons/addlocation.png" />
		<Image File="Assets/Icons/location.png" />
		<Image File="Assets/Icons/person.png" />
	</Grid>

	<Panel ux:Class="Card" ux:Name="self" Opacity="0.4">
		<Scaling ux:Name="pageScaling" Factor="0.95" />

		<ActivatingAnimation>
			<Change self.Opacity="1" Duration="0.5"/>
			<Change pageScaling.Factor="1" Duration="0.5" />
		</ActivatingAnimation>
		<EnteringAnimation Scale="0.5">
			<Move X="-1.4" RelativeTo="ParentSize" Duration="0.5"/>
		</EnteringAnimation>
		<ExitingAnimation Scale="0.5">
			<Move X="1.4" RelativeTo="ParentSize" Duration="0.5"/>
		</ExitingAnimation>

		<SwipeGesture ux:Name="swipe" Direction="Up" Type="Active"/>
		<SwipingAnimation Source="swipe">
			<Move Target="topPanel" Y="-0.3" RelativeTo="Size" Duration="0.5" />
			<Change bottomPanelScaling.X="1" Duration="0.5"/>
			<Change bottomPanelScaling.Y="1" Duration="0.5"/>
			<Change bottomPanel.Opacity="1" Duration="0.5" />
		</SwipingAnimation>
		<WhileInactive Threshold="0.2">
			<SetSwipeActive Target="swipe" Value="false" />
		</WhileInactive>


		<Panel ux:Name="topPanel" Width="60%" Height="50%">
			<Rectangle CornerRadius="5" Layer="Background">
				<LinearGradient StartPoint="0,0" EndPoint="0,1">
					<GradientStop Offset="0" Color="#0004" />
					<GradientStop Offset="0.25" Color="#0000" />
					<GradientStop Offset="0.7" Color="#0000" />
					<GradientStop Offset="0.85" Color="#0007" />
					<GradientStop Offset="1" Color="#0007" />
				</LinearGradient>
			</Rectangle>
			<Text Value="{item.name}" FontSize="24" Color="#ddd" Alignment="HorizontalCenter" Margin="10">
				<DropShadow />
			</Text>
			<Grid ColumnCount="3" Margin="20" Alignment="Bottom">
				<Text Value="{item.lat}" FontSize="10" Color="#fff"/>
				<Image File="Assets/Icons/location.png" Width="13" Height="13"/>
				<Text Value="{item.long}" FontSize="10" Color="#fff" Alignment="Right"/>
			</Grid>
			<Rectangle ux:Name="topPanelRect" Layer="Background" CornerRadius="5">
				<ImageFill File="{item.image}" StretchMode="UniformToFill" WrapMode="ClampToEdge"/>
				<Shadow/>
			</Rectangle>

		</Panel>

		<Panel ux:Name="bottomPanel" Width="70%" Height="60%" Opacity="0">
			<Rectangle Layer="Background" Color="#eee" CornerRadius="5">
				<Shadow />
			</Rectangle>
			<Scaling ux:Name="bottomPanelScaling" Y="0.8" X="0.85"/>

			<Grid Rows="20,20,1*" ColumnCount="2" Alignment="Bottom" Height="30%" Padding="20,10">
				<Text Color="#444" FontSize="14" Row="0" Column="0" ColumnSpan="2" Value="{item.location}"/>
				<Text Color="#444" FontSize="14" Row="1" Column="0"
					  Value="{item.no}" Alignment="VerticalCenter"/>

				<StackPanel Orientation="Horizontal" Row="1" Column="1" Alignment="CenterRight">
					<StackPanel Orientation="Horizontal">
						<Each Count="{item.stars}">
							<Star Width="14" Height="14" Margin="1" Color="#99f"/>
						</Each>
					</StackPanel>
					<StackPanel Orientation="Horizontal">
						<Each Count="{item.starsRest}">
							<Star Width="14" Height="14" Margin="1" Color="#999"/>
						</Each>
					</StackPanel>
				</StackPanel>

				<Grid ColumnCount="2" ColumnSpan="2" Row="2" Column="0">
					<StackPanel Orientation="Horizontal">
						<Each Items="{item.people}">
							<Circle Width="30" Height="30" Color="Red" Margin="0,0,-6,0">
								<Stroke Brush="#ddd" Width="2"/>
								<ImageFill File="{}" WrapMode="ClampToEdge"/>
							</Circle>
						</Each>
					</StackPanel>
					<StackPanel Alignment="CenterRight" ItemSpacing="2">
						<Circle Width="4" Height="4" Color="#aaa" />
						<Circle Width="4" Height="4" Color="#aaa" />
						<Circle Width="4" Height="4" Color="#aaa" />
					</StackPanel>
				</Grid>
			</Grid>
		</Panel>
	</Panel>

	<Panel>
		<LinearNavigation ux:Name="nav" ActiveIndex="3">
			<NavigationMotion GotoEasing="QuadraticOut" GotoDuration="0.3" />
		</LinearNavigation>
		<SwipeNavigate SwipeDirection="Left"/>

		<Each Items="{pagesView}">
			<Card />
		</Each>
	</Panel>
</ClientPanel>
2

Hi!

The problem is that at the time you are setting the ActiveIndex, the pages don’t exist yet (because they are created asynchronously by the Each later when {pagesView} gets populated, so the value of 3 isn’t valid, and the navigation therefore sets it back to 0.

In order to work around this, you need to also data-bind ActiveIndex="{activeIndex}" and set the activeIndex observable after you’ve populated the pagesView observable.

3

Heavenchains, i took the liberty to remove your duplicate thread. I hope Anders solution was helpful.