Why does the height of the xct:TabView change when returning to a page with HasNavigationBar="false"

Question

I am facing an issue with the TabView from the XamarinCommunityToolkit.

There is a MainPage with two tabs "A" and "B", "A" showing some content, "B" serving as navigation to another ContentPage "DetailsPage". Additionally, the MainPage has set NavigationPage.HasNavigationBar="false" and should not display any navigation bar.

On launch, the navigation bar is not visible as expected. When clicking Tab "B" and then the back button on the "DetailsPage", the TabView seems to change its height and takes additional space.

Here is basically all of the code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="http://xamarin.com/schemas/2020/toolkit"
             x:Class="App1.MainPage"
             NavigationPage.HasNavigationBar="false"
             >
    <StackLayout>
        <views:TabView 
            TabStripPlacement="Bottom"
            BackgroundColor="Gold"
            TabStripHeight="60"
            TabStripBackgroundColor="ForestGreen"
            >
            <views:TabViewItem
                Text="A">
                <Grid BackgroundColor="Cyan"/>
            </views:TabViewItem>
            <views:TabViewItem
                Text="B"
                TabTapped="ShowDetailsPage">
            </views:TabViewItem>
        </views:TabView>
    </StackLayout>
</ContentPage>

In the code-behind file App.xaml.cs one additional line is added in order to enable navigating to the "DetailsPage":

MainPage = new NavigationPage(new MainPage());

Here is the result with the undesired "golden bar": Undesired change in height of TabView

I already tried to:

• Set NavigationPage.SetHasNavigationBar(this, false); in the constructor of the MainPage instead
• Set NavigationPage.SetHasNavigationBar(this, false); in the OnAppearing event instead

Any help or hints are highly appreciated.

EDIT/ADDITION: The hint towards wrong layout of the tabview as mentioned by Alexander May lets us narrow down the issue even further.

The issue exists also when navigating to a details page via any navigation object such as a button within the content of the TabViewItem.

The sample can thus be further reduced to one single tab:

    <StackLayout>
        <views:TabView 
            TabStripPlacement="Bottom"
            BackgroundColor="Gold"
            TabStripHeight="60"
            TabStripBackgroundColor="ForestGreen"
            >
            <views:TabViewItem
                Text="A">
                <Grid BackgroundColor="Cyan">
                    <Button Clicked="ShowDetailsPage" Text="Click Me" BackgroundColor="LightPink"></Button>
                </Grid>
            </views:TabViewItem>
        </views:TabView>
    </StackLayout>

Answer 1

The undesired "golden bar" is due to the wrong layout of the tabview,please try my solution which works well!

Below is the Code in xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:views="http://xamarin.com/schemas/2020/toolkit"
         NavigationPage.HasNavigationBar="False"
         x:Class="AppNavTab.MainPage"
         >
<Grid>
    <views:TabView
            TabStripPlacement="Bottom"
            TabStripBackgroundColor="Green"
            TabStripHeight="60"
            TabContentBackgroundColor="Cyan">

        <views:TabViewItem
                Text="A"
                TextColor="Black"
                FontSize="12">
            <Grid BackgroundColor="Cyan">
                <Label
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Text="TabContent1" />
            </Grid>
        </views:TabViewItem>

        <views:TabViewItem
                Text="B"
                TextColor="Black"
                FontSize="12"
                TabTapped="TabViewItem_TabTapped">
       
        </views:TabViewItem>
    </views:TabView>
</Grid>

Below is the code behind xaml:

    public partial class MainPage : ContentPage
    {
        public MainPage()
       {
            InitializeComponent();
       }

        private void TabViewItem_TabTapped(object sender, Xamarin.CommunityToolkit.UI.Views.TabTappedEventArgs e)
        {
            Navigation.PushAsync(new DetailPage());
        }
    }

Workaround 2:

    <Grid RowSpacing="0" ColumnSpacing="0" x:Name="grid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="60"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>


    <StackLayout BackgroundColor="Cyan" Grid.ColumnSpan="2">
        
    </StackLayout>

    <Button Text="item1" Grid.Row="1" Grid.Column="0" Clicked="Button_Clicked1"/>
    <Button Text="item2" Grid.Row="1" Grid.Column="1" Clicked="Button_Clicked2"/>

    </Grid>

Answer 2

There is an open bug for this on the Community Toolkit site: https://github.com/xamarin/XamarinCommunityToolkit/issues/625