From 78de87cd9012b83918cbb4c2db531710d207ecfb Mon Sep 17 00:00:00 2001 From: KB Bot Date: Wed, 18 Jun 2025 07:48:52 +0000 Subject: [PATCH 1/3] Added new kb article reusing-itemtemplate-listpicker-dotnet-maui --- ...ing-itemtemplate-listpicker-dotnet-maui.md | 140 ++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md diff --git a/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md b/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md new file mode 100644 index 00000000..e000fd50 --- /dev/null +++ b/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md @@ -0,0 +1,140 @@ +--- +title: Reusing ItemTemplate with ListPicker in .NET MAUI +description: Learn how to reuse a single ItemTemplate across multiple ListPickers in .NET MAUI using a value converter for dynamic data binding. +type: how-to +page_title: Reusing ItemTemplate Across ListPickers in .NET MAUI +meta_title: Reusing ItemTemplate Across ListPickers in .NET MAUI +slug: reusing-itemtemplate-listpicker-dotnet-maui +tags: listpicker, .net maui, itemtemplate, displaymemberpath, converter +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.0.0 | Telerik UI for .NET MAUI ListPicker | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to reuse a single ItemTemplate across multiple instances of the [ListPicker]({%slug listpicker-overview%}) 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 achieve this, use a value converter to dynamically bind the displayed text based on the type of data in the `RadListPicker`. Follow these steps: + + +**1.** Define the `RadListPickers` and set their `ItemTemplate` property to a static resource. + +```xaml + + + + +``` + +**2.** Create classes for the data types used by the `RadListPickers`. + +```csharp +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. + +```csharp +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + + var people = new List + { + 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 + { + 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. + +```csharp +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. + +```xaml + + + + + + + + + +``` + +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]({%slug listpicker-overview%}) +- [Data Binding in .NET MAUI](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/) +- [Using Value Converters in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/converters) From 1215a2ed18735160b642b35159fd2464962033a3 Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Wed, 18 Jun 2025 15:02:31 +0300 Subject: [PATCH 2/3] Update knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md b/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md index e000fd50..c38fd640 100644 --- a/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md +++ b/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md @@ -17,7 +17,7 @@ res_type: kb ## Description -I want to reuse a single ItemTemplate across multiple instances of the [ListPicker]({%slug listpicker-overview%}) 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. +I want to reuse a single ItemTemplate across multiple instances of the [ListPicker]({%slug listpicker-overview%}) 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`? From 0bf55bfd19735cfa89dcf615bec106123d99daac Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Wed, 18 Jun 2025 15:02:38 +0300 Subject: [PATCH 3/3] Update knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md b/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md index c38fd640..5313c2af 100644 --- a/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md +++ b/knowledge-base/reusing-itemtemplate-listpicker-dotnet-maui.md @@ -26,7 +26,7 @@ This knowledge base article also answers the following questions: ## Solution -To achieve this, use a value converter to dynamically bind the displayed text based on the type of data in the `RadListPicker`. Follow these steps: +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.