How do I use TabbedPage to scroll tabs?

Question

I have a question about MAUI. I want to ask you. Thank you. This is my rendering. This is the effect on the Android simulator enter image description here

<?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="MauiBlazorDemoApp.Views.MenuDetailPage"
             xmlns:model="clr-namespace:MauiBlazorDemoApp.Models"
             ItemsSource="{x:Static model:MenuClass.MenuClasses}"
             xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
             android:TabbedPage.OffscreenPageLimit="2"
             android:TabbedPage.IsSmoothScrollEnabled="True"
             android:TabbedPage.IsSwipePagingEnabled="true"
             android:TabbedPage.ToolbarPlacement="Top"
             FlowDirection="LeftToRight"
             Title="MenuDetailPage">
    
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Name}" WidthRequest="1300"
                       >
                <StackLayout Padding="5, 25">
                    <Label Text="{Binding Name}"
                           FontAttributes="Bold"
                           FontSize="18"
                           HorizontalOptions="Center" />
                   
                    <StackLayout Padding="50, 10">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Family: "
                                   FontAttributes="Bold" />
                            <Label Text="{Binding Sort}" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

I want to know two things:

How to make it scroll
However, the title of each item can adapt to the width.

How can I make it scroll?

You can try to use [Handler of MAUI](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize?view=net-maui-7.0) to modify the width of Bar. — Jianwei Sun - MSFT, Feb 27 '23 at 08:55

score 0 · Answer 1 · answered Feb 27 '23 at 09:05

0

If you don't find answer for .NET Maui search for Xamarin, since .NET Maui is an evolution of Xamarin.

You have this answer that is pretty similar, and in .NET Maui you can also use Shell tabs which show a "more tabs" button then there is more than 5 tabs.

The XamarinCommunityToolkit sample linked in the Xamarin answer doesn't have an equivalent in the current .Net Maui Community toolkit though.

answered Feb 27 '23 at 09:05

Poulpynator

716
5
13

1

thank you reply,I think Shell tab has some limitations. – Peter Zhang Mar 01 '23 at 00:18

score 0 · Answer 2 · answered Aug 23 '23 at 21:05

I've submitted a pull request to fix this issue here.

Until then, here's a really hacky workaround:


// In your MauiProgram.cs:

            }).ConfigureMauiHandlers(handlers => {
#if ANDROID
                // Add a handler
                handlers.AddHandler(typeof(TabbedPage), typeof(Platforms.Android.ScrollableTabbedViewHandler ));
#endif
            });

In Platforms/Android/CustomRenderers.cs add:

public class ScrollableTabbedViewHandler : TabbedViewHandler {
    public override void UpdateValue(string property) {
        base.UpdateValue(property);

        var tabs = Platform.CurrentActivity?.FindViewById<FragmentContainerView>(Microsoft.Maui.Resource.Id
            .navigationlayout_toptabs);

        var tabLayout = tabs?.GetChildAt(0);

        if(tabLayout is TabLayout layout) {
            layout.TabMode = TabLayout.ModeScrollable;
            layout.SetSelectedTabIndicatorColor(Colors.White.ToAndroid());
        }
    }
}

How do I use TabbedPage to scroll tabs?

2 Answers2