https://github.com/syncfusionexamples/how-to-create-equal-width-tab-items-with-horizontal-scrolling-in-.net-maui-tabview
This repository contains a sample explaining how to create equal-width tab items and enable horizontal scrolling in the .NET MAUI TabView.
https://github.com/syncfusionexamples/how-to-create-equal-width-tab-items-with-horizontal-scrolling-in-.net-maui-tabview
customization header-item-template maui maui--tab-view scroll-view tab-view
Last synced: 2 months ago
JSON representation
This repository contains a sample explaining how to create equal-width tab items and enable horizontal scrolling in the .NET MAUI TabView.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/how-to-create-equal-width-tab-items-with-horizontal-scrolling-in-.net-maui-tabview
- Owner: SyncfusionExamples
- Created: 2024-08-13T12:48:00.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-08-14T10:33:40.000Z (10 months ago)
- Last Synced: 2025-02-08T20:47:51.905Z (4 months ago)
- Topics: customization, header-item-template, maui, maui--tab-view, scroll-view, tab-view
- Language: C#
- Homepage:
- Size: 219 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://www.syncfusion.com/maui-controls/maui-tab-view). This can be achieved by customizing the [HeaderItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_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? tabHeaderCollection;
public ObservableCollection? TabHeaderCollection
{
get { return tabHeaderCollection; }
set { tabHeaderCollection = value;
OnPropertyChanged(nameof(TabHeaderCollection)); }
}
...
public ViewModel()
{
TabHeaderCollection = new ObservableCollection()
{
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**
```xml
```
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**
