[Question] First Tab ist not showing?

[Cruik]

Platform (please complete the following information):

• OS: Android
• Device: [AndroidEmulator & Amazon Fire Tablet]
• Sdk vervion: [Android SDK 29+]
• MAUI: [6.0.552]

Describe the bug
I am using DelayedViews in my TabSwitcher. When i am changing the layout from a FlexLayout to a Grid inside the DelayedView, the first tab will display nothing. When i open the next tab which is displaying the same kind of DelayedView(a new object from the same type) it gets displayed correctly.
only the first Tab with its content will not be displayed. There is no exception being thrown or displayed in the logcat

To Reproduce
Tabviewswitcher

`<tabs:ViewSwitcher x:Name="Switcher"
Animate="True"
SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">

                <tabs:DelayedView x:TypeArguments="contentViews:LobiPageView"
                                  AccentColor="White"
                                  BindingContext="{Binding Page1ViewModel}"
                                  Animate="True"
                                  UseActivityIndicator="True" />
                <tabs:DelayedView x:TypeArguments="contentViews:LobiPageView"
                                  BindingContext="{Binding Page2ViewModel}"
                                  AccentColor="{StaticResource Primary}"
                                  Animate="True"
                                  UseActivityIndicator="True" />
                <tabs:DelayedView x:TypeArguments="contentViews:LobiPageView"
                                  BindingContext="{Binding Page3ViewModel}"
                                  AccentColor="{StaticResource Primary}"
                                  Animate="True"
                                  UseActivityIndicator="True" />
                <tabs:DelayedView x:TypeArguments="contentViews:LobiPageView"
                                  BindingContext="{Binding Page4ViewModel}"
                                  AccentColor="{StaticResource Primary}"
                                  Animate="True"
                                  UseActivityIndicator="True" />
                <tabs:DelayedView x:TypeArguments="contentViews:LobiPageView"
                                  BindingContext="{Binding Page5ViewModel}"
                                  AccentColor="{StaticResource Primary}"
                                  Animate="True"
                                  UseActivityIndicator="True" />

            </tabs:ViewSwitcher>`

DelayedView ContentView
`

    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <BindableLayout.ItemTemplate>
        <DataTemplate>

....


`

Screenshots (if applicable)
First Page is not displayed

Scond Tab is displayed correctly with the same contentview

[roubachof]

As you probably seen, delayed view is a very simple piece of code. So I'm afraid I would lean for a maui bug. You can try increase the delay to see if it changes something, or use a LazyView instead

[Cruik]

ah , the curious thing is. This only occurs in release mode. When i am debugging, everything is displaying correct

[roubachof]

Try increasing the delay then

[Cruik]

I increased it, now the loading symbol of the delayedview is at least showing. but the view itself won´t show. Seems like i will try to use a lazyview at least for the first tab

[Cruik]

Workaround is to put an empty and hidden StackLayout in first Position of the ViewSwitcher and handle the selectedTabIndex by myself

[johnernest02]

I solved this by adding an empty view in ViewSwitcher and an empty tab in the TabHostView. Problem now is the empty tab, even though it is hidden and has a width of 0, it still takes up space. Any ideas how to shrink the width to zero so it only fully "shows" 3 tabs?

[andyzukunft]

Hey I have a similar problem and want to share some insights.

OS: iOS
Device: iOS Simulator
Sdk vervion: iOS v16.2
MAUI: 7.0.92/7.0.100

I have a ViewSwitcher in my MainPage. The first tab in the switcher is being shown however the View Model seems not to be loaded correctly. All the fields / areas are showing even though they should not - based on code in the View Model. It is working in Android. Within my code there seems to be no change in behaviour on how the VM is generated etc. if compared to Android. My workaround is to change the first tab to LazyView which works on Android and iOS.

[eyeveye]

Please this at your code behind
SelectedViewModelIndex = -1;

[bebenlebricolo]

