TabbedPage not working on iOS using MAUI, blank page is displayed instead

Question

I am having problems with TabbedPage in my MAUI app.

The component works fine on Android, tabs work as expected, but on iOS, it simply doesn't work, it only displays a blank page with nothing in it, no erros, no crashes, just plain blank.

I am using Visual Studio 2022 Preview.

Print of it running on iOS simulator (iPhone 13 Pro) on a macOS (Monterey):

Print of it running on Android (Real device, Poco X3 Pro, MIUI 12.5.7, Android 11):

Here is the XAML code of the TabbedPage:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppColetaLeite.LinhasColeta"
                          NavigationPage.HasNavigationBar="false"

            Title="hello">
    <ContentPage Title="Tab 1">

        
    </ContentPage>

    <ContentPage Title="Tab 2">


    </ContentPage>

    <ContentPage Title="Tab 3">


    </ContentPage>

</TabbedPage>

Here is the Code Behind of this page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

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

I am curious whether this would still be blank on iOS, if you put contents on each tab. As simple as `` inside each `ContentPage`. (I'm thinking maybe there is an obscure bug when a page is empty.) Might also be good to force tabs to be within iOS "safe area", by [adding these two lines to element at top of page's xaml file](https://stackoverflow.com/a/49296694/199364). — ToolmakerSteve, Jan 28 '22 at 02:05
Deleted my other comment because it was just a Visual Studio bug. — Igor Lima, Jan 28 '22 at 12:14

Amjad S. · Answer 1 · 2022-01-27T16:37:14.537

1

i recommend using Shell untill Maui become more stable and support controls on all platforms .

<Application.MainPage>
<Shell BackgroundColor="LightGray">

            <TabBar >
                <Tab Title="Home" Icon="tab_home.png">
                    <ShellContent ContentTemplate="{DataTemplate local:ClassesPage}"/>
                </Tab>
                <Tab Title="Favorites" Icon="tab_favorites.png">
                    <ShellContent ContentTemplate="{DataTemplate local:GuardientsPage}"/>
                </Tab>
                <Tab Title="Map" Icon="tab_map.png">
                    <ShellContent ContentTemplate="{DataTemplate local:StaffPage}"/>
                </Tab>
                <Tab Title="Settings" Icon="tab_settings.png">
                    <ShellContent ContentTemplate="{DataTemplate local:MenuPage}"/>
                </Tab>
            </TabBar>

</Shell>
</Application.MainPage>

edited Jan 27 '22 at 16:37

answered Jan 27 '22 at 15:13

Amjad S.

1,196
1
4
16

Doesn't work, app crashes and visual studio error is basically: "System.InvalidOperationException: 'Loading...' ". Is there any dependency I need to install in order for your code to work? – Igor Lima Jan 27 '22 at 16:31
no just update your vs to latest and add my code to the app.xaml – Amjad S. Jan 27 '22 at 16:38
If I need to put this on App.xaml, how do I call it on my page? – Igor Lima Jan 27 '22 at 16:46
you dont call it. when the application runs it will open as MainPage – Amjad S. Jan 27 '22 at 16:47
Still throws error with: "System.InvalidOperationException: 'ShellContent Content should be of type Page. Title , Route D_FAULT_ShellContent2 '" – Igor Lima Jan 27 '22 at 17:00
@DanteNex , did you changed the ContentTemplate to your pages u create? this means you should change "local:ClassesPage" in the code line to the name of the page u created in your project. – Amjad S. Jan 27 '22 at 19:40
If you want i can answer a detailed answer and you accept it – Amjad S. Jan 27 '22 at 19:42

score 1 · Answer 2 · answered Jan 27 '22 at 19:48

Please copy this to your App.xaml


<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AppColetaLeite"
              x:Class="AppColetaLeite.LinhasColeta"  >
   
    <Application.MainPage>
        <Shell BackgroundColor="LightGray">

            <TabBar x:Name="PhoneTabs">
                <Tab Title="Page1" >
                    <ShellContent ContentTemplate="{DataTemplate local:Page1}"/>
                </Tab>
                <Tab Title="Page2" >
                    <ShellContent ContentTemplate="{DataTemplate local:Page2}"/>
                </Tab>
              
            </TabBar>

        </Shell>
    </Application.MainPage>
</Application>

Then in your AppColetaLeite project Create two Maui content pages name them Page1 and Page2.

This should work 100%

This is an enhancement of your first answer. I would prefer to see this as an EDIT of that answer, instead of creating a second answer. Seems to me you could completely replace the contents of your first answer with this one, then delete this one as redundant. — ToolmakerSteve, Jan 28 '22 at 01:51
OR if you really feel that both version should exist, add this as a second option to your first answer. — ToolmakerSteve, Jan 28 '22 at 02:07

TabbedPage not working on iOS using MAUI, blank page is displayed instead

2 Answers2