Switch between the uwp and IOS-like pages and the uwpios page

Switch between the uwp and IOS-like pages and the uwpios page

Sometimes we need to write some uwp applications that cater to IOS users' habits. Here I will sort out the code for the effect of switching the IOS page.

First, analyze the IOS page switch. The user uses the left-right sliding mode to move forward and backward, playing a switching animation similar to FlipView. When you navigate to a new page, use the page forward animation.

UWP has many switching effects, which are located in Windows. UI. Xaml. Media. Animation. PaneThemeTransition (instead of EdgeUIThemeTransition) is the most effective way to switch to Apple ).

The effect of PaneThemeTransition is to switch from the orientation defined by the Edge attribute to the orientation defined by the Edge attribute.

Apple's switching method is:

New and forward: move from the right to the left to exit.

Return: it is translated from the left and exited from the right.

After the analysis, the general implementation steps are clear.

Add PaneThemeTransition during page Initialization

Determine the navigation mode and set the Edge Attribute before entering the animation playback. Refresh is not considered. If Left is returned, or Right is returned.

Determine the navigation mode and set the Edge Attribute before exiting the animation. Refresh is not considered. If it is returned, it is Right; otherwise, it is Left.

The code written according to this idea is as follows:

1 Imports Windows. UI. Xaml. Media. Animation 2 ''' <summary> 3''' used to port Apple applications. This page comes with Apple navigation animations and gestures. 4 ''' </summary> 5 Public MustInherit Class AppleAnimationPage 6 Inherits Page 7 Dim PaneAnim As New PaneThemeTransition {. edge = EdgeTransitionLocation. right} 8 Sub New () 9 MyBase. new10 Transitions = New TransitionCollection11 Transitions. add (PaneAnim)
12 End Sub13 Protected Overrides Sub OnNavigatedTo (e As NavigationEventArgs) 14 PaneAnim. edge = If (e. navigationMode = NavigationMode. back, EdgeTransitionLocation. left, EdgeTransitionLocation. right) 15 MyBase. onNavigatedTo (e) 16 End Sub17 Protected Overrides Sub OnNavigatingFrom (e As NavigatingCancelEventArgs) 18 PaneAnim. edge = If (e. navigationMode <> NavigationMode. back, EdgeTransitionLocation. left, EdgeTransitionLocation. right) 19 MyBase. onNavigatingFrom (e) 20 End Sub21 End Class

The next step is to write the gesture code. First, set the gesture mode to horizontal translation, and then process the ManipulationCompleted event. The judgment logic here is not unique. I thought of a way to judge. The code is written like this:

1 Imports Windows. UI. Xaml. Media. Animation 2 ''' <summary> 3''' used to port Apple applications. This page comes with Apple navigation animations and gestures. 4 ''' </summary> 5 Public MustInherit Class AppleAnimationPage 6 Inherits Page 7 Dim PaneAnim As New PaneThemeTransition {. edge = EdgeTransitionLocation. right} 8 Sub New () 9 MyBase. new10 Transitions = New TransitionCollection11 Transitions. add (PaneAnim) 12 ManipulationMode = ManipulationModes. translateX13 End Sub14 Protected Overrides Sub OnNavigatedTo (e As NavigationEventArgs) 15 PaneAnim. edge = If (e. navigationMode = NavigationMode. back, EdgeTransitionLocation. left, EdgeTransitionLocation. right) 16 MyBase. onNavigatedTo (e) 17 End Sub18 Protected Overrides Sub OnNavigatingFrom (e As NavigatingCancelEventArgs) 19 PaneAnim. edge = If (e. navigationMode <> NavigationMode. back, EdgeTransitionLocation. left, EdgeTransitionLocation. right) 20 MyBase. onNavigatingFrom (e) 21 End Sub22 Private Sub AppleAnimationPage_ManipulationCompleted (sender As Object, e As ManipulationCompletedRoutedEventArgs) Handles Me. manipulationCompleted23 Dim trans = e. cumulative. translation24 Dim DeltaX As Double = Math. abs (trans. x) 25 If Math. abs (trans. y) * 3 <DeltaX AndAlso DeltaX> 200 Then26 If trans. x> 0 Then27 If Frame. canGoBack Then Frame. goBack () 28 Else29 If Frame. canGoForward Then Frame. goForward () 30 End If31 End If32 End Sub33 End Class

These codes have been tested in my Lumia 1520 and have an ideal switching effect.