# Combination of Navigator and PageControl

**URL:** <https://forums.fusetools.com/t/combination-of-navigator-and-pagecontrol/6523>\
**Category:** How-to Discussions\
**Created:** [May 14, 2017, 12:56pm UTC](https://forums.fusetools.com/t/combination-of-navigator-and-pagecontrol/6523 "2017-05-14T12:56:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeroen\_Smeets](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jeroen_smeets/32/331_2.png) [@Jeroen\_Smeets](https://forums.fusetools.com/u/Jeroen_Smeets)\
**Post date:** [May 14, 2017, 12:56pm UTC](https://forums.fusetools.com/t/combination-of-navigator-and-pagecontrol/6523/1 "2017-05-14T12:56:00Z")

</div>

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Jeroen\_Smeets](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jeroen_smeets/32/331_2.png) [@Jeroen\_Smeets](https://forums.fusetools.com/u/Jeroen_Smeets)\
**Post date:** [May 14, 2017, 7:20pm UTC](https://forums.fusetools.com/t/combination-of-navigator-and-pagecontrol/6523/2 "2017-05-14T19:20:10Z")

</div>

> > 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.

```auto
<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>

```