Reusing ItemTemplate with ListPicker in .NET MAUI

Environment

Version	Product	Author
11.0.0	Telerik UI for .NET MAUI ListPicker	Dobrinka Yordanova

Description

I want to reuse a single ItemTemplate across multiple instances of the ListPicker in my .NET MAUI application. Each ListPicker uses the DisplayMemberPath property but displays different types of data. I want to avoid manually overriding the ItemTemplate for each RadListPicker and instead define an implicit ItemTemplate that uses a value converter to display the correct data based on the ListPicker's data source.

This knowledge base article also answers the following questions:

• How to use a common ItemTemplate for multiple RadListPickers?
• How to dynamically bind the displayed text using DisplayMemberPath?
• How to define an implicit ItemTemplate in RadListPicker?

Solution

To reuse a single ItemTemplate across multiple instances of the ListPicker, use a value converter to dynamically bind the displayed text based on the type of data in the RadListPicker. The steps below demonstrate the suggested approach:

1. Define the RadListPickers and set their ItemTemplate property to a static resource.

<VerticalStackLayout>
    <telerik:RadListPicker x:Name="picker"
                           DisplayMemberPath="Country"
                           Placeholder="Picker 1"
                           ItemTemplate="{StaticResource commontemplate}" />
    <telerik:RadListPicker x:Name="picker2"
                           Placeholder="Picker 2"
                           DisplayMemberPath="Name"
                           ItemTemplate="{StaticResource commontemplate}" />
</VerticalStackLayout>

2. Create classes for the data types used by the RadListPickers.

class Person2
{
    public string Name { get; set; }
    public string Country { get; set; }
}

class Country2
{
    public string Name { get; set; }
}

3. Populate the ListPickers with data in the page's constructor.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var people = new List<Person2>
        {
            new Person2 { Name = "John", Country = "USA" },
            new Person2 { Name = "Mary", Country = "UK" },
            new Person2 { Name = "Jake", Country = "Australia" }
        };
        picker.ItemsSource = people;

        var countries = new List<Country2>
        {
            new Country2 { Name = "Great Britain" },
            new Country2 { Name = "UK" },
            new Country2 { Name = "Spain" }
        };
        picker2.ItemsSource = countries;
    }
}

4. Create a value converter to dynamically bind the displayed text.

public class ObjectToValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Person2 person)
        {
            return person.Country;
        }

        if (value is Country2 country)
        {
            return country.Name;
        }

        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

5. Define a single DataTemplate in XAML that uses the value converter.

<ContentPage.Resources>
    <ResourceDictionary>
        <local:ObjectToValueConverter x:Key="ObjectToValueConverter" />
        <DataTemplate x:Key="commontemplate">
            <Grid RowDefinitions="*"
                  ColumnDefinitions="*"
                  HorizontalOptions="Fill">
                <Label Text="{Binding ., Converter={StaticResource ObjectToValueConverter}}" />
            </Grid>
        </DataTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

This approach allows you to reuse the same ItemTemplate across multiple ListPickers by dynamically binding the displayed text based on the data source.

See Also

• ListPicker Overview
• Data Binding in .NET MAUI
• Using Value Converters in .NET MAUI