Swiping in .NET MAUI Tab View (SfTabView)

22 Jul 20265 minutes to read

Prerequisites

Before using the SfTabView, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.TabView

For step-by-step setup, refer to the Getting Started documentation.

Enable swiping

Set the EnableSwiping property of SfTabView to allow users to switch between tab contents by swiping horizontally. The property is of type bool and defaults to false. When enabled, swiping left or right on the tab content moves to the adjacent tab; tapping a tab header or programmatically setting SelectedIndex also continues to work.

<tabView:SfTabView EnableSwiping="true">
    <tabView:SfTabItem Header="ITEM 1">
        <tabView:SfTabItem.Content>
            <Label Text="Tab item content"
                   HorizontalOptions="Center"
                   VerticalOptions="Center" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
    <tabView:SfTabItem Header="ITEM 2">
        <tabView:SfTabItem.Content>
            <Label Text="Tab item content"
                   HorizontalOptions="Center"
                   VerticalOptions="Center" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
    <tabView:SfTabItem Header="ITEM 3">
        <tabView:SfTabItem.Content>
            <Label Text="Tab item content"
                   HorizontalOptions="Center"
                   VerticalOptions="Center" />
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    EnableSwiping = true,
    Items = new TabItemCollection
    {
        new SfTabItem()
        {
            Header = "ITEM 1",
            Content = new Label
            {
                Text = "Tab item content",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            }
        },
        new SfTabItem()
        {
            Header = "ITEM 2",
            Content = new Label
            {
                Text = "Tab item content",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            }
        },
        new SfTabItem()
        {
            Header = "ITEM 3",
            Content = new Label
            {
                Text = "Tab item content",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            }
        }
    }
};

Swiping between tabs in the .NET MAUI Tab View

Limitations

  • Interference between child controls and Tab View swiping: When a child control within a Tab View supports horizontal swiping or interaction (e.g., a horizontal ScrollView, a custom swipe-enabled control, or a carousel), it can interfere with the Tab View’s touch gesture. This may result in unintended behavior, such as the Tab View swiping when the child control is meant to handle the gesture, or vice versa. The overlapping gestures can cause confusion and disrupt the expected user experience, leading to a less intuitive interface.

See also