Skip to content

Commit df13c81

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #1 from SyncfusionExamples/Sample
Added the sample for Tab View KB.
2 parents 84539be + bab81af commit df13c81

37 files changed

+1233
-2
lines changed

‎README.md

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,83 @@
1-
# How-to-Center-Align-Tabs-in-.NET-MAUI-TabView-for-Windows-and-Mac-platforms
2-
This repository contains a sample explaining how to center align tabs in .NET MAUI TabView for Windows and Mac platforms. Tokens: maui, maui-tab-view, tab-view, tab-alignment
1+
This article guides you on how to center align tabs in [.NET MAUI TabView](https://www.syncfusion.com/maui-controls/maui-tab-view) for Windows and Mac platforms.
2+
3+
To customize the placement of tabs to the center of the Windows and Mac screens, set [TabWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabWidthMode) to [SizeToContent](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html#Syncfusion_Maui_TabView_TabWidthMode_SizeToContent) and adjust [TabHeaderPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabHeaderPadding) dynamically based on the screen's width. Below is a code snippet demonstrating this approach.
4+
5+
**XAML Code**
6+
7+
```xaml
8+
<tabView:SfTabView TabWidthMode="SizeToContent">
9+
…
10+
<\tabView:SfTabView>
11+
```
12+
13+
**C#**
14+
15+
```csharp
16+
public partial class MainPage : ContentPage
17+
{
18+
public MainPage()
19+
{
20+
InitializeComponent();
21+
}
22+
23+
protected override void OnAppearing()
24+
{
25+
base.OnAppearing();
26+
27+
#if WINDOWS
28+
var window = GetParentWindow().Handler.PlatformView as MauiWinUIWindow;
29+
if (window != null)
30+
{
31+
UpdateTabHeaderPadding(window.Bounds.Width);
32+
}
33+
#elif MACCATALYST
34+
var macWindow = GetParentWindow().Handler.PlatformView as UIWindow;
35+
if (macWindow != null)
36+
{
37+
UpdateTabHeaderPadding(macWindow.Bounds.Width);
38+
}
39+
#endif
40+
}
41+
42+
#if WINDOWS || MACCATALYST
43+
protected override void OnSizeAllocated(double width, double height)
44+
{
45+
base.OnSizeAllocated(width, height);
46+
UpdateTabHeaderPadding(width);
47+
}
48+
private void UpdateTabHeaderPadding(double width)
49+
{
50+
double totalTabWidth = 0;
51+
foreach (var tabItem in tabView.Items)
52+
{
53+
if (tabItem is Syncfusion.Maui.TabView.SfTabItem tabItemView)
54+
{
55+
totalTabWidth += tabItemView.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width;
56+
}
57+
}
58+
double remainingSpace = ((width - totalTabWidth));
59+
60+
double padding = (remainingSpace / 2) ;
61+
62+
tabView.TabHeaderPadding = new Thickness(padding, 0, 0, 0);
63+
}
64+
#endif
65+
}
66+
```
67+
68+
- The TabWidthMode is set to SizeToContent so that each tab's width is adjusted based on its content.
69+
- The method `UpdateTabHeaderPadding` calculates the total width of all the tab items and dynamically adjusts the left padding of the tab headers to center them based on the screen width.
70+
71+
**Output**
72+
73+
![TabView_TabAlignment.gif](https://support.syncfusion.com/kb/agent/attachment/article/17398/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI5MzYwIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.99mAjs80Wwjabr15ABNoC5JX8l7RrCo36DsNBR5P4is)
74+
75+
**Requirements to run the demo**
76+
77+
To run the demo, refer to [System Requirements for .NET MAUI](https://help.syncfusion.com/maui/system-requirements)
78+
79+
**Troubleshooting:**
80+
81+
**Path too long exception**
82+
83+
If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

‎TabViewSample/TabViewSample.sln

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.8.34309.116
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TabViewSample", "TabViewSample\TabViewSample.csproj", "{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
Release-Xml|Any CPU = Release-Xml|Any CPU
13+
EndGlobalSection
14+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
15+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
16+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Debug|Any CPU.Build.0 = Debug|Any CPU
17+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
18+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release|Any CPU.ActiveCfg = Release|Any CPU
19+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release|Any CPU.Build.0 = Release|Any CPU
20+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release|Any CPU.Deploy.0 = Release|Any CPU
21+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release-Xml|Any CPU.ActiveCfg = Release|Any CPU
22+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release-Xml|Any CPU.Build.0 = Release|Any CPU
23+
{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release-Xml|Any CPU.Deploy.0 = Release|Any CPU
24+
EndGlobalSection
25+
GlobalSection(SolutionProperties) = preSolution
26+
HideSolutionNode = FALSE
27+
EndGlobalSection
28+
GlobalSection(ExtensibilityGlobals) = postSolution
29+
SolutionGuid = {B69CA809-EB64-4829-B9A8-BA7F393E582F}
30+
EndGlobalSection
31+
EndGlobal

‎TabViewSample/TabViewSample/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:TabViewSample"
5+
x:Class="TabViewSample.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>

‎TabViewSample/TabViewSample/App.xaml.cs

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

‎TabViewSample/TabViewSample/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="TabViewSample.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:TabViewSample"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="TabViewSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TabViewSample/TabViewSample/AppShell.xaml.cs

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

‎TabViewSample/TabViewSample/MainPage.xaml

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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="TabViewSample.MainPage"
5+
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView">
6+
<StackLayout > <tabView:SfTabView x:Name="tabView" TabBarBackground="HotPink" TabWidthMode="SizeToContent" >
7+
<tabView:SfTabView.Items >
8+
<tabView:SfTabItem Header="Call" FontSize="18">
9+
<tabView:SfTabItem.Content>
10+
<ListView RowHeight="50">
11+
<ListView.ItemsSource>
12+
<x:Array Type="{x:Type x:String}">
13+
<x:String>James</x:String>
14+
<x:String>Richard</x:String>
15+
<x:String>Michael</x:String>
16+
<x:String>Alex</x:String>
17+
<x:String>Clara</x:String>
18+
</x:Array>
19+
</ListView.ItemsSource>
20+
<ListView.ItemTemplate>
21+
<DataTemplate>
22+
<ViewCell>
23+
<Grid Margin="10,5">
24+
<Label VerticalOptions="Start"
25+
HorizontalOptions="Start"
26+
TextColor="#666666"
27+
FontSize="16"
28+
Text="{Binding}" />
29+
</Grid>
30+
</ViewCell>
31+
</DataTemplate>
32+
</ListView.ItemTemplate>
33+
</ListView>
34+
</tabView:SfTabItem.Content>
35+
</tabView:SfTabItem>
36+
<tabView:SfTabItem Header="Favorite" FontSize="18" >
37+
<tabView:SfTabItem.Content>
38+
<ScrollView >
39+
<StackLayout Spacing="20" >
40+
<ListView RowHeight="50">
41+
<ListView.ItemsSource>
42+
<x:Array Type="{x:Type x:String}">
43+
<x:String>Steve</x:String>
44+
<x:String>Mark</x:String>
45+
<x:String>Alan</x:String>
46+
<x:String>Sandra</x:String>
47+
<x:String>Ryan</x:String>
48+
</x:Array>
49+
</ListView.ItemsSource>
50+
<ListView.ItemTemplate>
51+
<DataTemplate>
52+
<ViewCell>
53+
<Grid Margin="10,5">
54+
<Label VerticalOptions="Start"
55+
HorizontalOptions="Start"
56+
TextColor="#666666"
57+
FontSize="16"
58+
Text="{Binding}" />
59+
</Grid>
60+
</ViewCell>
61+
</DataTemplate>
62+
</ListView.ItemTemplate>
63+
</ListView>
64+
65+
</StackLayout>
66+
</ScrollView>
67+
</tabView:SfTabItem.Content>
68+
</tabView:SfTabItem>
69+
<tabView:SfTabItem Header="Contacts" FontSize="18" >
70+
<tabView:SfTabItem.Content>
71+
<ListView RowHeight="50">
72+
<ListView.ItemsSource>
73+
<x:Array Type="{x:Type x:String}">
74+
<x:String>Sandra</x:String>
75+
<x:String>Ryan</x:String>
76+
<x:String>Michael</x:String>
77+
<x:String>Mark</x:String>
78+
<x:String>Clara</x:String>
79+
</x:Array>
80+
</ListView.ItemsSource>
81+
<ListView.ItemTemplate>
82+
<DataTemplate>
83+
<ViewCell>
84+
<Grid Margin="10,5">
85+
<Label VerticalOptions="Start"
86+
HorizontalOptions="Start"
87+
TextColor="#666666"
88+
FontSize="16"
89+
Text="{Binding}" />
90+
</Grid>
91+
</ViewCell>
92+
</DataTemplate>
93+
</ListView.ItemTemplate>
94+
</ListView>
95+
</tabView:SfTabItem.Content>
96+
</tabView:SfTabItem>
97+
</tabView:SfTabView.Items>
98+
</tabView:SfTabView> </StackLayout>
99+
</ContentPage>

‎TabViewSample/TabViewSample/MainPage.xaml.cs

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
#if WINDOWS
2+
using Microsoft.UI.Windowing;
3+
#elif MACCATALYST
4+
using UIKit;
5+
#endif
6+
7+
namespace TabViewSample
8+
{
9+
public partial class MainPage : ContentPage
10+
{
11+
public MainPage()
12+
{
13+
InitializeComponent();
14+
}
15+
16+
protected override void OnAppearing()
17+
{
18+
base.OnAppearing();
19+
20+
#if WINDOWS
21+
var window = GetParentWindow().Handler.PlatformView as MauiWinUIWindow;
22+
if (window != null)
23+
{
24+
UpdateTabHeaderPadding(window.Bounds.Width);
25+
}
26+
#elif MACCATALYST
27+
var macWindow = GetParentWindow().Handler.PlatformView as UIWindow;
28+
if (macWindow != null)
29+
{
30+
UpdateTabHeaderPadding(macWindow.Bounds.Width);
31+
}
32+
#endif
33+
}
34+
35+
#if WINDOWS || MACCATALYST
36+
protected override void OnSizeAllocated(double width, double height)
37+
{
38+
base.OnSizeAllocated(width, height);
39+
UpdateTabHeaderPadding(width);
40+
}
41+
private void UpdateTabHeaderPadding(double width)
42+
{
43+
double totalTabWidth = 0;
44+
foreach (var tabItem in tabView.Items)
45+
{
46+
if (tabItem is Syncfusion.Maui.TabView.SfTabItem tabItemView)
47+
{
48+
totalTabWidth += tabItemView.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width;
49+
}
50+
}
51+
double remainingSpace = ((width - totalTabWidth));
52+
53+
double padding = (remainingSpace / 2) ;
54+
55+
tabView.TabHeaderPadding = new Thickness(padding, 0, 0, 0);
56+
}
57+
#endif
58+
}
59+
60+
}
61+

‎TabViewSample/TabViewSample/MauiProgram.cs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Syncfusion.Maui.Core.Hosting;
2+
using Microsoft.Extensions.Logging;
3+
4+
namespace TabViewSample
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+
}

‎TabViewSample/TabViewSample/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>

0 commit comments

Comments
 (0)