mobilecontrols-400554-xamarin-forms-navigation-controls-tab-view-getting-started-how-to-manually-populate-items.md
This lesson explains how to create a bottom tab navigation bar with the TabView view:
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.
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.
Add DevExpress Navigation components to your solution in one of the following ways:
Add the initialization code to your projects.
Assign a TabView instance to the MainPage’s Content property:
Download icons for tabs from a Git repository and add them to your solution:
Add a new TabViewItem instance to the view’s Items property:
Add two more TabViewItem objects:
The following image shows the step result:
Move the Header Panel to the view’s bottom edge, hide the Selected Item Indicator, and make items fill all available space:
Specify icon / text colors:
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>