Xamarin Forms Tabbed Page Load Data when tab is Select

Question

I Have a TabbedPage in Xamarin Forms like this :

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AppName.Views.Main"
            xmlns:Search="clr-namespace:AppName.Views.Search"
             x:Class="AppName.Views.Main.BottomNavigationPage"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.ToolbarPlacement="Bottom"
             android:TabbedPage.BarSelectedItemColor="{DynamicResource PrimaryColor}"
             android:TabbedPage.BarItemColor="{DynamicResource Gray-600}"
             android:TabbedPage.IsSwipePagingEnabled="False"
             BarBackgroundColor="White"
             NavigationPage.HasNavigationBar="False">
    <TabbedPage.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </TabbedPage.Resources>
    
    <local:HomePage Title="">
        <local:HomePage.IconImageSource>
            <FontImageSource FontFamily="{StaticResource FASolid}"
                                 Glyph="&#xf015;"
                                 Size="10"/>
        </local:HomePage.IconImageSource>
    </local:HomePage>
    <Search:ExplorePage Title="">
        <Search:ExplorePage.IconImageSource>
            <FontImageSource FontFamily="{StaticResource FASolid}"
                                 Glyph="&#xf002;"
                                 Size="10"/>
        </Search:ExplorePage.IconImageSource>
    </Search:ExplorePage>
    <local:PhotosPage Title="">
        <local:PhotosPage.IconImageSource>
            <FontImageSource FontFamily="{StaticResource FASolid}"
                                 Glyph="&#xf0fe;"
                                 Size="10"/>
        </local:PhotosPage.IconImageSource>
    </local:PhotosPage>
    <local:SettingsPage Title="">
        <local:SettingsPage.IconImageSource>
            <FontImageSource FontFamily="{StaticResource FASolid}"
                                 Glyph="&#xf004;"
                                 Size="10"/>
        </local:SettingsPage.IconImageSource>
    </local:SettingsPage>
</TabbedPage>

Each page has it's ViewModel that asign to it in code behind after InitializeComponent() and each ViewModel fetch data from Rest API

When App is running and after SplashScreen all ViewModel execute and fetch data

What can I do to run each ViewModel when tab is select not before selection ?

Answer 1

There is an override method in TabbedPage named "OnCurrentPageChanged" that call on tab change. We can use x:Name attribute to access the element of xaml in code behind.

In Xaml, Apply x:Name attribute value.

<local:HomePage x:Name="Home">
<local:ExplorePage x:Name="Explore"> //use same for others pages

Override below method in code behind.

protected override void OnCurrentPageChanged()
        {
            base.OnCurrentPageChanged();
            if(CurrentPage is HomePage)
            {
                Debug.WriteLine("Home Page");
                var viewModel = Home.BindingContext as HomeViewModel;
                viewModel.CallMethodToLoadData();
            }else if(CurrentPage is ExplorePage)
            {
                Debug.WriteLine("Explore Page");
                var viewModel = Explore.BindingContext as ExploreViewModel;
                viewModel.CallMethodToLoadData();
            }
            // Same for other pages
        }