Can't disable swipe on Shell Top Tabs

[BillyMartin1964]

The top tabs swipe on shell can't be disabled, so if I try to swipe on a page that is in a tops tab, it changes tabs instead of letting me swipe.

Also, the Top tabs are very tall and there is no way to set the height.

Workaround

https://github.com/dotnet/maui/issues/10182#issuecomment-1879833309

[ghost]

Hi @BillyMartin1964. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[BillyMartin1964]

What minimal code could you possible need? You have no way to disable swipe on your top tabs. Please add a way to disable swipe on top tabs. I try to elaborate when I can, but this is a no brainer. Sheesh.

[jfversluis]

Hi @BillyMartin1964 as you can find here: https://github.com/dotnet/maui/blob/main/.github/repro.md this is what we mean by a repro and why we want it.

Additionally, I see in two separate issues now that you are ignoring the bug report template. Please use that for future issues as it provides us with much needed information to properly diagnose any issues you might be seeing.

Thanks!

[ghost]

Hi @BillyMartin1964. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[BillyMartin1964]

I’ve tried several times to use that template (It makes me use the beta template). I get everything filled out, but the Submit button does nothing (Seems Disabled). There is no feedback what I have done wrong or what is missing, so I had to quit using it.

[PureWeen]

@BillyMartin1964 can you include

• Sample so we now what tabs you're referring to?
• Platform you are referring to?

[ghost]

Hi @BillyMartin1964. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[BillyMartin1964]

IsSwipeable = “False”

[BillyMartin1964]

Hi. Any Maui app that uses shell. There is no way to disable swipe on the tabs… especially the top tabs. When I try to move on the map with a swiping gesture, it changes tabs.

IsSwipeable = “False”

I’m not trying to be rude, but I can’t believe you don’t know what I’m talking about. If there is a Boolean that stops swipe and makes you tap the tab that you want, it would be a lot better.

[simontribus]

I'm having the same Issue! In my case i have a Shell with a Tabbar, within one Tap there are two ShellContents and in both of them a Scrollable BlazorWebView. The problem is, on mobile, when i want to swipe to scroll, in 60% of the time, it is registered as swipe to change Tab. Here's the code:

<Shell
    x:Class="SAEpp.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Test"
    xmlns:pages="clr-namespace:Test.Pages"
    BackgroundColor="{DynamicResource PageBackgroundColor}"
    NavBarIsVisible="False">
    <TabBar>
        <Tab Title="Home" Icon="home.png">
            <ShellContent>
                <ShellContent.ContentTemplate>
                    <DataTemplate>
                        <ContentPage>
                            <BlazorWebView x:Name="blazorWebView1" HostPage="wwwroot/index.html">
                                <BlazorWebView.RootComponents>
                                    <RootComponent ComponentType="{x:Type pages:Index}" Selector="#app" />
                                </BlazorWebView.RootComponents>
                            </BlazorWebView>
                        </ContentPage>
                    </DataTemplate>
                </ShellContent.ContentTemplate>
            </ShellContent>
        </Tab>
        <Tab Title="Wetter" Icon="weather_partly_cloudy.png">
            <!-- HERE IS THE PROBLEM -->
            <ShellContent Title="Bezirk">
                <ContentPage>
                    <BlazorWebView x:Name="blazorWebView21" HostPage="wwwroot/index.html">
                        <BlazorWebView.RootComponents>
                            <RootComponent ComponentType="{x:Type pages:WeatherDistrict}" Selector="#app" />
                        </BlazorWebView.RootComponents>
                    </BlazorWebView>
                </ContentPage>
            </ShellContent>
            <ShellContent Title="Radar">
                <ContentPage>
                    <BlazorWebView x:Name="blazorWebView22" HostPage="wwwroot/index.html">
                        <BlazorWebView.RootComponents>
                            <RootComponent ComponentType="{x:Type pages:WeatherRadarMap}" Selector="#app" />
                        </BlazorWebView.RootComponents>
                    </BlazorWebView>
                </ContentPage>
            </ShellContent>
        </Tab>
    </TabBar>

