The All-New .NET MAUI Tab View Control Is Here
Tags: dotnet, csharp, maui
Published: 2021-10-14 12:37:44

---
title: The All-New .NET MAUI Tab View Control Is Here
published: true
date: 2021-10-14 11:32:07 UTC
tags: dotnet, csharp, maui
canonical_url: https://www.syncfusion.com/blogs/post/the-all-new-net-maui-tab-view-control-is-here.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/The-All-New-.NET-MAUI-Tab-View-Control-Is-Here-672x372.png
---

The [.NET Multi-platform App UI](https://github.com/dotnet/maui "Link to .NET MAUI demos on GitHub") (MAUI) is an evolution of Xamarin.Forms. It mainly focuses on single project development for different platforms such as [Android](https://en.wikipedia.org/wiki/Android_(operating_system) "Link to Wikipedia page for Android (operating system)"), [iOS](https://en.wikipedia.org/wiki/IOS "Link to Wikipedia page for iOS"), [macOS](https://en.wikipedia.org/wiki/MacOS "Link to Wikipedia page for macOS"), and [Windows](https://en.wikipedia.org/wiki/Microsoft_Windows "Link to Wikipedia page for Microsoft Windows").

Syncfusion has shipped a set of cool [.NET MAUI tools](https://www.syncfusion.com/maui-controls "Link to Syncfusion .NET MAUI Controls") that includes [Charts](https://www.syncfusion.com/maui-controls/maui-charts "Link to .NET MAUI Charts"), [Radial Gauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge "Link to .NET MAUI Radial Gauge"), and [Tab View](https://www.syncfusion.com/maui-controls/maui-tab-view "Link to .NET MAUI Tab View") controls in the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download "Link to download Essential Studio 2021 Volume 3") release. These controls are really fast, feature-rich, and flexible to use in your .NET MAUI applications.

In this blog, we will introduce the .NET MAUI Tab View control along with code examples.

## .NET MAUI Tab View (Preview)

The advanced .NET  MAUI Tab View is a simple and intuitive interface for tab navigation. You can use it in both mobile and desktop applications, wherever you want your users to explore and switch between different tabs.

### Tab View overview

- Optimizes screen space usage when an application requires complex and huge layouts.
- Contains a set of tab items that present different content in the same space.
- Shows only one tab item at a time to be accessed by the user. The user taps another tab to make its content visible on the screen.

## Tab width mode

The .NET MAUI Tab View provides two width options: default and size to content.  These options determine how to calculate the width of the tabs on the tab bar when it is populated.

### Default

In the default option, the width of all the tabs is equally divided based on the width of the tab bar. This enables a fixed tab bar that does not allow tab scrolling regardless of its number of tabs.

```html
<syncfusion:SfTabView TabWidthMode="Default" />
```

![Default Tab Width Mode](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Default-Tab-Width-Mode.png)<figcaption>Default Tab Width Mode</figcaption>

### Size to content

You can use this option when you need to set the width of a tab so that it fits the text or image that it contains. This option enables tab scrolling when the arrangement of the tabs and their width exceeds the tab bar’s width.

```html
<syncfusion:SfTabView TabWidthMode="SizeToContent" />
```

![Size To Content Tab Width Mode](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Size-To-Content-Tab-Width-Mode.png)<figcaption>Size To Content Tab Width Mode</figcaption>

## Tab image position

The .NET MAUI Tab View provides four options that determine how an image in a tab aligns relative to the tab’s text. The available options are top, bottom, left, and right.

### Top

The top option places the image above the text.

```html
<syncfusion:SfTabItem ImagePosition="Top"/>
```

![Placing Tab Image at the Top](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-Tab-Image-at-the-Top.png)<figcaption>Placing the Tab Image at the Top</figcaption>

### Bottom

The bottom option places the image below the text.

```html
<syncfusion:SfTabItem ImagePosition="Bottom"/>
```

![Placing Tab Image at the Bottom](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-Tab-Image-at-the-Bottom.png)<figcaption>Placing the Tab Image at the Bottom</figcaption>

### Left

The left option places the image before the text.

```html
<syncfusion:SfTabItem ImagePosition="Left"/>
```

![Placing Tab Image at the Left](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-Tab-Image-at-the-Left.png)<figcaption>Placing the Tab Image at the Left</figcaption>

### Right

The right option places the image after the text.

```html
<syncfusion:SfTabItem ImagePosition="Right"/>
```

![Placing Tab Image at the Right](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-Tab-Image-at-the-Right.png)<figcaption>Placing the Tab Image at the Right</figcaption>

## Selection indicator placement

The .NET MAUI Tab View provides three options that determine how the selection indicator aligns relative to the tab header item content. The available options are top, bottom, and fill.

### Top

The selection indicator is places at the top of the selected tab.

```html
<syncfusion:SfTabView IndicatorPlacement="Top" />
```

![Placing the Selection Indicator at the Top](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-the-Selection-Indicator-at-the-Top.png)<figcaption>Placing the Selection Indicator at the Top</figcaption>

### Bottom

The selection indicator is placed at the bottom of the selected tab.

```html
<syncfusion:SfTabView IndicatorPlacement="Bottom" />
```

![Placing Selection Indicator at the Bottom](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-Selection-Indicator-at-the-Bottom.png)<figcaption>Placing the Selection Indicator at the Bottom</figcaption>

### Fill

The selection indicator fills the selected tab.

```html
<syncfusion:SfTabView IndicatorPlacement="Fill" />
```

![Fill Selection Indicator on the Selected Tab](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Filling-Selection-Indicator-Over-the-Selected-Tab.png)<figcaption>Fill Selection Indicator on the Selected Tab</figcaption>

## Tab bar placement

The .NET MAUI Tab View provides two options that determine how the tab bar aligns relative to the tab content. The available options are top and bottom.

### Top

The tab bar will be placed above the content region of the Tab View control.

```html
<syncfusion:SfTabView TabBarPlacement="Top" />
```

![Placing the Tab Bar at the Top of the Tab Content](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-Items-at-the-Top-of-the-Tab-Bar.png)<figcaption>Placing the Tab Bar at the Top of the Tab Content</figcaption>

### Bottom

The tab bar will be placed below the content region of the Tab View control.

```html
<syncfusion:SfTabView TabBarPlacement="Bottom" />
```

![Placing the Tab Bar at the Bottom of the Tab Content](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Placing-Items-at-the-Bottom-of-the-Tab-Bar.png)<figcaption>Placing the Tab Bar at the Bottom of the Tab Content</figcaption>

## Nested tabs

This support allows users to have a nested tab view. You can also configure a tab view within another tab view through its Items property.

```html
<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 1">
<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 1 SubItem 1"/>
<syncfusion:SfTabItem Header="Item 1 SubItem 2"/>
</syncfusion:SfTabView>
</syncfusion:SfTabItem>
<syncfusion:SfTabItem Header="Item 2">
<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 2 SubItem 1"/>
<syncfusion:SfTabItem Header="Item 2 SubItem 2"/>
</syncfusion:SfTabView>
</syncfusion:SfTabItem>
</syncfusion:SfTabView>
```

## Ripple animation

The built-in ripple animation matches the Material theme. This animation also provides a better taping experience to the user.

## Color and font customization

You can easily customize all fonts and theirs colors with simple APIs.

![Tab Bar with Customized Font and Colors](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Tab-Bar-with-Customized-Font-and-Colors.png)<figcaption>Tab Bar with Customized Font and Colors</figcaption>

## Visual state manager

Use the visual state manager to make changes to the .NET MAUI Tab View item properties based on the visual states set in the code. The applicable visual states are selected, normal, enable and disable.

```html
<Style TargetType="TabView:SfTabItem">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Selected" >
<VisualState.Setters>
<Setter Property="TextColor" Value="Red" />
<Setter Property="ImagePosition" Value="Top" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontAttributes" Value="Bold" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="Black" />
<Setter Property="ImagePosition" Value="Left" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontAttributes" Value="Italic" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
```

![Designing Tab Items with Visual State Manager](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Designing-Tab-Items-with-Visual-State-Manager.png)<figcaption>Designing Tab Items with Visual State Manager</figcaption>

## Conclusion

Thanks for reading! In this blog post, we have gone through the features of [.NET MAUI Tab View](https://www.syncfusion.com/maui-controls/maui-tab-view "Link to .NET MAUI Tab View") control rolled out in the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download "Link to download Essential Studio 2021 Volume 3") release. Also, we are planning to provide several more features like an action button, overflow button, swipe navigation, and more. You can download the assemblies from [NuGet](https://www.nuget.org/packages?q=syncfusion+maui+tabview "Link to Syncfusion WinUI packages on NuGet Gallery") to evaluate this new control. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v19.3.0.43 "Link to Syncfusion release notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Link to Syncfusion What's New") pages for more details.

We are also planning to deliver more .NET MAUI controls to replace our existing Syncfusion [Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls "Link to Xamarin.Forms UI controls") controls. You can expect them in our upcoming releases!

Do you need any other features from this .NET MAUI Tab View? Please comment below or mention them in our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Reuse Xamarin.Forms Custom Renderers in .NET MAUI](https://dev.to/karthickramasamy08/how-to-reuse-xamarin-forms-custom-renderers-in-net-maui-18c8-temp-slug-8337623 "Link to How to Reuse Xamarin.Forms Custom Renderers in .NET MAUI blog")
- [Create Custom Renderers for a Control in 5 Advantages of .NET MAUI Over XamarinXamarin.Forms](https://dev.to/kartik110895/how-to-create-custom-renderers-for-a-control-in-xamarin-forms-5e23-temp-slug-8469071 "Link to How to Create Custom Renderers for a Control in Xamarin.Forms blog")
- [5 Advantages of .NET MAUI Over Xamarin](https://dev.to/syncfusion/5-advantages-of-net-maui-over-xamarin-3ca2 "Link to 5 Advantages of .NET MAUI Over Xamarin blog")
- [Goodbye Xamarin.Forms, Hello MAUI!](https://dev.to/syncfusion/goodbye-xamarin-forms-hello-maui-g85 "Link to Goodbye Xamarin.Forms, Hello MAUI! blog")