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

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 TabView. This can be achieved by customizing the HeaderItemTemplate in the TabView.

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

1. Define the TabView: Start by defining the TabView 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 TabView 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 on GitHub

Conclusion

Hope you enjoyed learning about how to create equal-width tab items and enable horizontal scrolling in the .NET MAUI TabView.

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

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

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!