Lesson 1: Create Tab Items Manually

• Jan 28, 2022
• 6 minutes to read

This topic explains how to create a bottom tab navigation bar with a TabPage:

Watch Video: Get Started with Tab Page

Add a Tab Page 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.

        

     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.

           

     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.

        

     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.

           

     – 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:

     C#

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

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

     C#

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

3. In the MainPage.xaml and MainPage.xaml.cs files of the .NET Standard project that contains the shared code, use the dxn prefix to declare a namespace that contains the TabPage class and create a TabPage instance:

   MainPage.xaml

    <dxn:TabPage 
        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:TabPageExample"
        x:Class="TabPageExample.MainPage">
   
    </dxn:TabPage>
   

   MainPage.xaml.cs

    using DevExpress.XamarinForms.Navigation;
   
    namespace TabPageExample {
        public partial class MainPage : TabPage {
        public MainPage() {
                InitializeComponent();
        }
      }
    }
   

Populate the Tab Page with Items

1. Download icons for tabs from the TabView example 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 TabPageItem instance to the TabPage.Items property:

   MainPage.xaml

    <dxn:TabPage 
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TabPageExample"
        xmlns:dxn="http://schemas.devexpress.com/xamarin/2014/forms/navigation"
        x:Class="TabPageExample.MainPage">
        <dxn:TabPageItem>
            <dxn:TabPageItem.Content>
                <ContentPage Title="Calendar" Icon="ic_calendar.png">
                    <Label Text="Calendar Here" 
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </ContentPage>
            </dxn:TabPageItem.Content>
        </dxn:TabPageItem>
    </dxn:TabPage>
   

   A tab item consists of the following elements:

   • Content - a page (a ContentPage instance, in this example) added to TabPageItem.Content and displayed in the main area.
   • Header - a tab displayed in the header panel. A header can display an icon and/or text (title) of the page added to TabPageItem.Content.

   

3. Add two more tab items:

   • Mail - Contains a NavigationPage instance with the InboxPage and SentItemsPage content pages added to the navigation stack.
   • People - Contains a ContentPage instance.
   MainPage.xaml

    <dxn:TabPage 
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TabPageExample"
        xmlns:dxn="http://schemas.devexpress.com/xamarin/2014/forms/navigation"
        x:Class="TabPageExample.MainPage">
        <dxn:TabPageItem>
            <dxn:TabPageItem.Content>
                <ContentPage Title="Calendar" Icon="ic_calendar.png">
                    <Label Text="Calendar Here" 
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </ContentPage>
            </dxn:TabPageItem.Content>
        </dxn:TabPageItem>
   
        <dxn:TabPageItem>
            <dxn:TabPageItem.Content>
                <NavigationPage Title="Mail" Icon="ic_mail.png">
                    <x:Arguments>
                        <local:InboxPage/>
                    </x:Arguments>
                </NavigationPage>
            </dxn:TabPageItem.Content>
        </dxn:TabPageItem>
   
        <dxn:TabPageItem>
            <dxn:TabPageItem.Content>
                <ContentPage Title="People" Icon="ic_people.png">
                    <Label Text="People Here" 
                           HorizontalOptions="Center" 
                           VerticalOptions="CenterAndExpand"/>
                </ContentPage>
            </dxn:TabPageItem.Content>
        </dxn:TabPageItem>
    </dxn:TabPage>
   

   InboxPage.xaml

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="TabPageExample.InboxPage"
                Title="Inbox">
       <ContentPage.Content>
           <StackLayout>
               <Label Text="Inbox Here" 
                      HorizontalOptions="Center" 
                      VerticalOptions="CenterAndExpand"/>
               <Button Text="Sent Items" Clicked="Button_Clicked"></Button>
           </StackLayout>
       </ContentPage.Content>
   </ContentPage>
   

   InboxPage.xaml.cs

   using System;
   using Xamarin.Forms;
   using Xamarin.Forms.Xaml;
   
   namespace TabPageExample {
       [XamlCompilation(XamlCompilationOptions.Compile)]
       public partial class InboxPage : ContentPage
       {
           public InboxPage ()
           {
               InitializeComponent ();
           }
   
           private void Button_Clicked(object sender, EventArgs e) {
               Navigation.PushAsync(new SentItemsPage());
           }
       }
   }
   

   SentItemsPage.xaml

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="TabPageExample.SentItemsPage"
                Title="Sent Items">
       <ContentPage.Content>
           <StackLayout>
               <Label Text="Sent Items Here"
                      VerticalOptions="CenterAndExpand" 
                      HorizontalOptions="CenterAndExpand" />
           </StackLayout>
       </ContentPage.Content>
   </ContentPage>
   

   

