Xamarin Forms Tabbed Page Tabs Initializing

Question

I am developing a tabbed Page in Xamarin that consist of 3 tabs ( Tab1= "Home" , Tab2= "Chat" ,Tab3="Menu" )

When the App starts ( MainPage = new TabbedPage() ) it initializes (InitializeComponent();) all the tabs together at first.

My question is that if there is a way to initialize each component alone whenever the tab is pressed?

Answer 1

In my experience, what takes most of the time isn't loading the XAML, its a combination of "measure and layout", then "loading data" (e.g. the items of a list).

This example shows how to defer "measure and layout". It is as simple as setting IsVisible="False" on any XAML you want to defer. Then when it is needed, set IsVisible="True". I show the simplest case, where there is no data binding.

Deferring data loading depends on your data. The simplest technique is to start all lists (ListView, CollectionView) with ZERO ELEMENTS. When the data is needed, add the elements. I do not show that below. See How to load data when a tab is clicked.

NOTE: ON Android, InitializeComponent can be sped up further if you have Visual Studio 2019 Enterprise. In your MyProjectName.Android project, in Project Properties / Android Options (for Configuration "Release") / Code Generation and Runtime, check "AOT Compilation". and "Enable Startup Tracing". You may want to also check "Use LLVM Optimiziing Compiler". These options may increase app bundle size. Test load time on an actual device - emulator may give misleading results as to what combination loads fastest. (These options might give very slow load on an Android emulator.)

(Unfortunately, my experience is that Xamarin Forms Android initial app load is still noticeably slower than loading a Xamarin (Native) Android app (I think this is time loading the Xamarin Forms library itself). I recommend creating a native Activity to load immediately, to have a page to show while XF loads. That's a different topic.)

TabbedPage1.xaml:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPage1.Views"
            x:Class="TabbedPage1.TabbedPage1">
    <local:StartPage Title="Start" />
    <local:SlowPage Title="Slow Load" />
</TabbedPage>

TabbedPage1.xaml.cs:

using Xamarin.Forms;

namespace TabbedPage1
{
    public partial class TabbedPage1 : TabbedPage
    {
        public TabbedPage1()
        {
            InitializeComponent();
        }
    }
}

SlowPage.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPage1.Views.SlowPage">
    <ContentPage.Content>
        <StackLayout x:Name="MyContents" IsVisible="False">
            <Label Text="This text should appear after a 3 second delay."
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

SlowPage.xaml.cs:

using System.Threading.Tasks;
using Xamarin.Forms;

namespace TabbedPage1.Views
{
    public partial class SlowPage : ContentPage
    {
        public SlowPage()
        {
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            base.OnAppearing();

            if (!MyContents.IsVisible) {
                // Simulate a page that is slow to layout or load.
                await Task.Delay(3000);
                
                MyContents.IsVisible = true;
            }
        }
    }
}

StartPage.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPage1.Views.StartPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome!" FontSize="32"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

StartPage.xaml.cs:

using Xamarin.Forms;

namespace TabbedPage1.Views
{
    public partial class StartPage : ContentPage
    {
        public StartPage()
        {
            InitializeComponent();
        }
    }
}