https://github.com/syncfusionexamples/how-to-customize-.net-maui-tabview-header-with-navigation-arrows
This repository contains a sample explaining how to customize .NET MAUI TabView header with navigation arrows.
https://github.com/syncfusionexamples/how-to-customize-.net-maui-tabview-header-with-navigation-arrows
arrow-navigation customization header left-right maui maui-tab-view navigation next-previous tab-view
Last synced: 2 months ago
JSON representation
This repository contains a sample explaining how to customize .NET MAUI TabView header with navigation arrows.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/how-to-customize-.net-maui-tabview-header-with-navigation-arrows
- Owner: SyncfusionExamples
- Created: 2024-08-16T04:17:56.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-08-23T09:44:59.000Z (9 months ago)
- Last Synced: 2025-02-08T20:47:49.501Z (4 months ago)
- Topics: arrow-navigation, customization, header, left-right, maui, maui-tab-view, navigation, next-previous, tab-view
- Language: C#
- Homepage:
- Size: 222 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This article guides how to customize the [.NET MAUI Tab View](https://www.syncfusion.com/maui-controls/maui-tab-view) header by adding navigation arrows for the next and previous tabs.
**XAML Code**
The following XAML code snippet demonstrates how to set up the layout using a Grid control, which includes navigation arrows and the .NET MAUI Tab View.
```xml
```
**C#**
The following C# code handles the logic for updating the content based on the selected tab and managing the navigation between tabs.
```csharp
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
if(tabView != null && call != null)
{
contentView.Content = new Call();
}
}
private void OnSelectionChanged(object sender, TabSelectionChangedEventArgs e)
{
contentView.Content = null;
// Assign content based on the new index
switch (e.NewIndex)
{
case 0:
contentView.Content ??= new Call();
break;
case 1:
contentView.Content ??= new Favorite();
break;
case 2:
contentView.Content ??= new Contacts();
break;
case 3:
contentView.Content ??= new More();
break;
}
}
private void OnLeftArrowClicked(object sender, TappedEventArgs e)
{
if(tabView != null && tabView.SelectedIndex > 0)
{
tabView.SelectedIndex -= 1;
}
}
private void OnRightArrowClicked(object sender, TappedEventArgs e)
{
if(tabView != null && tabView.SelectedIndex < tabView.Items.Count - 1)
{
tabView.SelectedIndex += 1;
}
}
}
```
- **Grid Layout**: The layout is structured using a Grid with three columns. The first and third columns contain the navigation arrows, while the middle column holds the .NET MAUI Tab View.
- **Navigation Arrows**: Two Label controls represent the left and right arrows. They utilize `TapGestureRecognizer` to handle click events for navigating between tabs.
- **TabView Control**: The .NET MAUI Tab View is positioned in the center column of the grid. It contains multiple tab items, and the [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectionChanged) event is used to update the content displayed in the ContentView based on the selected tab.
- **ContentView**: A ContentView is placed below the Tab View to show the content corresponding to the selected tab.
- **Code-Behind Logic**: The constructor initializes the content of the first tab. The `OnSelectionChanged` event updates the ContentView based on the selected tab index, while the `OnLeftArrowClicked` and `OnRightArrowClicked` events adjust the `SelectedIndex` of the Tab View to navigate through the tabs.
**Output**
