Skip to main content
BuyLog In
Mobile UI Controls
Search in…
Docs > Free Xamarin.Forms UI Controls > Navigation > Tab View > Getting Started > Lesson 1: Create Tab Items Manually
All docs
V22.1
Free Xamarin.Forms UI Controls
Get Started
Charts
Data Grid
Scheduler
Data Editors
Popup
CollectionView
Data Form
Navigation
Drawer Page
Tab Page
Drawer View
Tab View
Getting Started
Lesson 1: Create Tab Items Manually
Lesson 2: Populate Tab Items from a Data Source
Visual Elements
AndroidX Migration
Migration to .NET MAUI
API Reference
Download CHM

Lesson 1: Create Tab Items Manually

  • 6 minutes to read

This lesson explains how to create a bottom tab navigation bar with the TabView view:

The lesson result

The control displays manually added items in this lesson. Refer to the Lesson 2 guide to learn how to populate the tab view from an item source.

Add a Tab View to Your Application

Note

This lesson requires an empty Xamarin.Forms solution.
DevExpress Navigation components are available for iOS and Android, and can be used in Xamarin.Forms solutions that use the .NET Standard code sharing strategy.

  1. Add DevExpress Navigation components to your solution in one of the following ways:

    • Install the NuGet package

      Visual Studio
      1. Obtain your NuGet feed URL

      2. Register the DevExpress NuGet feed as a package source.
        Navigate to Tools | Options | NuGet Package Manager | Package Source and add the DevExpress feed to the list of package sources.

        Register NuGet Feed - Visual Studio

      3. Install the DevExpress.XamarinForms.Navigation package from the DevExpress NuGet feed.

        1. Select Tools | NuGet Package Manager | Manage NuGet Packages for Solution… in Visual Studio’s main menu, or right-click the solution in Solution Explorer and select Manage NuGet Packages for Solution….

        2. Search for DevExpress.XamarinForms.Navigation in the DevExpress package source, select all the solution’s projects and click Install.

          Install NuGet Package - Visual Studio

      Visual Studio for Mac
      1. Obtain your NuGet feed URL

      2. Register the DevExpress NuGet feed as a package source.
        Navigate to Visual Studio | Preferences | NuGet | Sources and add the DevExpress feed to the list of sources.

        Register NuGet Feed - Visual Studio for Mac

      3. Install the DevExpress.XamarinForms.Navigation package from the DevExpress NuGet feed.

        1. Select Project | Manage NuGet Packages… in the main menu, or right-click the solution in Solution Pad and select Manage NuGet Packages…

        2. In the invoked Manage NuGet Packages dialog, select DevExpress from the Source drop-down list in the top left corner, search for DevExpress.XamarinForms.Navigation and click Add Package.
          Select all the solution’s projects in the invoked Select Projects dialog and click Ok.

          Install NuGet Package - Visual Studio for Mac

      – or –

    • Add libraries from the downloaded bundle

      1. Download the Mobile UI Controls for Xamarin.Forms bundle from the Client Center.

      2. Add the following assembly references to your Xamarin.Forms solution’s projects:

        Project

        Assembly

        <YourAppName>

        (A .NET Standard project that contains the shared code)

        DevExpress.XamarinForms.Core.dll

        DevExpress.XamarinForms.Navigation.dll

        <YourAppName>.Android

        (A project that contains Android-specific code)

        DevExpress.XamarinForms.Navigation.Android.dll

        DevExpress.Xamarin.Android.Navigation.dll

        <YourAppName>.iOS

        (A project that contains iOS-specific code)

        DevExpress.XamarinForms.Navigation.iOS.dll

        DevExpress.Xamarin.iOS.Navigation.dll

        Note

        These files are in the <DevExpress.Xamarin bundle>/Binaries directory. Ensure the downloaded <DevExpress.Xamarin> bundle was unzipped.

  2. Add the initialization code to your projects.

    • In the AppDelegate.cs file of the iOS project, before the LoadApplication method call:

      DevExpress.XamarinForms.Navigation.iOS.Initializer.Init();

    • In the App.xaml.cs file of the project with the shared code, before the InitializeComponent method call:

      DevExpress.XamarinForms.Navigation.Initializer.Init();

  1. Assign a TabView instance to the MainPage’s Content property:

    <!-- The page declares the dxn namespace that contains the TabView class. -->
