.NET MAUI TabView Data Binding

For all cases where the business items are not simple strings, data-binding is necessary to correctly visualize information. The TabView for .NET MAUI component supports data binding starting with the Telerik .NET MAUI 7.0.0 version.

• ItemsSource(IEnumerable)—Defines the items source from which TabView items are generated.

In a combination with the ItemsSource, the developer has to define the ItemTemplate. The ItemTemplate (of type DataTemplate) is used to specify the template for the TabViewItem.

Data Binding Example

Here is an example showing how to bind the TabView to a data source:

1. Define the TabView control:

• XAML

<telerik:RadTabView x:Name="tabView" ItemsSource="{Binding Data}">
    <telerik:RadTabView.ItemTemplate>
        <DataTemplate>
            <telerik:TabViewItem HeaderText="{Binding Name}">
                <telerik:TabViewItem.ContentTemplate>
                    <DataTemplate>
                        <telerik:RadItemsControl ItemsSource="{Binding Customers}">
                            <telerik:RadItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <telerik:RadBorder BorderColor="LightGray"
                                                           Padding="10"
                                                           Margin="10,5"
                                                           BorderThickness="1" 
                                                           CornerRadius="5">
                                            <Grid RowDefinitions="Auto, Auto" 
                                                  RowSpacing="5">
                                                <HorizontalStackLayout Spacing="10">
                                                    <Label Text="&#xe836;"
                                                           FontFamily="TelerikFontExamples" />
                                                    <Label Text="{Binding Name}" />
                                                </HorizontalStackLayout>
                                                <HorizontalStackLayout Spacing="10" 
                                                                       Grid.Row="1">
                                                    <Label Text="&#xe85d;" 
                                                           FontFamily="TelerikFontExamples" />
                                                    <Label Text="{Binding Number}" />
                                                </HorizontalStackLayout>
                                            </Grid>
                                        </telerik:RadBorder>
                                    </Grid>
                                </DataTemplate>
                            </telerik:RadItemsControl.ItemTemplate>
                        </telerik:RadItemsControl>
                    </DataTemplate>
                </telerik:TabViewItem.ContentTemplate>
            </telerik:TabViewItem>
        </DataTemplate>
    </telerik:RadTabView.ItemTemplate>
    <telerik:RadTabView.BindingContext>
        <local:ViewModel/>
    </telerik:RadTabView.BindingContext>
</telerik:RadTabView>

2. Define the data model class:

• C#

public class Customer : Location
{
    public string Name { get; set; }
    public int Number { get; set; }
}

public class Location
{
    public string Name { get; set; }
    public ObservableCollection<Customer> Customers { get; set; }
}

3. Define the ViewModel class:

• C#

public class ViewModel
{
    public ViewModel()
    {
        this.Data = new ObservableCollection<Location>()
        {
            new Location() 
            { 
                Name = "London",
                Customers = new ObservableCollection<Customer>
                {
                    new Customer{ Name = "Jane", Number = 221144},
                    new Customer{ Name = "Fred", Number = 432457},
                    new Customer{ Name = "Jack", Number = 2783344},
                    new Customer{ Name = "Maya", Number = 645664},
                    new Customer{ Name = "Gabriel", Number = 8675},
                }
            },
            new Location()
            {
                Name = "Madrid",
                Customers = new ObservableCollection<Customer>
                {
                    new Customer{ Name = "Joan", Number = 345435},
                    new Customer{ Name = "Alex", Number = 232146},
                    new Customer{ Name = "Jose", Number = 65678},
                }
            },
            new Location()
            {
                Name = "Milan",
                Customers = new ObservableCollection<Customer>
                {
                    new Customer{ Name = "Luca", Number = 8960},
                    new Customer{ Name = "Giovanni", Number = 9876},
                    new Customer{ Name = "Enzo", Number = 4365},
                    new Customer{ Name = "Enzo", Number = 64545},
                    new Customer{ Name = "Enzo", Number = 2134},
                }
            },
            new Location()
            {
                Name = "New York",
                Customers = new ObservableCollection<Customer>
                {
                    new Customer{ Name = "William", Number = 546},
                    new Customer{ Name = "James", Number = 276654},
                    new Customer{ Name = "Sebastian", Number = 09867},
                    new Customer{ Name = "Andrea", Number = 53376},
                    new Customer{ Name = "John", Number = 3624},
                    new Customer{ Name = "Jane", Number = 6768},
                }
            }
        };
    }
    public ObservableCollection<Location> Data { get; set; }
}

Here is the TabView after DataBinding scenario:

For a runnable example with the TabView Data Binding scenario, see the SDKBrowser Demo Application and go to TabView > Features.