.NET MAUI Documentation

1. Define Your Custom Transition Animation

You'll create a class that encapsulates your transition logic. This class will often involve manipulating the `VisualElement` properties (like opacity, translation, scale) over time using MAUI's animation APIs.

For example, a simple fade-in/fade-out transition:

using Microsoft.Maui.Controls;
using System;
using System.Threading.Tasks;

public class FadePageTransition : PageTransition
{
    public override Task OnPushAsync(VisualElement content, CancellationToken cancellationToken)
    {
        content.Opacity = 0;
        return content.FadeTo(1, 250, Easing.CubicIn);
    }

    public override Task OnPopAsync(VisualElement content, CancellationToken cancellationToken)
    {
        return content.FadeTo(0, 250, Easing.CubicOut);
    }
}
                

This example demonstrates a basic fade transition using `FadeTo`. You can explore other animation methods like `TranslateTo`, `ScaleTo`, and combine them for more complex effects.

2. Register Your Custom Transition

You need to tell the MAUI navigation system to use your custom transition. This is typically done in your application's startup code (e.g., in MauiProgram.cs or your App class).

using Microsoft.Maui.Controls;
using Microsoft.Maui.Hosting;
using Microsoft.Extensions.DependencyInjection;

public class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp()
            .ConfigureServices(); // Assume ConfigureServices registers navigation

        // Register custom transition
        // This is a conceptual example, actual registration might vary based on your navigation service implementation
        // For instance, if you have a custom INavigationService:
        // builder.Services.AddSingleton(s =>
        //     new CustomNavigationService(s.GetRequiredService())
        //     .RegisterTransition("Fade", typeof(FadePageTransition)));

        // If using the default NavigationPage and a custom transition handler:
        // You might need to extend NavigationPage or use a Behavior.
        // A common approach is to create a custom NavigationPage that accepts transition types.

        return builder.Build();
    }
}
                

The exact method of registration might depend on whether you're using the standard NavigationPage or a custom navigation service.

3. Apply the Custom Transition

When navigating, specify the name of your registered transition.

// Assuming you have access to your custom navigation service or a NavigationPage derivative
await Navigation.PushAsync(new NextPage(), "Fade");
// Or if using a custom service:
// await _customNavigationService.PushAsync(new NextPage(), "Fade");
                

Note: The exact API to specify a transition name can vary. Some implementations might use constructors, properties, or specific navigation methods.