No matter the platform your .NET MAUI app will be viewed on, create a native looking tab view with the Telerik TabView.
Do you encounter difficulties recreating a tab view UI that looks good on every platform? Progress Telerik created TabView for .NET MAUI to handle this need, and this post will review its features.
Telerik TabView is part of Telerik UI for .NET MAUI and it comes with:
Let’s start and add Telerik .NET MAUI TabView to a .NET MAUI application.
First, we need to download and install Telerik UI for .NET MAUI.
Note! Call
UseTelerik();
! Do not forget to call theUseTelerik()
method inside the MauiProgram.cs file of your .NET MAUI project. This is needed for all Telerik UI for .NET MAUI components to register all built-in or additionally created handlers to Telerik components.
Then, we can create the component in C# or in XAML like this:
XAML
C#
To display something in the tab, you can define TabViewItem elements in its Items
collection and set the TabViewItems’ HeaderText
property as shown below:
Every TabView item offers also several boolean properties to manipulate with. We can control whether it IsVisible
, IsSelected
or IsDisabled
.
When loaded for the first time (if we didn’t change it), the first item will be selected and its isSelected
property will return true
, IsVisible
will
be true
, and isDisabled
false. This will display a UI like this:
Now we have the initial setup. But why would we need tabs without content related to them, right? Before continuing with that, let’s play a with the header a bit more to see what its possibilities are.
First, we can change the HeadersPosition
property of Telerik TabView for .NET MAUI to Bottom
, Left
, Right
or leave it at
the default Top
.
TabView control allows you to scroll through the tabs inside the TabView Header. You can control this with the IsHeaderScrollable
(bool) property. The default value is True
.
With IsHeaderOverlaid
(bool), you can control whether the header area is overlaid on top of the content area. When the IsHeaderOverlaid
is set to True
,
the header area is centered and partially overlaps with one of the borders of the content area, based on the value of the HeaderPosition
property. The padding of the content area is adjusted accordingly, to avoid overlapping
with the header area.
When the IsHeaderOverlaid
is set to False
, the header area is placed adjacent to the content area without any overlapping, based on the value of the HeaderPosition
property.
Now, let’s set up the tabs’ content!
Every tab item has a Content
property ready to be populated. You can do it directly in XAML or in C#:
XAML
C#
As you can see from the image, the TabView displays only the content of one item at a time—the one that is selected. The rest can be seen by changing the selection with a simple swipe gesture.
If you want to prevent this feature, you will need to set the IsContentSwipingEnabled
(bool) property to False
. The default value is True
.
You have access to the selected item through two properties—SelectedItem
and SelectedIndex
. Using them, you can change the selection programmatically like this:
Another important API worth mentioning is the SelectionChanged
event that comes in use for more advanced scenarios. The event is raised when the SelectedItem
is changed by the end user
or programmatically:
TabView comes with a set of APIs that you can use to control the whole look and feel by changing the templates of the header, header item or TabView content. You can also keep the default templates but enhance their style. The full list of properties is below:
For example, if you want to replicate a bit of the traditional windows tab view, we can combine Templates and Styles:
HeaderItemTemplate
property to add a button:Note: To preserve the binding of the of the header item properties, use
TemplateBinding
to the properties that you will set from Styles—BorderBackground
,BackgroundColor
, etc.
HeaderStyle
to remove the outside border:HeaderItemStyle
and ContentStyle
to play with the colors. In the code below, we apply different styles with Visual State Manager to have different colors when tabs are selected.The final code and results are shown below:
To quickly get started with Telerik TabView for .NET MAUI, take a look at the online docs and the SDK samples on GitHub. Try it now, and if there is anything you need, do not hesitate to share your feedback or questions with the Progress Telerik team.
Rossitza Fakalieva is a Technical Manager, Microsoft MVP in Developer Technologies and a Director of the Bulgarian chapter of the global Women Who Code organization. She previously worked on the Telerik engineering team and defines herself as .NET enthusiast. She loves to empower others to grow in their career and in the tech field—by teaching, by delivering courses and presentations, and as part of her daily job.