Skip to content

Commit 695991f

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #1 from SyncfusionExamples/Sample
Added the sample TabViewHeaderItemTemplate.
2 parents e4c8dd9 + 8bc3325 commit 695991f

38 files changed

+1275
-2
lines changed

‎README.md

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,81 @@
1-
# How-to-Create-Equal-Width-Tab-Items-with-Horizontal-Scrolling-in-.NET-MAUI-TabView
2-
This repository contains a sample explaining how to create equal-width tab items and enable horizontal scrolling in the .NET MAUI TabView.
1+
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.
2+
3+
To create a TabView with equal width for all tab items and enable horizontal scrolling, follow these steps:
4+
5+
1. **Define the TabView**: Start by defining the `TabView` in your XAML.
6+
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.
7+
8+
Here is an example of how to implement this:
9+
10+
**Model**
11+
12+
```
13+
public class Model
14+
{
15+
public string? Name { get; set; }
16+
}
17+
```
18+
19+
**ViewModel**
20+
21+
```
22+
public class ViewModel : INotifyPropertyChanged
23+
{
24+
private ObservableCollection<Model>? tabHeaderCollection;
25+
public ObservableCollection<Model>? TabHeaderCollection
26+
{
27+
get { return tabHeaderCollection; }
28+
set { tabHeaderCollection = value;
29+
OnPropertyChanged(nameof(TabHeaderCollection)); }
30+
31+
}
32+
...
33+
public ViewModel()
34+
{
35+
TabHeaderCollection = new ObservableCollection<Model>()
36+
{
37+
new Model(){Name = "Call"},
38+
new Model(){Name = "Favourite"},
39+
new Model(){Name = "Contacts"},
40+
new Model(){Name = "More"},
41+
new Model(){Name = "Help"},
42+
new Model(){Name = "Info" },
43+
new Model(){Name = "About"},
44+
new Model(){Name = "Settings"},
45+
};
46+
}
47+
}
48+
```
49+
50+
**XAML**
51+
52+
```xml
53+
<tabView:SfTabView x:Name="tabView"
54+
ItemsSource="{Binding TabHeaderCollection}">
55+
<tabView:SfTabView.HeaderItemTemplate>
56+
<DataTemplate>
57+
<HorizontalStackLayout Spacing="2">
58+
<Label FontAttributes="Bold"
59+
WidthRequest="70"
60+
HorizontalTextAlignment="Center"
61+
VerticalTextAlignment="Center"
62+
Text="{Binding Name}"/>
63+
</HorizontalStackLayout>
64+
</DataTemplate>
65+
</tabView:SfTabView.HeaderItemTemplate>
66+
<tabView:SfTabView.Items>
67+
<tabView:SfTabItem>
68+
<tabView:SfTabItem.Content>
69+
<!-- Content for the first tab -->
70+
</tabView:SfTabItem.Content>
71+
</tabView:SfTabItem>
72+
<!-- Additional tab items can be added here -->
73+
</tabView:SfTabView.Items>
74+
</tabView:SfTabView>
75+
```
76+
77+
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.
78+
79+
**Output**
80+
81+
![TabViewHeaderItemTemplate.gif](https://support.syncfusion.com/kb/agent/attachment/article/17124/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI4MjY4Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.osrFaKzEaaChH3dYfxtcZyunnvgsSC7WxCEiUr64wCk)

‎TabViewHeaderItemTemplate/App.xaml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TabViewHeaderItemTemplate"
5+
x:Class="TabViewHeaderItemTemplate.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎TabViewHeaderItemTemplate/App.xaml.cs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace TabViewHeaderItemTemplate
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎TabViewHeaderItemTemplate/AppShell.xaml

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="TabViewHeaderItemTemplate.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:TabViewHeaderItemTemplate"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="TabViewHeaderItemTemplate">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TabViewHeaderItemTemplate/AppShell.xaml.cs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TabViewHeaderItemTemplate
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎TabViewHeaderItemTemplate/MainPage.xaml

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Class="TabViewHeaderItemTemplate.MainPage"
5+
xmlns:local="clr-namespace:TabViewHeaderItemTemplate"
6+
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
7+
WidthRequest="{OnPlatform WinUI='300'}">
8+
<ContentPage.BindingContext>
9+
<local:ViewModel/>
10+
</ContentPage.BindingContext>
11+
12+
<ContentPage.Content>
13+
<tabView:SfTabView x:Name="tabView" ItemsSource="{Binding TabHeaderCollection}"
14+
TabBarBackground="HotPink" >
15+
<tabView:SfTabView.HeaderItemTemplate>
16+
<DataTemplate>
17+
<HorizontalStackLayout Spacing="2">
18+
<Label FontAttributes="Bold"
19+
WidthRequest="70"
20+
HorizontalTextAlignment="Center"
21+
VerticalTextAlignment="Center"
22+
Text="{Binding Name}"/>
23+
</HorizontalStackLayout>
24+
</DataTemplate>
25+
</tabView:SfTabView.HeaderItemTemplate>
26+
27+
<tabView:SfTabView.Items>
28+
<tabView:SfTabItem >
29+
<tabView:SfTabItem.Content>
30+
<ListView RowHeight="50">
31+
<ListView.ItemsSource>
32+
<x:Array Type="{x:Type x:String}">
33+
<x:String>James</x:String>
34+
<x:String>Richard</x:String>
35+
<x:String>Michael</x:String>
36+
<x:String>Alex</x:String>
37+
<x:String>Clara</x:String>
38+
</x:Array>
39+
</ListView.ItemsSource>
40+
<ListView.ItemTemplate>
41+
<DataTemplate>
42+
<ViewCell>
43+
<Grid Margin="10,5">
44+
<Label VerticalOptions="Start"
45+
HorizontalOptions="Start"
46+
TextColor="#666666"
47+
FontSize="16"
48+
Text="{Binding}" />
49+
</Grid>
50+
</ViewCell>
51+
</DataTemplate>
52+
</ListView.ItemTemplate>
53+
</ListView>
54+
</tabView:SfTabItem.Content>
55+
</tabView:SfTabItem>
56+
57+
<tabView:SfTabItem >
58+
<tabView:SfTabItem.Content>
59+
<ScrollView >
60+
<StackLayout Spacing="20" >
61+
<ListView RowHeight="50">
62+
<ListView.ItemsSource>
63+
<x:Array Type="{x:Type x:String}">
64+
<x:String>Steve</x:String>
65+
<x:String>Mark</x:String>
66+
<x:String>Alan</x:String>
67+
<x:String>Sandra</x:String>
68+
<x:String>Ryan</x:String>
69+
</x:Array>
70+
</ListView.ItemsSource>
71+
<ListView.ItemTemplate>
72+
<DataTemplate>
73+
<ViewCell>
74+
<Grid Margin="10,5">
75+
<Label VerticalOptions="Start"
76+
HorizontalOptions="Start"
77+
TextColor="#666666"
78+
FontSize="16"
79+
Text="{Binding}" />
80+
</Grid>
81+
</ViewCell>
82+
</DataTemplate>
83+
</ListView.ItemTemplate>
84+
</ListView>
85+
86+
</StackLayout>
87+
</ScrollView>
88+
</tabView:SfTabItem.Content>
89+
</tabView:SfTabItem>
90+
91+
<tabView:SfTabItem >
92+
<tabView:SfTabItem.Content>
93+
<ListView RowHeight="50">
94+
<ListView.ItemsSource>
95+
<x:Array Type="{x:Type x:String}">
96+
<x:String>Sandra</x:String>
97+
<x:String>Ryan</x:String>
98+
<x:String>Michael</x:String>
99+
<x:String>Mark</x:String>
100+
<x:String>Clara</x:String>
101+
</x:Array>
102+
</ListView.ItemsSource>
103+
<ListView.ItemTemplate>
104+
<DataTemplate>
105+
<ViewCell>
106+
<Grid Margin="10,5">
107+
<Label VerticalOptions="Start"
108+
HorizontalOptions="Start"
109+
TextColor="#666666"
110+
FontSize="16"
111+
Text="{Binding}" />
112+
</Grid>
113+
</ViewCell>
114+
</DataTemplate>
115+
</ListView.ItemTemplate>
116+
</ListView>
117+
</tabView:SfTabItem.Content>
118+
</tabView:SfTabItem>
119+
<tabView:SfTabItem x:Name="more">
120+
<tabView:SfTabItem.Content>
121+
<Grid BackgroundColor="Red"/>
122+
</tabView:SfTabItem.Content>
123+
</tabView:SfTabItem>
124+
<tabView:SfTabItem x:Name="help">
125+
<tabView:SfTabItem.Content>
126+
<Grid BackgroundColor="Green"/>
127+
</tabView:SfTabItem.Content>
128+
</tabView:SfTabItem>
129+
<tabView:SfTabItem x:Name="info">
130+
<tabView:SfTabItem.Content>
131+
<Grid BackgroundColor="LightBlue"/>
132+
</tabView:SfTabItem.Content>
133+
</tabView:SfTabItem>
134+
<tabView:SfTabItem x:Name="about">
135+
<tabView:SfTabItem.Content>
136+
<Grid BackgroundColor="Beige"/>
137+
</tabView:SfTabItem.Content>
138+
</tabView:SfTabItem>
139+
<tabView:SfTabItem x:Name="settings">
140+
<tabView:SfTabItem.Content>
141+
<Grid BackgroundColor="MistyRose"/>
142+
</tabView:SfTabItem.Content>
143+
</tabView:SfTabItem>
144+
</tabView:SfTabView.Items>
145+
</tabView:SfTabView>
146+
</ContentPage.Content>
147+
148+
</ContentPage>

‎TabViewHeaderItemTemplate/MainPage.xaml.cs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
namespace TabViewHeaderItemTemplate
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
11+
}

‎TabViewHeaderItemTemplate/MauiProgram.cs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
4+
namespace TabViewHeaderItemTemplate
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎TabViewHeaderItemTemplate/Platforms/Android/AndroidManifest.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

‎TabViewHeaderItemTemplate/Platforms/Android/MainActivity.cs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Android.App;
2+
using Android.Content.PM;
3+
using Android.OS;
4+
5+
namespace TabViewHeaderItemTemplate
6+
{
7+
[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
8+
public class MainActivity : MauiAppCompatActivity
9+
{
10+
}
11+
}

0 commit comments

Comments
 (0)