ItemTemplate

[Philip]

Can the RadTabView have dynamically bound items using a ItemTemplate (like a ListView)? 

If not, are there any workarounds?

[Lance | Manager Technical Support]

Hi Philip,

The RadTabView doesn't have an ItemsSource property that you can bind to or an ItemTemplate property to render DataTemplates. This is because the TabView was designed to display TabViewItems with ContentView content.

However, you can still achieve the same result by using the TabViewItem.Content property with a custom ContentView for each of your data items.  You can then set the custom ContentView's BindingContext to that data item.

I've written a demo for you to help convey the concept, find it attached and let me walk through the key parts.


Demo Walkthrough

Let's assume this is the data model class:

public class MyDataModel
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
    public string Details { get; set; }
}

Let's now create the custom ContentView instead of a DataTemplate. Notice that I did not add an element for the Title property, this is because I'm going to use it for the TabViewItem.HeaderText property.

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabViewItemCustomContentView.Portable.ContentViews.CustomView">

    <StackLayout Margin="20">
        <Label Text="{Binding Subtitle}" FontSize="Large"/>
        <Label Text="{Binding Details}" LineBreakMode="WordWrap" FontSize="Medium"/>
    </StackLayout>

</ContentView>

Now, to the page with the TabView:

<ContentPage xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
        ...>

    <telerikPrimitives:RadTabView x:Name="tabView" />

</ContentPage>

public partial class StartPage : ContentPage
{
    private List<MyDataModel> myDataModelItems = new List<MyDataModel>(Enumerable.Range(1,3).Select(i=> new MyDataModel
    {
        Title = $"Title {i}",
        Subtitle = $"Subtitle {i}",
        Details = $" {i} - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    }));

    public StartPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();

        // Iterate over your data items
        foreach (var myDataItem in myDataModelItems)
        {
            // 1 - Create the TabView Item and use the data item to set the header
            var tabViewItem = new TabViewItem();
            tabViewItem.HeaderText = myDataItem.Title;

            // 2 - Create a new instance of the ContentView
            var customView = new CustomView();

            // This is the key - You use the data item as the BindingContext of the custom ContentView
            customView.BindingContext = myDataItem;

            // 3 - Set the ContentView as the content of the TabViewItem
            tabViewItem.Content = customView;

            // 4 - Add it to the TabView
            tabView.Items.Add(tabViewItem);
        }
    }
}

Here's the result at runtime on Android:





Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik