How to integrate a swipeNavigate feature with a navigator?

How-to Discussions
1

Hello!

I am very new to fuse and would like help on the following feature! I am trying to implement a calendar feature which swipes right to the next month and swipes left to the last month. The whole calendar would move along with the finger as long as it is still touching the screen. Similar to the combination of LinearNavigation and SwipeNavigate in the swipe-gesture-reveal example.

However, I can’t use LinearNavigation here because I want the calendar can go left or right limitless so I use the navigator to create a loop of templates (when reaching the end, it can go to the first template; when reaching the start, it can go to the last template). The problem I have now is that when swiping, I can not move the template other than the current template.So, say it I swipe right, the current month is moving right but instead of the previous month, a huge white blank moving with it. How can I solve this issue? Or maybe I am taking the wrong approach and it would be great that someone can point me the right direction. Thanks a lot!

<Panel ux:Name="Calendar">
	<Closure (Ready)="onRouterClosure($event)"></Closure>  // In the .js file, I pass the router to a variable which can be used in 
	<Router ux:Name="router" />

	<Page ux:Class="Month" Transition="None">
		<SwipeGesture ux:Name="swipeRight" Direction="Right" Type="Simple" />
		<SwipeGesture ux:Name="swipeLeft" Direction="Left" Type="Simple" />
		<SwipingAnimation Source="swipeRight">
			<Move Target="calendarPanel" X="0.7" RelativeTo="Size" Duration="0.5" />   // how to move other templates other than current one?
		</SwipingAnimation>
		<SwipingAnimation Source="swipeLeft">
			<Move Target="calendarPanel" X="-0.7" RelativeTo="Size" Duration="0.5" />
		</SwipingAnimation>
		<Swiped Source="swipeLeft">
			<Callback (Handler)="previous()"/>     // previous function uses 'router.goto' to go to a previous template
		</Swiped>
		<Swiped Source="swipeRight">
			<Callback (Handler)="next()"/>        // next function uses 'router.goto' to go to a previous template
		</Swiped>

		<StackPanel ux:Name="calendarPanel">
			<Text Value="{{monthNumber}}" />
			<Rectangle Name="rectangle1" Color="Yellow" Width="100" Margin="20" Height="100" (Clicked)="next()">
                            <Text Value="Next"/>
                        </Rectangle>
			<Rectangle Color="Yellow" Width="100" Margin="20" Height="100" (Clicked)="previous()">
                            <Text Value="Previous"/>
		        </Rectangle>
		</StackPanel>
		<EnteringAnimation >
			<Move X="{{ moveX }}" RelativeTo="Size" Duration="0.5"/>
		</EnteringAnimation>
		<RemovingAnimation>
			<Move X="{{ -moveX }}" RelativeTo="Size" Duration="0.5"/>			
		</RemovingAnimation>
	</Page>
	<Navigator DefaultTemplate="1">
		<Month ux:Template="0"/>
		<Month ux:Template="1"/>
		<Month ux:Template="2"/>
	</Navigator>
</Panel>
2

Hi!

I’d recommend using a

   <PageControl>
      <Each Items="{pages}">

and dynamically adding more pages to the pages observable based on the currently active page. You can get a callback when a new page is activated using the <Activated> trigger.

We are working on improved support for swipe-navigation in Navigator, but currently (as of Fuse 0.26) there is no good way without adding Uno code.

3

Hi Anders, thanks for the reply! I will try working on the PageControl while waiting for the new release in the future then.