Lesson 2: Populate Tab Items from a Data Source

• Dec 04, 2020
• 7 minutes to read

This lesson explains how to create a tab bar that allows end users to filter a list. The lesson uses TabView capability to generate tab items from a data source to build the filtering tab bar:

This lesson populates tab items automatically from an item source. Refer to the Lesson 1 to learn how to manually create tab items.

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:

2. Add the initialization code to your projects.

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

Prepare Models and View Models

1. Add the Vehicle class, which represents a data object in the app, to the Xamarin.Forms project:

2. Create the GroupedVehiclesViewModel class that is a tab item’s view model. This view model contains content displayed by the tab item in the header and in the main area:

3. Create the MainViewModel class that provides content displayed by the MainPage:

Bind View Models to the Tab View

1. Assign a MapViewModel instance to the MainPage’s BindingContext :

2. Bind the Tab View’s ItemsSource property to the view model’s VehiclesByMake property, and the SelectedItemIndex property to the view model’s SelectedIndex property in the MainPage.xaml file. Then, specify the ItemHeaderTemplate, which manages the Header Item appearance, and the ItemTemplate, which changes the content appearance.

Customize the Tab View

This step configures the appearance of the Tab View’s header panel and header items:

1. Specify min and max sizes for items (the ItemHeaderMinWidth and ItemHeaderMaxWidth properties), the spacing between items (HeaderPanelItemSpacing), and item padding:

2. Modify the header panel background (HeaderPanelBackgroundColor), and bind an item’s background color to a view model state:

3. Specify the frame’s border radius and margin, configure tab view’s shadow (HeaderPanelShadowHeight and HeaderPanelShadowRadius properties), hide the Selected Item Indicator (IsSelectedItemIndicatorVisible), and customize the label’s text color:

Complete Code

You can clone the complete solution from GitHub.