Xamarin Forms Disable swipe between pages in TabbedPage

Xamarin Forms Disable Swipe Between Pages in TabbedPage

Xamarin Forms’ TabbedPage provides a user-friendly way to navigate between different sections of an application. However, the default behavior allows users to swipe horizontally between tabs, which can be undesirable in certain scenarios. This article demonstrates how to disable swipe navigation between pages within a TabbedPage.

Understanding the Issue

The default TabbedPage behavior enables swiping left and right to switch between tabs. While this can be intuitive for navigation, it might not be suitable for situations where:

• You want to enforce a specific navigation flow.
• You’re dealing with sensitive data and want to prevent accidental page changes.
• You’re using a custom animation for tab transitions and swiping disrupts the flow.

Solution: Overriding the TabbedPage Behavior

Using the `OnCurrentPageChanged` Event

One approach is to override the `OnCurrentPageChanged` event within your TabbedPage and reset the scroll position of the TabbedPage’s underlying ScrollView to prevent scrolling when the page changes.

using Xamarin.Forms;

public class MyTabbedPage : TabbedPage
{
    protected override void OnCurrentPageChanged()
    {
        base.OnCurrentPageChanged();

        // Access the ScrollView and reset its horizontal scroll position
        var scrollView = this.Children.FirstOrDefault() as ScrollView;
        if (scrollView != null)
        {
            scrollView.ScrollToAsync(0, 0, false);
        }
    }
}

Using the `DisableSwipe` Behavior

Alternatively, you can create a custom behavior to disable swipe gestures on your TabbedPage.

using Xamarin.Forms;

public class DisableSwipeBehavior : Behavior
{
    protected override void OnAttachedTo(TabbedPage bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.CurrentPageChanged += OnCurrentPageChanged;
    }

    protected override void OnDetachingFrom(TabbedPage bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.CurrentPageChanged -= OnCurrentPageChanged;
    }

    private void OnCurrentPageChanged(object sender, EventArgs e)
    {
        // Prevent scrolling on the TabbedPage's ScrollView
        var scrollView = (sender as TabbedPage).Children.FirstOrDefault() as ScrollView;
        if (scrollView != null)
        {
            scrollView.ScrollToAsync(0, 0, false);
        }
    }
}

Then apply this behavior to your TabbedPage.

    
        
    
    ...

Comparison

Conclusion

By overriding the `OnCurrentPageChanged` event or using the `DisableSwipeBehavior`, you can effectively disable the swipe navigation behavior on your Xamarin Forms TabbedPage, providing you with greater control over user interaction and navigation flow.