Combination of Navigator and PageControl

How-to Discussions
#1

For my app 11t for Mastodon (open source network somewhat like Twitter) I have a couple of timelines (home, notifications, public timeline) and detail pages, such as a Post Context, a page for a Hashtag, a page for a User Profile. This is handled by a Navigator and works well; the detail pages are re-used, while the timelines keep their data.

No I would like to be able to swipe through the timelines; a <PageControl> seems the answer. Yet, if I combine the Navigator and the PageControl, I cannot swipe back from a detail page.

<Router ux:Dependency="router" />
<Navigator DefaultPath="splash">
	<SplashPage ux:Name="splash" router="router" SwipeBack="None" />
	<LoginPage ux:Name="login" router="router" TopNavBar="TopNavBar" />
	<PageControl AllowedSwipeDirections="Both">
		<TimelinePage ux:Name="timeline" router="router" TopNavBar="TopNavBar" />
		<NotificationsPage ux:Name="notifications" router="router" TopNavBar="TopNavBar" />
		<TimelinePage ux:Name="favourites" router="router" TopNavBar="TopNavBar" />
		<TimelinePage ux:Name="publictimeline" router="router" TopNavBar="TopNavBar" />
	</PageControl>
	<UserProfilePage ux:Template="userprofile" router="router" TopNavBar="TopNavBar" />
	<HashtagPage ux:Name="hashtag" router="router" TopNavBar="TopNavBar" />
	<PostPage ux:Template="postcontext" router="router" TopNavBar="TopNavBar" />
</Navigator>

I hope someone has a better or more elegant solution.

#2

continued

Uldis pointed me into the right direction on Slack, adding it here for anyone else with a similar question.

I removed the PageControl, and replaced this with a SwipeGesture on each page. Adding one here as an example. In my code, the navigation is done in JS.

<Router ux:Dependency="router" />
<Navigator DefaultPath="splash">
	<SplashPage ux:Name="splash" router="router" SwipeBack="None" />
	<LoginPage ux:Name="login" router="router" TopNavBar="TopNavBar" />
	<TimelinePage ux:Name="timeline" router="router" TopNavBar="TopNavBar">
		<SwipeGesture ux:Name="swipeleft" Direction="Left" Length="100" />
		<Swiped Source="swipeleft">
			<Callback Handler="{goNotifications}" />
		</Swiped>
	</TimelinePage>
	<NotificationsPage ux:Name="notifications" router="router" TopNavBar="TopNavBar" />
	<TimelinePage ux:Name="favourites" router="router" TopNavBar="TopNavBar" />
	<TimelinePage ux:Name="publictimeline" router="router" TopNavBar="TopNavBar" />
	<UserProfilePage ux:Template="userprofile" router="router" TopNavBar="TopNavBar" />
	<HashtagPage ux:Name="hashtag" router="router" TopNavBar="TopNavBar" />
	<PostPage ux:Template="postcontext" router="router" TopNavBar="TopNavBar" />
</Navigator>