Customize the Tab Page Appearance

1. Move the header panel to the pages’s bottom edge, hide the selected item indicator, and make item headers fill all the available space in the header panel. Use the following properties of the TabPage object:

   Property	Description
   HeaderPanelPosition	Gets or sets the header panel’s position within the page.
   IsSelectedItemIndicatorVisible	Gets or sets whether the selected item indicator is visible.
   ItemHeaderWidth	Gets or sets the width of item headers when the HeaderPanelPosition is set to Top or Bottom.

   MainPage.xaml

   <dxn:TabPage 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:TabPageExample"
                x:Class="TabPageExample.MainPage"
                HeaderPanelPosition="Bottom"
                IsSelectedItemIndicatorVisible="False"
                ItemHeaderWidth="*">
        <!-- Tab items here. -->
   </dxn:TabPage>
   

   

2. Specify icon and text colors. You can customize colors for an item in the default and selected states. The TabPage object’s properties specify the colors for all items, and the TabPageItem object’s properties can override an individual tab item’s colors. The following properties configure the tab item header appearance:

   Property	Description
   TabPage.ItemHeaderTextColor	Gets or sets the color of text displayed in tab item headers.
   TabPage.ItemHeaderIconColor	Gets or sets the color of icons displayed in tab item headers.
   TabPage.ItemHeaderFontSize	Gets or sets the font size for the text displayed within item headers.
   TabPageItem.SelectedHeaderTextColor	Gets or sets the color the tab item uses in the selected state to paint its header text.
   TabPageItem.SelectedHeaderIconColor	Gets or sets the color the tab item uses in the selected state to paint its header icon.

   MainPage.xaml

    <dxn:TabPage 
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TabPageExample"
        xmlns:dxn="http://schemas.devexpress.com/xamarin/2014/forms/navigation"
        x:Class="TabPageExample.MainPage"
        HeaderPanelPosition="Bottom"
        ItemHeaderWidth="*"
        IsSelectedItemIndicatorVisible="False"
        ItemHeaderTextColor="#99191919"
        ItemHeaderIconColor="#99191919"
        ItemHeaderFontSize="12">
        <dxn:TabPage.Resources>
            <Color x:Key="blue600">#1e88e5</Color>
            <Color x:Key="red600">#e53935</Color>
            <Color x:Key="green600">#43a047</Color>
        </dxn:TabPage.Resources>
        <dxn:TabPageItem SelectedHeaderTextColor="{StaticResource blue600}"
                            SelectedHeaderIconColor="{StaticResource blue600}">
            <dxn:TabPageItem.Content>
                <ContentPage Title="Calendar" Icon="ic_calendar.png">
                    <Label Text="Calendar Here" 
                                    HorizontalOptions="Center" 
                                    VerticalOptions="CenterAndExpand"/>
                </ContentPage>
            </dxn:TabPageItem.Content>
        </dxn:TabPageItem>
   
        <dxn:TabPageItem SelectedHeaderTextColor="{StaticResource green600}"
                            SelectedHeaderIconColor="{StaticResource green600}">
            <dxn:TabPageItem.Content>
                <NavigationPage Title="Mail" Icon="ic_mail.png">
                    <x:Arguments>
                        <local:InboxPage/>
                    </x:Arguments>
                </NavigationPage>
            </dxn:TabPageItem.Content>
        </dxn:TabPageItem>
   
        <dxn:TabPageItem SelectedHeaderTextColor="{StaticResource red600}"
                            SelectedHeaderIconColor="{StaticResource red600}">
            <dxn:TabPageItem.Content>
                <ContentPage Title="People" Icon="ic_people.png">
                    <Label Text="People Here" 
                            HorizontalOptions="Center" 
                            VerticalOptions="CenterAndExpand"/>
                </ContentPage>
            </dxn:TabPageItem.Content>
        </dxn:TabPageItem>
    </dxn:TabPage>