2. Navigation configuration - GiampaoloGabba/Xamarin.Plugin.SharedTransitions GitHub Wiki

Shared transitions can only work when there is a parent navigation controller that "orchestrate" the navigation between two pages, for now you will be able to leverage the transitions inside a custom NavigationPage (SharedTransitionNavigationPage) or a custom Shell (SharedTransitionShell).

SharedTransitionNavigationPage

To activate transitions between pages, use the SharedTransitionNavigationPage instead of the classic NavigationPage:

MainPage = new SharedTransitionNavigationPage(new Page1());

Add the xmlns namespace in your pages:

xmlns:sharedTransitions="clr-namespace:Plugin.SharedTransitions;assembly=Plugin.SharedTransitions"

SharedTransitionShell

Starting from 2.1 you can use shared transitions in shell too, just change the standard main Shell in AppShell.xaml to SharedTransitionShell, for example:

<sharedTransitions:SharedTransitionShell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:sharedTransitions="clr-namespace:Plugin.SharedTransitions;assembly=Plugin.SharedTransitions"
       Title="TransitionShellApp"
       x:Class="TransitionShellApp.AppShell">

    <!-- Your Pages -->
    <TabBar>
        ....
    </TabBar>
</sharedTransitions:SharedTransitionShell>

Dont forget to update the AppShell.xaml.cs:

using Plugin.SharedTransitions;

namespace TransitionShellApp
{
	public partial class AppShell : SharedTransitionShell
	{
		public AppShell()
		{
			InitializeComponent();
		}
	}
}

Now you can navigate inside each ShellContent using shared transitions, following these instructions:

  1. Basic shared transitions with fixed elements
  2. Advanced shared transitions between collection of views and their details page
⚠️ **GitHub.com Fallback** ⚠️