<ContentPage 
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:dxn="http://schemas.devexpress.com/xamarin/2014/forms/navigation"
     xmlns:local="clr-namespace:GettingStarted1"
     x:Class="GettingStarted1.MainPage">
    <dxn:TabView>
    </dxn:TabView>
</ContentPage>

Populate the Tab View with Items

  1. Download icons for tabs from a Git repository and add them to your solution:

    • Copy all drawable directories from Resources to your Android project’s Resources directory.
    • Copy the Assets.xcassets directory to your iOS project.

  2. Add a new TabViewItem instance to the view’s Items property:

    <dxn:TabView>
    <dxn:TabViewItem HeaderText="Mail"
                     HeaderIcon="ic_mail.png">
         <dxn:TabViewItem.Content>
             <StackLayout>
                 <Label Text="Mail List Here" 
                        HorizontalOptions="Center" 
                        VerticalOptions="CenterAndExpand"/>
             </StackLayout>
         </dxn:TabViewItem.Content>
     </dxn:TabViewItem>
</dxn:TabView>

    An item consists of a Header in the Header Panel and content that the view displays in the main area. The Header can display an icon and/or text that identifies the item’s content:

    Step 3.1 Result

    The following properties configure a TabViewItem:

    Property

    Description

    HeaderIcon

    Gets or sets an icon the item header displays.

    HeaderText

    Gets or sets the text of the item header title.

    Content

    Gets or sets a view that the TabView displays in the content area when the item is selected.

  3. Add two more TabViewItem objects:

     <dxn:TabViewItem HeaderText="Calendar"
                  HeaderIcon="ic_calendar.png">
     <dxn:TabViewItem.Content>
         <StackLayout>
             <Label Text="Calendar Here" 
                    HorizontalOptions="Center" 
                    VerticalOptions="CenterAndExpand"/>
         </StackLayout>
     </dxn:TabViewItem.Content>
 </dxn:TabViewItem>
 <dxn:TabViewItem HeaderText="People"
                  HeaderIcon="ic_people.png">
     <dxn:TabViewItem.Content>
         <StackLayout>
             <Label Text="People Here"
                    HorizontalOptions="Center" 
                    VerticalOptions="CenterAndExpand"/>
         </StackLayout>
     </dxn:TabViewItem.Content>
 </dxn:TabViewItem>

The following image shows the step result:

Step 3 result

Customize the Tab View Appearance

  1. Move the Header Panel to the view’s bottom edge, hide the Selected Item Indicator, and make items fill all available space:

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

    The code above uses the properties below:

    Property

    Description

    HeaderPanelPosition

    Gets or sets the header panel’s position within the view.

    IsSelectedItemIndicatorVisible

    Gets or sets whether the Selected Item Indicator is visible.

    ItemHeaderWidth

    Gets or sets the width of header items when HeaderPanelPosition is set to Top or Bottom.

    Now the app looks as follows:

    Stretched tabs

  2. Specify icon / text colors:

    <ContentPage.Resources>
    <Color x:Key="lightText">#99191919</Color>
    <Color x:Key="red600">#e53935</Color>
    <Color x:Key="green600">#43a047</Color>
    <Color x:Key="blue600">#1e88e5</Color>
