DevExpress Tab View for .NET MAUI

• Jul 25, 2024
• 2 minutes to read

The DevExpress Mobile UI for .NET MAUI suite contains the TabView component that organizes content into groups at the same hierarchy level and allows tab navigation between them.

Review our demo app on GitHub to try out the TabView control:

View Example: Get Started with Tab View for .NET MAUI

Add a TabView to a Page

Download and install the DevExpress.Maui.Controls package from the DevExpress NuGet Gallery to obtain the TabView component. See the following help topic for more information: Get Started with DevExpress Mobile UI for .NET MAUI.

The following example adds a TabView instance to a ContentPage:

XAML

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
    <dx:TabView>
        <dx:TabViewItem .../>
        <dx:TabViewItem .../>
    </dx:TabView>
</ContentPage>

MauiProgram.cs

C#

public static class MauiProgram {
   public static MauiApp CreateMauiApp() {
       var builder = MauiApp.CreateBuilder();
       builder
           .UseMauiApp<App>()
           .UseDevExpress()
           .UseDevExpressControls()
           .ConfigureFonts(fonts =>
           {
               fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
           });
       return builder.Build();
   }
}

For step-by-step guides on how to create a .NET MAUI app with the TabView control, refer to the following help topics:

Create Tab Items Manually

Shows how to populate the TabView.Items collection with TabViewItem objects and customize each tab item appearance.

Generate Tab Items from a Data Source

Shows how to generate tab items from a data source assigned to the TabView.ItemsSource property.

Tab View Elements (Anatomy)

The TabView elements include the header panel and items. For more information about Tab View elements, refer to the following help topic: Tab View Visual Elements.