How to Create Equal Width Tab Items with Horizontal Scrolling in .NET MAUI Tab View?

In this article, you can learn about how to create equal-width tab items and enable horizontal scrolling to access items that exceed the visible area in the .NET MAUI Tab View. This can be achieved by customizing the HeaderItemTemplate in the Tab View.

To create a Tab View with equal width for all tab items and enable horizontal scrolling, follow these steps:

1. Define the Tab View: Start by defining the Tab View in your XAML.
2. Set the HeaderItemTemplate: Use the HeaderItemTemplate to specify how each tab item should be displayed. This template will allow you to set a common width for all tab items and enable horizontal scrolling when the number of items exceeds the visible area.

Here is an example of how to implement this:

Model

public class Model
{
    public string? Name { get; set; }
}

ViewModel

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Model>? tabHeaderCollection;
    public ObservableCollection<Model>? TabHeaderCollection
    {
        get { return tabHeaderCollection; }
        set { tabHeaderCollection = value; 
        OnPropertyChanged(nameof(TabHeaderCollection)); }

    }
    ...
    public ViewModel()
    {
        TabHeaderCollection = new ObservableCollection<Model>()
        {
            new Model(){Name = "Call"},
            new Model(){Name = "Favourite"},
            new Model(){Name = "Contacts"},
            new Model(){Name = "More"},
            new Model(){Name = "Help"},
            new Model(){Name = "Info" },
            new Model(){Name = "About"},
            new Model(){Name = "Settings"},
        };
    }
}

XAML

<tabView:SfTabView x:Name="tabView"
                   ItemsSource="{Binding TabHeaderCollection}">
    <tabView:SfTabView.HeaderItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout Spacing="2">
                <Label FontAttributes="Bold" 
                       WidthRequest="70"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"
                       Text="{Binding Name}"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </tabView:SfTabView.HeaderItemTemplate>
    <tabView:SfTabView.Items>
        <tabView:SfTabItem>
            <tabView:SfTabItem.Content>
                <!-- Content for the first tab -->
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <!-- Additional tab items can be added here -->
    </tabView:SfTabView.Items>
</tabView:SfTabView>

By following the above steps, you can create a Syncfusion® Tab View with equal-width tab items and horizontal scrolling functionality. This enhances the user experience by allowing easy navigation through multiple tabs.

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to create equal-width tab items and enable horizontal scrolling in .NET MAUI Tab View.

You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!