MainPage Animated Transitions

AdamPAdamP AUUniversity ✭✭✭✭✭
edited March 12 in Xamarin.Forms Evolution

Summary

To provide the ability for the update of the MainPage property to show animation during transition, of the page of it being changed to.

API Changes

There are three ways to approach this and I am not sure which would fit best.

  1. Provide a property in Application.cs to set a pre-existing animation. e.g.

    Application.Current.MainPageAnimation = Animation.SlideInFromLeft

  2. Provide a method to do only do the animated transition during a set. e.g.

    Application.Current.SetMainPage(newMainPage, Animation.SlideInFromLeft);

    These first 2 assume that Xamarin Forms will control the transition and not provide any customization. The next point, is expanding it to be able to add custom animations.

  3. Give control of animations to the platform. In the platform, define the animation. This is an Android example.

    Xamarin.Forms.Platform.Android.Platform.RegisterAnimation("AnimationName", Application.Current.AnimationUtils.LoadAnimation(_context, global::Android.Resource.Animation.SlideInLeft);

    Then set the animation via the string, based on either choice of the first 2 points.

Intended Use Case

A common pattern to separate the login screens with the main application is to change the MainPage property in Application. Some MVVM frameworks also rely on this, such as FreshMVVM and Exrin. This would allow the ability to provide an animation when transitioning between different Pages at the root level.

0
0 votes

Open · Last Updated

Posts

  • AdamPAdamP AUUniversity ✭✭✭✭✭
    edited March 12

    I have also done a very rough test to see if its possible, which it is via the below code.

    Note: This isn't how I would implement it, I just wanted to show that it could be done, and where the animations need to be set.

    iOS

    In FormsAppDelegate.cs change this function

    void UpdateMainPage()
    {
       if (_application.MainPage == null)
            return;
    
        var platformRenderer = (PlatformRenderer)_window.RootViewController;
    
        if (platformRenderer != null)
            ((IDisposable)platformRenderer.Platform).Dispose();
        if (_window.RootViewController == null)
            _window.RootViewController = _application.MainPage.CreateViewController();
        else
            UIView.Transition(_window.RootViewController.View, 1, UIViewAnimationOptions.TransitionFlipFromBottom, () => { _window.RootViewController = _application.MainPage.CreateViewController(); }, () => { });
    
    }
    

    Android

    Android proves the hardest because I can only seem to transition in, once the previous page is removed. In Platform.cs I replace the following function:

    void AddChild(Page page, bool layout = false)
    {
       if (Android.Platform.GetRenderer(page) != null)
            return;
    
        Android.Platform.SetPageContext(page, _context);
        IVisualElementRenderer renderView = Android.Platform.CreateRenderer(page);
        Android.Platform.SetRenderer(page, renderView);
    
        if (layout)
            LayoutRootPage((FormsAppCompatActivity)_context, page, _renderer.Width, _renderer.Height);
    
        renderView.ViewGroup.StartAnimation(global::Android.Views.Animations.AnimationUtils.LoadAnimation(_context, global::Android.Resource.Animation.SlideInLeft));
    
        _renderer.AddView(renderView.ViewGroup);
      }
    

    UWP

    In UWP we add in this to the SetCurrent method in Platform.cs, just before the Children.Add line.

    if (_container.ChildrenTransitions == null)
    {
        _container.ChildrenTransitions = new TransitionCollection();
        _container.ChildrenTransitions.Add(new EntranceThemeTransition());
    }
    
  • DavidGerding.4136DavidGerding.4136 USMember ✭✭

    I'm interested in this approach, too. Let me know if you made any progress on your experiments or found related code.
    Thanks!

Sign In or Register to comment.