.NET MAUI Navigation animation

Question

If I want to animate the transition from one page to another in MAUI I need to activate it with true value:

await Shell.Current.GoToAsync($"//{nameof(DashboardPage)}", true);

And this animates the page transition from Right to Left. Is there a way to reverse the transition => Left to Right? Any suggestions? I did not see this as an option in MAUI documentation. Is there a trick?

I don't think that MAUI supports that out of the box. Maybe you can solve that per platform by using mappers: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize?view=net-maui-7.0 — Julian, Jan 01 '23 at 08:37
How do you actually add any page transition animations? Is there any tutorial available? Does it work in Windows as well? — 10101, Jan 02 '23 at 21:22
For Xamarin.Forms, MAUI's predecessor, there are very few examples and libraries for this and for MAUI I don't think there's any tutorial at the moment, at least I didn't find any. Since you need to use custom renderers for this in Xamarin.Forms, I expect that you'll need to do something similar in MAUI, except that you would use mappers instead. This is just an assumption, though. — Julian, Jan 02 '23 at 22:33
To transition to a different page just add true or false (for animation) in GoAsync or PopAsync function calls Shell.Current.PopAsync(true); — user117911, Jan 14 '23 at 03:59
@user117911 Is that what you needed? An animation when removing a page? Your question is easily misunderstood. My interpretation was that you want the animation go from left to right. You didn't specify that you want this for disappearing Pages (i.e. the default behavior when using a Page animation) — Julian, Jan 14 '23 at 07:19

score 3 · Answer 1 · answered Mar 29 '23 at 13:08

Had the same problem, I ended up creating a custom ContentPage with custom navigation methods :

<ContentPage
Opacity="0"
x:Class="MauiTest.AnimatedPage"
x:Name="AnimatedContainer"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" />

Code behind :

public partial class AnimatedPage : ContentPage
{
    public AnimatedPage()
    {
        InitializeComponent();

        AnimatedContainer.FadeTo(1, 100);
        AnimatedContainer.Content = Content;
    }

    public async Task AnimatedGoTo(string pUrl)
    {
        await AnimatedContainer.FadeTo(0, 100);
        await Shell.Current.GoToAsync(pUrl, true);
    }
}

And then on every page that should be animated :

<local:AnimatedPage
    Title="NewPage1"
    x:Class="MauiTest.NewPage1"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:local="clr-namespace:MauiTest"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout>
        <Label
            HorizontalOptions="Center"
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" />
        <Button
            Clicked="Button_Clicked"
            Text="Go back" />
    </VerticalStackLayout>
</local:AnimatedPage>

Code behind :

public partial class NewPage1 : AnimatedPage
{
    public NewPage1()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        base.AnimatedGoTo("//main");
    }
}

With that as a base you can use any Basic animation for your transitions.

@10101 this is using `Shell.Current.GoToAsync` so thats using Shell and ShellContent, maybe you where asking for `NavigationPage` ? — Poulpynator, Apr 29 '23 at 15:20

.NET MAUI Navigation animation

1 Answers1

Linked