Hey, same problem here, maybe a different cause ; but here is what I have and for me the solution is rather straight forward :

In the xaml page file : give the switcher a variable name in order to access it from the code behind

<tabs:ViewSwitcher x:Name="Switcher">
    <tabs:LazyView x:TypeArguments="views:MyView"
                    AccentColor="{StaticResource Primary}"
                    UseActivityIndicator="True">
    </tabs:LazyView>
</tabs:ViewSwitcher>

And in the Page implementation :

    protected override void OnAppearing()
    {
        base.OnAppearing();
        
        // Forces the ViewSwitcher to trigger the SelectedIndexPropertyChanged event
        Switcher.SelectedIndex = -1;
        Switcher.SelectedIndex = _viewModel.SelectedViewModelIndex;
    }

The event is triggered like this in the codebase : SelectedIndexPropertyChanged

This happens because when adding children in ViewSwitcher, by default they are hidden :

protected override void OnChildAdded(Element child)
{
    base.OnChildAdded(child);

    if (child is View view)
    {
        HideView(view, Children.Count - 1);
    }
}

Original code can be found here.

I don't know if that's the only reason for the tab not to show in the first place, flickering it like I'm doing is probably not the thing to do here, but for me it solved the issue quite well 😄

Shouldn't the first child tab be loaded and visible by default whenever the TabSwitcher is loaded (and displayed) ?
If so, I suggest we have the StartupSelectedIndex property (set to 0 or -1 by default, will choose the first tab) so that we can optionally tell ViewSwitcher to start on a given tab.

[JRPMike]

I have a similar issue on iOS only. First tab never gets the binding context set. Second one does. If I put a the following code in my ContentView, with a break point, the breakpoint gets hit when I change the tab but never for the first tab.
protected override void OnBindingContextChanged() { base.OnBindingContextChanged(); }

I had to set my default value of the view model SelectedViewModelIndex to -1 and then add
protected override void OnAppearing() { base.OnAppearing(); Switcher.SelectedIndex = -1; Switcher.SelectedIndex = Math.Max( _viewModel.SelectedViewModelIndex, 0 ); } to the tab content page.

[Luisalvarenga]

Hey I have a similar problem and want to share some insights.

OS: iOS Device: iOS Simulator Sdk vervion: iOS v16.2 MAUI: 7.0.92/7.0.100

I have a ViewSwitcher in my MainPage. The first tab in the switcher is being shown however the View Model seems not to be loaded correctly. All the fields / areas are showing even though they should not - based on code in the View Model. It is working in Android. Within my code there seems to be no change in behaviour on how the VM is generated etc. if compared to Android. My workaround is to change the first tab to LazyView which works on Android and iOS.

Thanks for the tip, this workaround is working for me without messing with index -1

[roubachof]

My dudes in the ViewSwitcher the SelectedIndexProperty already default to -1.
So you only have to set the SelectedIndex in your view model to whichever index you want.

for example:

public class BottomTabsPageViewModel : ANavigableViewModel
{
    private int _selectedViewModelIndex = 0;

    public BottomTabsPageViewModel(
        INavigationService navigationService,
        ISillyDudeService sillyDudeService,
        ErrorEmulator errorEmulator)
        : base(navigationService)
    {
        HomePageViewModel = new HomePageViewModel(navigationService, sillyDudeService);
        GridPageViewModel = new GridPageViewModel(navigationService, sillyDudeService);
        SelectedViewModelIndex = 2;
    }

will start the app with the 3rd bottom tabs selected (and lazy loaded).

You can also directly set the SelectedIndex in the view constructor code behind:

public partial class MainPage : ContentPage
{
	public MainPage(BottomTabsPageViewModel viewModel)
	{
		InitializeComponent();

        BindingContext = viewModel;
        Switcher.SelectedIndex = 3;
    }

    private BottomTabsPageViewModel ViewModel => (BottomTabsPageViewModel)BindingContext;
}