</ContentPage.Resources>
<dxn:TabView ItemHeaderTextColor="{StaticResource lightText}"
             ItemHeaderIconColor="{StaticResource lightText}"
             ItemHeaderFontSize="12">
    <!-- Other view settings. -->
    <dxn:TabViewItem HeaderText="Mail"
                     HeaderIcon="ic_mail.png"
                     SelectedHeaderTextColor="{StaticResource blue600}"
                     SelectedHeaderIconColor="{StaticResource blue600}">
        <!-- Other item settings. -->
    </dxn:TabViewItem>
    <dxn:TabViewItem HeaderText="Calendar"
                     HeaderIcon="ic_calendar.png"
                     SelectedHeaderTextColor="{StaticResource green600}"
                     SelectedHeaderIconColor="{StaticResource green600}">
        <!-- Other item settings. -->
    </dxn:TabViewItem>
    <dxn:TabViewItem HeaderText="People"
                     HeaderIcon="ic_people.png"
                     SelectedHeaderTextColor="{StaticResource red600}"
                     SelectedHeaderIconColor="{StaticResource red600}">
        <!-- Other item settings. -->
    </dxn:TabViewItem>
</dxn:TabView>

    Note that you can customize colors for an item in default and selected states. The TabView specifies these colors for all items simultaneously and a tab item can override these colors individually:

    Lesson Result

    The following properties configure the TabViewItem appearance:

    Property

    Description

    TabView.ItemHeaderTextColor

    Gets or sets the color tab items use to paint their texts when items are in the default state.

    TabView.ItemHeaderIconColor

    Gets or sets the color all tab items use to paint its header icons.

    TabView.ItemHeaderFontSize

    Gets or sets the size of the font for item headers’ text.

    TabItem.SelectedHeaderTextColor

    Gets or sets the color the tab item uses in the selected state to paint its header text.

    TabItem.SelectedHeaderIconColor

    Gets or sets the color the tab item uses in the selected state to paint its header icon.

Complete Markup

The complete application markup, written in this lesson, is available below. Note that this example is available on GitHub.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:GettingStarted1"
    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
    xmlns:dxn="http://schemas.devexpress.com/xamarin/2014/forms/navigation"
    x:Class="GettingStarted1.MainPage"
    ios:Page.UseSafeArea="true">
    <ContentPage.Resources>
        <Color x:Key="red600">#e53935</Color>
        <Color x:Key="green600">#43a047</Color>
        <Color x:Key="blue600">#1e88e5</Color>
        <Color x:Key="lightText">#99191919</Color>
    </ContentPage.Resources>
    <dxn:TabView ItemHeaderWidth="*"
                 HeaderPanelPosition="Bottom"
                 ItemHeaderTextColor="{StaticResource lightText}"
                 ItemHeaderIconColor="{StaticResource lightText}"
                 ItemHeaderFontSize="12"
                 IsSelectedItemIndicatorVisible="False">
        <dxn:TabViewItem HeaderText="Mail"
                         HeaderIcon="ic_mail.png"
                         SelectedHeaderTextColor="{StaticResource blue600}"
                         SelectedHeaderIconColor="{StaticResource blue600}">
            <dxn:TabViewItem.Content>
                <StackLayout>
                    <Label Text="Mail List Here" 
                       HorizontalOptions="Center" 
                       VerticalOptions="CenterAndExpand"/>
                </StackLayout>
            </dxn:TabViewItem.Content>
        </dxn:TabViewItem>
        <dxn:TabViewItem HeaderText="Calendar"
                         HeaderIcon="ic_calendar.png"
                         SelectedHeaderTextColor="{StaticResource green600}"
                         SelectedHeaderIconColor="{StaticResource green600}">
            <dxn:TabViewItem.Content>
                <StackLayout>
                    <Label Text="Calendar Here" 
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </StackLayout>
            </dxn:TabViewItem.Content>
        </dxn:TabViewItem>
        <dxn:TabViewItem HeaderText="People"
                         HeaderIcon="ic_people.png"
                         SelectedHeaderTextColor="{StaticResource red600}"
                         SelectedHeaderIconColor="{StaticResource red600}">
            <dxn:TabViewItem.Content>
                <StackLayout>
                    <Label Text="People Here"
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </StackLayout>
            </dxn:TabViewItem.Content>
        </dxn:TabViewItem>
    </dxn:TabView>
</ContentPage>