[Bug] [MauiCompat] TabView component is not working

[PierreFeytout]

Description

Hello,

I tryed to use the TabView components in a Maui project
, using MauiCompat, but i was unable to make it works.

I created a basic project from a basic Maui project with the nugget Xamarin.CommunityToolkit.MauiCompat added and the MainPage xaml code has been repalced with the TabView sample code, so there is no complexity it's just a basic project.

Here is the error i obtained

_Microsoft.Maui.Platform.ToPlatformException: 'Microsoft.Maui.Controls.Compatibility.RendererToHandlerShim found for Microsoft.Maui.Controls.Compatibility.Grid is incompatible'

Stack Trace

Link to Reproduction Sample

A zip file is attached with the project
MauiTest.zip

Expected Behavior

The main page should display and the TabView should appear.

Actual Behavior

A black screen is displayed and an exception occure.

Basic Information

• Version with issue: 2.0.2-preview1013
• Last known good version:
• IDE: Visual Studio 2022 preview
• Platform Target Frameworks:
  • Android: 10.0 and 11.0
• Android Support Library Version:
• Nuget Packages:
  • Microsoft.Maui.Dependencies 6.0.312
  • Microsoft.Maui.Extensions 6.0.312
• Affected Devices: Android11 emulator and android 10 smartphone
• MAUI Version:6.0.312

[VladislavAntonyuk]

it may start work with .NET MAUI 6.0.400

[georgeemr]

it may start work with .NET MAUI 6.0.400

Can anyone confirm if TabView already works with this version?

[Dreamescaper]

I was able to make it work at least somehow by adding the following code:

        builder
            .UseMauiCompatibility()
            .ConfigureEffects(x => x.AddCompatibilityEffects(typeof(VisualFeedbackEffect).Assembly))
            .ConfigureMauiHandlers(handlers =>
            {
                // Register ALL handlers in the Xamarin Community Toolkit assembly
                handlers.AddCompatibilityRenderers(typeof(Xamarin.CommunityToolkit.UI.Views.MediaElementRenderer).Assembly);
            });

But the tab strip is buggy, it shows the first element only for me.
XAML:

    <xct:TabView BackgroundColor="White" TabStripBackgroundColor="LightGray">
        <xct:TabViewItem Text="First">
            <Label Text="Doesn't work."/>
        </xct:TabViewItem>

        <xct:TabViewItem Text="Second">
            <Label Text="Does it?"/>
        </xct:TabViewItem>

        <xct:TabViewItem Text="Third">
            <Label Text="Nope"/>
        </xct:TabViewItem>
    </xct:TabView>

Recording:

[sattasundar]

I have tried and getting below error;

Microsoft.Maui.Controls.Xaml.XamlParseException: 'Position 15:14. Type xct:TabViewItem not found in xmlns http://xamarin.com/schemas/2020/toolkit'

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MauiXCT.MainPage">

    <Grid>
        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripBackgroundColor="Blue"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow">

            <xct:TabViewItem
                    Text="Tab 1"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid 
                        BackgroundColor="Gray">
                    <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                </Grid>
            </xct:TabViewItem>

            <xct:TabViewItem
                    Text="Tab 2"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid>
                    <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                </Grid>
            </xct:TabViewItem>
        </xct:TabView>
    </Grid>

</ContentPage>

how to solve this error?

[AdamDiament]

Any update on this? ++

[Kapusch]

I have seen TabView was not yet implemented in the .NET MAUI Community Toolkit, so I was hoping it would work using the MauiCompat version of the Xamarin Community Toolkit, but with 2.0.2-preview1013 I have the same error as mentioned above:

04-29 12:47:38.796 14114 14114 E AndroidRuntime: FATAL EXCEPTION: main
04-29 12:47:38.796 14114 14114 E AndroidRuntime: Process: xxx.xxxxx.xxxx, PID: 14114
04-29 12:47:38.796 14114 14114 E AndroidRuntime: android.runtime.JavaProxyThrowable: Microsoft.Maui.Controls.Xaml.XamlParseException: Position 184:14. Type TabViewItem not found in xmlns http://xamarin.com/schemas/2020/toolkit

[erar2]

Any update on this?

[georgeemr]

Any update?

[VladislavAntonyuk]

We do not have plans to migrate TabView. You can use this alternatives: https://vladislavantonyuk.github.io/articles/Mastering-Composite-Controls-in-.NET-MAUI%3A-Building-a-TabView-from-Scratch