How to create a tabbed page in .Net Maui?

Question

I have a tabbed page in .Net Maui as follows :

<?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="MyApp.Pages.SomeClass"
    xmlns:Controls="clr-namespace:MyApp.Resources.Controls"
    xmlns:local="clr-namespace:MyApp.Pages"
                     Title="Some title">
    <local:Page1 />
    <local:Page2 />
    <local:Page3 />
</TabbedPage>

The pages are more or less the same :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="MyApp.Pages.Page1"
    xmlns:Controls="clr-namespace:MyApp.Resources.Controls"
    xmlns:VerticalStackLayout="clr-namespace:MyApp.Resources.Controls"      
                     Title="Vente">
    <VerticalStackLayout>
        <Label Text="Page 1"/>
    </VerticalStackLayout>
</ContentPage>

C# code :

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

The tabbed page works properly on Windows :

However on physical android device, I'm getting the following exception when opening my tabbed page. None of these pages have a C# stuff. They are 100% empty.

0xFFFFFFFFFFFFFFFF in Android.Runtime.JNIEnv.monodroid_debugger_unhandled_exception C#
0x1A in Android.Runtime.JNINativeWrapper._unhandled_exception at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:12,5 C#
0x23 in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PPLLL_L at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:353,26    C#
0xEE in Microsoft.Maui.Controls.Handlers.TabbedPageManager.SetTabLayout at D:\a\_work\1\s\src\Controls\src\Core\Platform\Android\TabbedPageManager.cs:240,5 C#
0x1BD in Microsoft.Maui.Controls.Handlers.TabbedPageManager.SetElement at D:\a\_work\1\s\src\Controls\src\Core\Platform\Android\TabbedPageManager.cs:162,5  C#
0x20 in Microsoft.Maui.Controls.TabbedPage.CreatePlatformView at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\TabbedPage\TabbedPage.Android.cs:23,4 C#
0x10 in Microsoft.Maui.Controls.TabbedPage.OnCreatePlatformView at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\TabbedPage\TabbedPage.Android.cs:30,5   C#
0x15 in Microsoft.Maui.Handlers.ViewHandler<Microsoft.Maui.ITabbedView,Android.Views.View>.OnCreatePlatformView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:72,4 C#
0x1 in Microsoft.Maui.Handlers.ViewHandler.OnCreatePlatformElement at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandler.cs:119,4    C#
0x1 in Microsoft.Maui.Handlers.ElementHandler.CreatePlatformElement at D:\a\_work\1\s\src\Core\src\Handlers\Element\ElementHandler.cs:96,4  C#
0x49 in Microsoft.Maui.Handlers.ElementHandler.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\Element\ElementHandler.cs:52,4    C#
0x2 in Microsoft.Maui.Handlers.ViewHandler.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandler.cs:125,4 C#
0x2 in Microsoft.Maui.Handlers.ViewHandler<Microsoft.Maui.ITabbedView,Android.Views.View>.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:53,4    C#
0x7 in Microsoft.Maui.Handlers.ViewHandler<Microsoft.Maui.ITabbedView,Android.Views.View>.SetVirtualView at D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:56,4    C#
0x65 in Microsoft.Maui.Controls.Element.SetHandler at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\Element\Element.Impl.cs:64,6 C#
0x2 in Microsoft.Maui.Controls.Element.set_Handler at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\Element\Element.Impl.cs:20,11    C#
0x18 in Microsoft.Maui.Controls.VisualElement.Microsoft.Maui.IElement.set_Handler at D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\VisualElement\VisualElement.Impl.cs:301,5 C#
0xB0 in Microsoft.Maui.Platform.ElementExtensions.ToHandler at D:\a\_work\1\s\src\Core\src\Platform\ElementExtensions.cs:96,4   C#
0x2 in Microsoft.Maui.Platform.ViewExtensions.ToHandler at D:\a\_work\1\s\src\Core\src\Platform\ViewExtensions.cs:44,4  C#
0xAA in Microsoft.Maui.Controls.Platform.Compatibility.ShellContentFragment.OnCreateView at D:\a\_work\1\s\src\Controls\src\Core\Compatibility\Handlers\Shell\Android\ShellContentFragment.cs:145,4 C#
0x24 in AndroidX.Fragment.App.Fragment.n_OnCreateView_Landroid_view_LayoutInflater_Landroid_view_ViewGroup_Landroid_os_Bundle_ at C:\a\_work\3\s\generated\androidx.fragment.fragment\obj\Release\net6.0-android\generated\src\AndroidX.Fragment.App.Fragment.cs:1999,4 C#
0xD in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PPLLL_L at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:352,5  C#

Do .Net Maui tabbed pages work on Android?

You're not doing anything wrong. That should work on Android too. I'd look at the bug list for issues with TabbedPage. Or possibly try deploying to a different device/emulator — Jason, Oct 05 '22 at 13:33

score 3 · Answer 1 · edited Jun 14 '23 at 05:25

3

If you are interested to use a TabbedPage to navigate through a collection of pages see the maui sample here: TabbedPage

It works on my Android physical device.

Another option is to use a shell tab bar like in this one sample: ShellTabBar

edited Jun 14 '23 at 05:25

Rafael

1,281
2
10
35

answered Oct 07 '22 at 08:52

AndreaGobs

338
2
18

score 2 · Answer 2 · edited Jun 13 '23 at 10:01

I have tested it and if I use TabbedPage, I will have similar errors on the Android simulator. So you may need to use ShellTabBar as much as possible, just like this:

<?xml version="1.0" encoding="utf-8" ?>
<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Pages.SomeClass"
    xmlns:Controls="clr-namespace:MyApp.Resources.Controls"
    xmlns:local="clr-namespace:MyApp.Pages"
             Title="Some title">
    <TabBar>
        <ShellContent Title="Cats"                    
                 ContentTemplate="{DataTemplate local:Page1}" />
        <ShellContent Title="Dogs"                    
                 ContentTemplate="{DataTemplate local:Page2}" />
        <ShellContent Title="Monkeys"                    
                 ContentTemplate="{DataTemplate local:Page3}" />
    </TabBar>
</Shell>

How to create a tabbed page in .Net Maui?

2 Answers2

Linked