Get Started with DevExpress Tabs for .NET MAUI: How to Specify Tabs in Markup

• Jul 25, 2024
• 3 minutes to read

This lesson explains how to use the TabView component with manually created tab items to implement bottom tab navigation in a .NET MAUI application:

View Example

Create a New .NET MAUI Application and Add a Tab View

Create a new .NET MAUI solution.
Refer to Microsoft .NET Multi-platform App UI documentation for more information on how to get started with .NET MAUI.

Remove default content from the main page (MainPage.xaml) and event handlers from the code-behind file (MainPage.xaml.cs). Clear also the application’s resource dictionary (App.xaml).

Install the DevExpress.Maui.Controls package from your DevExpress NuGet feed.

In the MauiProgram.cs file, call UseDevExpress and UseDevExpressControls methods to register handlers for the TabView class:

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Hosting;
using DevExpress.Maui.Controls;

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

In the MainPage.xaml file, use the dx prefix to declare the DevExpress.Maui namespace and add a TabView object to the main page:

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dx="http://schemas.devexpress.com/maui"
             x:Class="TabView_CreateItems.MainPage">
     <dx:TabView/>
</ContentPage>

Note

DevExpress Navigation Controls for .NET MAUI support iOS and Android. The project should contain only these platforms.

Create Tab Items

Add tab icons (.svg files) to the project and set their Build Action property to MauiImage. You can download images from Google Fonts or from the DevExpress Tab View for .NET MAUI example (see the following folder: ../CS/CreateTabItemsManually/TabView_CreateItems/Resources/Images/).

Add a new TabViewItem instance to the TabView.Items collection:

XAML

<dx:TabView>
    <dx:TabViewItem HeaderText="Mail"
                     HeaderIcon="mail.svg">
         <dx:TabViewItem.Content>
            <Grid>
                <Label Text="Mail List Here" 
                       HorizontalOptions="Center" 
                       VerticalOptions="CenterAndExpand"/>
            </Grid>
         </dx:TabViewItem.Content>
     </dx:TabViewItem>
</dx:TabView>

Note

You can skip the Items property tags in the XAML markup as this property has a ContentProperty attribute.

A tab item consists of the following elements:

• Header - a tab displayed in the header panel. A header can display an icon and/or text to identify item content.
• Content - a view assigned to TabViewItem.Content and displayed in the main area (in this example, a Grid with a Label).

Add two more tab items:

XAML

<dx:TabView>
    <dx:TabViewItem HeaderText="Mail"
                     HeaderIcon="email.svg">
        <dx:TabViewItem.Content>
            <Grid>
                <Label Text="Mail List Here" 
                       HorizontalOptions="Center" 
                       VerticalOptions="CenterAndExpand"/>
            </Grid>
        </dx:TabViewItem.Content>
    </dx:TabViewItem>

    <dx:TabViewItem HeaderText="Calendar"
                     HeaderIcon="calendar.svg">
        <dx:TabViewItem.Content>
            <Grid>
                <Label Text="Calendar Here" 
                       HorizontalOptions="Center" 
                       VerticalOptions="CenterAndExpand"/>
            </Grid>
        </dx:TabViewItem.Content>
    </dx:TabViewItem>

    <dx:TabViewItem HeaderText="People"
                     HeaderIcon="people.svg">
        <dx:TabViewItem.Content>
            <Grid>
                <Label Text="People Here"
                       HorizontalOptions="Center" 
                       VerticalOptions="CenterAndExpand"/>
            </Grid>
        </dx:TabViewItem.Content>
    </dx:TabViewItem>
</dx:TabView>

Customize the Tab View Appearance

Move the header panel with tabs to the bottom of the page, set up tabs to fill all the available space in the header panel, and hide the selected item indicator:

XAML

<dx:TabView HeaderPanelPosition="Bottom"
            ItemHeaderWidth="*"
            IsSelectedItemIndicatorVisible="False">
    <!-- Tab items here. -->
</dx:TabView>

Specify icon and text colors for tabs in the header panel. Use properties of the TabView object to specify the same colors for all tab items when they are not selected, and properties of TabViewItem objects to set icon and text colors for individual tabs in the selected state:

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabView_CreateItems.MainPage"
             xmlns:dx="http://schemas.devexpress.com/maui">
    <ContentPage.Resources>
        <Color x:Key="unselected_grey">#757575</Color>
        <Color x:Key="mail_blue">#1e88e5</Color>
        <Color x:Key="calendar_green">#43a047</Color>
        <Color x:Key="people_red">#e53935</Color>
    </ContentPage.Resources>
    <dx:TabView HeaderPanelPosition="Bottom"
                 IsSelectedItemIndicatorVisible="False"
                 ItemHeaderWidth="*"
                 ItemHeaderIconColor="{StaticResource unselected_grey}"
                 ItemHeaderTextColor="{StaticResource unselected_grey}">
        <dx:TabViewItem HeaderText="Mail"
                        HeaderIcon="email.svg"
                        SelectedHeaderIconColor="{StaticResource mail_blue}"
                        SelectedHeaderTextColor="{StaticResource mail_blue}">
            <dx:TabViewItem.Content>
                <Grid>
                    <Label Text="Mail List Here" 
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </Grid>
            </dx:TabViewItem.Content>
        </dx:TabViewItem>

        <dx:TabViewItem HeaderText="Calendar"
                        HeaderIcon="calendar.svg"
                        SelectedHeaderIconColor="{StaticResource calendar_green}"
                        SelectedHeaderTextColor="{StaticResource calendar_green}">
            <dx:TabViewItem.Content>
                <Grid>
                    <Label Text="Calendar Here" 
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </Grid>
            </dx:TabViewItem.Content>
        </dx:TabViewItem>

        <dx:TabViewItem HeaderText="People"
                         HeaderIcon="people.svg"
                         SelectedHeaderIconColor="{StaticResource people_red}"
                         SelectedHeaderTextColor="{StaticResource people_red}">
            <dx:TabViewItem.Content>
                <Grid>
                    <Label Text="People Here"
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </Grid>
            </dx:TabViewItem.Content>
        </dx:TabViewItem>
    </dx:TabView>
</ContentPage>