</Shell>

I too would prefer a way to disable the "Swipe to change Tab" behavior.

[PureWeen]

Related https://github.com/dotnet/maui/issues/6487

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[Rizkyuk]

Hi, any solution to this issue yet? i have the same problem. I have a SwipeView on one of my shell tab pages so sometimes its swipes the collection item and other times it swipes the tab pages..

[BillyMartin1964]

No. I don't think they're taking it seriously. On the social platforms they ask what we need, but then they ignore what we say.

[Naryoril]

I also have problems with this. I have a CarouselView within a tab, and if you swipe quickly, instead of switching to the next item in the CarouselView it switches the top tab. This behaviour makes CarouselView completely unusable inside a tab.

[LeoKhariton]

it is possible to disable swiping in TabbedPage, but I am interested in how to do it in Shell. maybe someone knows some workarounds?

[michaelonz]

I have this issue also - maps basically unusable inside a TOP tab in maui on android.

Below is a link to stackoverflow issue that explains the same scenario for replication.

https://stackoverflow.com/questions/75860817/how-do-i-disable-tab-swiping-on-map-element-android

[gbarkerz]

Hi, anyone know of a workaround for this yet? I've spent the last five months porting a native Android app to MAUI, and one of my <TabBar><Tab ...><ShellContent ...> pages has a GraphicsView which reacts to a PanGestureRecognizer PanUpdated gesture. With the tabs at the top of the page where I need to put them, when I try to pan the GraphicsView content, the next tab page gets dragged across.

The pan works fine with the tabs at the bottom of the page, so I considered leaving the tabs at the bottom of the page, but I need the tab text to have larger-than-default font size. There doesn't seem a simple way of increasing the font size, so I implemented the CustomTypefaceSpan solution at https://stackoverflow.com/questions/74248348/how-to-change-tab-title-font-for-tabbar-in-net-maui, but the tab text gets clipped then, so that's not an option for me.

So I really need the tabs to be at the top of the page, and to disable the tab page drag behavior when the gesture is performed at my pannable GraphicsView. The gesture anywhere else on the page, or on the tabs themselves, would be fine to drag the next page into view.

[BillyMartin1964]

Sorry, I don't think they really care what we want or need.

Maybe you could try Syncfusion. They seem to care a lot more. If that doesn't work, maybe you could use buttons for now, and show the correct ContentView for the button/tab clicked.

[PureWeen]

Workaround

using Android.OS;
using Android.Views;
using Microsoft.Extensions.Logging;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;

namespace DisableTopTabSwipe
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                })
                .ConfigureMauiHandlers
                (
                    handlers =>
                    {
#if ANDROID
                        handlers.AddHandler(typeof(Shell), typeof(CustomShellRenderer));
#endif
                    }
                );

#if DEBUG
    		builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }

#if ANDROID
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            return new CustomShellSectionRenderer(this);
        }
    }

    public class CustomShellSectionRenderer : ShellSectionRenderer
    {
        public CustomShellSectionRenderer(IShellContext shellContext) : base(shellContext)
        {
        }

        public override Android.Views.View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var result =  base.OnCreateView(inflater, container, savedInstanceState);
            SetViewPager2UserInputEnabled(false);
            return result;
        }
        protected override void SetViewPager2UserInputEnabled(bool value)
        {
            base.SetViewPager2UserInputEnabled(false);
        }
    }
#endif
}

[LeoKhariton]

@PureWeen, wow, thanks! It helped me.

[gbarkerz]

@PureWeen This workaround suits my needs very well indeed, thanks for your help! I can now use touch to pan the contents of my GraphicsView control, and very importantly, when I've increased the Android font size such that my full set of tabs no longer fits on the screen, I can swipe left and right on the tabs to bring any tab into view. I can also swipe to navigate the TalkBack screen reader through the set of tabs, and if TalkBack moves to a tab that's out of view, it brings it into view. All in all, this will work great for me!