How to improve loading performance in Tabbed Page xamarin forms

Question

I am trying to create bottom tabbed page in Xamarin forms and i am doing this for Android.

here i am using latest version of Xamarin Forms.

My sample Bottom tabbed page like below.

My sample details page like


    
        
            
                
                    
                        Mango
                        Banana
                        Pinaple
                        Apple
                        Avacado
                        Coconut
                        Dragan Fruit
                        Pomaganate
                        Wood Apple

And the navigation i am doing as follows

in App.xamal.cs

MainPage = new NavigationPage(new FirstPage());

I have simple first page

here in button click event i do the navigation to "Sample Tabbed Page"

await Navigation.PushAsync(new SampleTabbed());

This is working fine. but there is a performance issue.

if i run this and click on button in First page it is taking 3 seconds to load tabbed page.

if i remove list view in sample detail page it take 2 seconds to load.

but if i add just a content page to click event it take only milliseconds to load.

Am i doing some thing wrong with implementing tabbed page?

or

is there any way to improve the loading performance with tabbed pages.

Leo Zhu · Accepted Answer

A solution is to make the heavy pages load their content in a lazy manner, only when their tab becomes selected. This way, since these pages are now empty when TabbedPage is created, navigating to the TabbedPage suddenly becomes very fast!

1.create a behavior for the TabbedPage page, called ActivePageTabbedPageBehavior.

class ActivePageTabbedPageBehavior : Behavior
{
 protected override void OnAttachedTo(TabbedPage tabbedPage)
  {
    base.OnAttachedTo(tabbedPage);
    tabbedPage.CurrentPageChanged += OnTabbedPageCurrentPageChanged;
  }

 protected override void OnDetachingFrom(TabbedPage tabbedPage)
  {
    base.OnDetachingFrom(tabbedPage);
    tabbedPage.CurrentPageChanged -= OnTabbedPageCurrentPageChanged;
  }

 private void OnTabbedPageCurrentPageChanged(object sender, EventArgs e)
  {
    var tabbedPage = (TabbedPage)sender;

    // Deactivate previously selected page
    IActiveAware prevActiveAwarePage = tabbedPage.Children.OfType()
        .FirstOrDefault(c => c.IsActive && tabbedPage.CurrentPage != c);
    if (prevActiveAwarePage != null)
    {
        prevActiveAwarePage.IsActive = false;
    }

    // Activate selected page
    if (tabbedPage.CurrentPage is IActiveAware activeAwarePage)
    {
        activeAwarePage.IsActive = true;
    }
  }
}

2.define IActiveAware interface

interface IActiveAware
  {
    bool IsActive { get; set; }
    event EventHandler IsActiveChanged;
  }

3.create a base generic abstract class called LoadContentOnActivateBehavior

abstract class LoadContentOnActivateBehavior : Behavior
   where TActivateAwareElement : VisualElement
 {
  public DataTemplate ContentTemplate { get; set; }

  protected override void OnAttachedTo(TActivateAwareElement element)
   {
     base.OnAttachedTo(element);
     (element as IActiveAware).IsActiveChanged += OnIsActiveChanged;
   }

  protected override void OnDetachingFrom(TActivateAwareElement element)
   {
     (element as IActiveAware).IsActiveChanged -= OnIsActiveChanged;
     base.OnDetachingFrom(element);
   }

  void OnIsActiveChanged(object sender, EventArgs e)
   {
     var element = (TActivateAwareElement)sender;
     element.Behaviors.Remove(this);
     SetContent(element, (View)ContentTemplate.CreateContent());
   }

  protected abstract void SetContent(TActivateAwareElement element, View contentView);
}

4.the specialized LazyContentPageBehavior

class LazyContentPageBehavior : LoadContentOnActivateBehavior
 {
   protected override void SetContent(ContentView element, View contentView)
    {
      element.Content = contentView;
    }
 }

then we can use in xaml like this:

we moved the ContentPage complex layout to become a DataTemplate.

Here's the custom LazyLoadedContentPage page which is activation aware:

class LazyLoadedContentPage : ContentPage, IActiveAware
{
  public event EventHandler IsActiveChanged;

  bool _isActive;
  public bool IsActive
   {
     get => _isActive;
     set
      {
        if (_isActive != value)
        {
            _isActive = value;
            IsActiveChanged?.Invoke(this, EventArgs.Empty);
        }
      }
   }
 }

SlowContentView do some complex things

 public partial class SlowContentView : ContentView
{
    public SlowContentView()
    {
        InitializeComponent();

        // Simulating a complex view
        ...
    }
}

How to improve loading performance in Tabbed Page xamarin forms

Answers (1)

Related Questions