Add Content Programatically to TabViewItem in TabView Xamarin forms - xamarin.forms

Question

I am using TabView in my project. I've installed Xamarin.community.toolkit.
I am trying to add Content for TabViewitem programmatically instead of xaml because each ContentView of TabViewItem has service calls in it's constructor which is causing the issue when all the TabViewItems load at once.
Below is my code:
<xcl:TabView x:Name="MainTabView"
TabStripPlacement="Top">
<xcl:TabViewItem
x:Name="Tab1"
Text="Details"
Margin="16,0,16,0"
TextColor="Black"
FontFamily="{StaticResource SFProRegular}"
TextColorSelected="Black"
FontSize="15">
</xcl:TabViewItem>
------
</xcl:TabView>
And I 'm trying to add Content to TabViewItem programatically like below (Page1 is a ContentView)
var stackPanel = new StackLayout { Orientation = StackOrientation.Vertical };
stackPanel.Children.Add(new Page1());
DetailsTabView.Content = stackPanel;
But the UI is not rendering in my app.
The same works If I add the Page1 like below:
<xcl:TabView x:Name="MainTabView"
TabStripPlacement="Top" >
<xcl:TabViewItem
x:Name="Tab1"
Text="Details"
Margin="16,0,16,0"
TextColor="Black"
FontFamily="{StaticResource SFProRegular}"
TextColorSelected="Black"
FontSize="15">
<template:Page1 />
</xcl:TabViewItem>
------
</xcl:TabView>
Any help is appreciated!

Answer 1

And I 'm trying to add Content to TabViewItem programatically like below (Page1 is a ContentView)
If you want to add one COntentview in one TabViewItem by code behind, you can take a look:
<xct:TabView
x:Name="mytabview"
TabIndicatorColor="Yellow"
TabStripBackgroundColor="Blue"
TabStripHeight="60"
TabStripPlacement="Bottom">
<xct:TabViewItem
x:Name="tb1"
FontSize="12"
Text="Tab 1"
TextColor="White"
TextColorSelected="Yellow">
<StackLayout />
</xct:TabViewItem>
<xct:TabViewItem
x:Name="tb2"
FontSize="12"
Text="Tab 2"
TextColor="White"
TextColorSelected="Yellow">
</xct:TabViewItem>
</xct:TabView>
Then adding ContentView to TabViewItem.
public MainPage()
{
InitializeComponent();
mytabview.TabItems[0].Content = new contentview1();
mytabview.TabItems[1].Content = new contentview2();
}
Note: please forget to add Stacklayout or other layout inside TabViewItem by xaml, then code you add contentview will be effective.

Answer 2

you need to do somethig like this
<xct:TabView TabItemsSource="{Binding TabVms}"
TabStripPlacement="Top"
TabStripBackgroundColor="LightGray"
TabIndicatorColor="Gray" IsTabStripVisible="True">
<xct:TabView.TabViewItemDataTemplate>
<DataTemplate>
<Grid>
// tabs
</Grid>
</DataTemplate>
</xct:TabView.TabViewItemDataTemplate>
<xct:TabView.TabContentDataTemplate>
<DataTemplate>
<Grid>
// content`enter code here`
</Grid>
</DataTemplate>
</xct:TabView.TabContentDataTemplate>
</xct:TabView>