Using SwipeGeture for special control in <PageConrol>

How-to Discussions
1

I would like to use swipegesture in PageConrol, not just for transition to the another page.

I modified some codes in ‘tab-bar-navigation’ example.

SwipingAnimation doesn’t work.

How to resolve this?

Fuse Version 0.37.0(build 12978)

	var pages = [
		{"name":"page1", "highlight":"#34495e", "icon":"Assets/icon-hexagon.png"},
		{"name":"page2", "highlight":"#3498db", "icon":"Assets/icon-star.png"},
		{"name":"page3", "highlight":"#aa3377", "icon":"Assets/icon-square.png"},
		{"name":"page4", "highlight":"#88cc22", "icon":"Assets/icon-triangle.png"}
	];
	module.exports = {
		pages: pages,
		pageCount: pages.length
	};

<Page ux:Class="MyPage">
	<ResourceFloat4 Key="Highlight" Value="{highlight}" />
	<FileImageSource ux:Key="Icon" File="{icon}" />
	<Panel Width="100" Height="100" Background="White">
		<SwipeGesture ux:Name="swipe" Direction="Right" Length="200" />
		<SwipingAnimation Source="swipe">
			<Move X="200" />
		</SwipingAnimation>

		<Swiped Source="swipe">
			<DebugAction Message="Swiped!" />
		</Swiped>
	</Panel>
</Page>


<DockPanel>
	<StatusBarBackground Dock="Top"/>
	<BottomBarBackground Dock="Bottom"/>

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

	<PageIndicator Dock="Bottom" Height="45" Navigation="pages">
		<GridLayout ColumnCount="{pageCount}" />
		<Panel ux:Template="Dot" Height="45">
			<ActivatingAnimation>
				<Scale Target="icon" Factor="1.5" />
			</ActivatingAnimation>
			<Clicked>
				<NavigateTo Target="{Page Visual}"/>
			</Clicked>
			<Panel ux:Name="icon" Padding="10">
				<Image Source="{Page Icon}" />
			</Panel>
			<Rectangle Color="{Page Highlight}" />
		</Panel>
	</PageIndicator>

</DockPanel>
2

Hi jbvoice,

this turns out to be a known limitation currently. There has been some work put into resolving the problem, and there still are some things outstanding. An internal ticket has been created and you’ll get notified when there’s a solution.