.NET MAUI ListPicker Templates

The ListPicker for .NET MAUI provides the following templates:

• ItemTemplate(DataTemplate)—Defines the template used for displaying the list of items.
• SelectedItemTemplate(DataTemplate)—Specifies the template used for visualizing the selected item from the list.
• PlaceholderTemplate(ControlTemplate)—Defines the template visualized for the placeholder.
  
• DisplayTemplate(ControlTemplate)—Defines the template visualized when an item from the list is selected.

Using SelectorSettings property (of type Telerik.Maui.Controls.PickerPopupSelectorSettings) you can define the following templates:

• HeaderTemplate(ControlTemplate)—Defines what will be displayed inside the dialog(popup) header.
• FooterTemplate(ControlTemplate)—Defines what will be displayed inside the dialog(popup) footer.

This is the Visual Structure of the ListPicker templates:

In addition, the ListPicker for .NET MAUI provides the following properties:

• ItemsSource(IList)—Specifies the collection used to generate the content of the list picker.
• ItemLength(double)—Defines the length of the items inside the list.
• ItemSpacing(double)—Defines the spacing between the items inside the list.
• SelectedItem(object)—Specifies the selected item of the list picker
• DisplayMemberPath(string)—Defines the path of the property which is to be displayed as DisplayString.

Example

The following example demonstrates how to define a sample ListPicker:

<telerik:RadListPicker PlaceholderTemplate="{StaticResource placeholderTemplate}"
                       ItemTemplate="{StaticResource itemTemplate}"
                       SelectedItemTemplate="{StaticResource selectedItemTemplate}"
                       ItemLength="40"
                       ItemSpacing="4"
                       ItemsSource="{Binding Items}" 
                       DisplayMemberPath="Name"
                       x:Name="listPicker"
                       AutomationId="listPicker">
    <telerik:RadListPicker.BindingContext>
        <local:CitiesViewModel/>
    </telerik:RadListPicker.BindingContext>
    <telerik:RadListPicker.PopupSettings>
        <telerik:PickerPopupSettings HeaderTemplate="{StaticResource headerTemplate}"
                                     FooterTemplate="{StaticResource footerTemplate}"/>
    </telerik:RadListPicker.PopupSettings>
    <telerik:RadListPicker.DropDownSettings>
        <telerik:PickerDropDownSettings FooterTemplate="{StaticResource footerTemplate}"/>
    </telerik:RadListPicker.DropDownSettings>
</telerik:RadListPicker>

Define the templates in the page resources:

Item Template

<DataTemplate x:Key="itemTemplate">
    <Label Text="{Binding Population}" 
           BackgroundColor="LightYellow"
           HorizontalTextAlignment="Center" 
           VerticalTextAlignment="Center"/>
</DataTemplate>

Template for the Selected Item

<DataTemplate x:Key="selectedItemTemplate">
    <Label Text="{Binding Name}" 
           BackgroundColor="LightBlue"
           HorizontalTextAlignment="Center" 
           VerticalTextAlignment="Center"/>
</DataTemplate>

Placeholder Template

<ControlTemplate x:Key="placeholderTemplate">
    <Grid>
        <Button Text="Tap to open list picker"
               FontAttributes="Bold"
               TextColor="White"
               BackgroundColor="#B73562"
               Padding="20"
               Command="{TemplateBinding ToggleCommand}" />
    </Grid>
</ControlTemplate>

Display Template

<ControlTemplate x:Key="displayTemplate">
    <StackLayout>
        <Label Text="This is the DisplayTemplate of the ListPicker" FontSize="10"/>
        <Label Text="{TemplateBinding DisplayString}" TextColor="Black" FontSize="15" Grid.Row="1" VerticalTextAlignment="Center"/>
        <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Command="{TemplateBinding ToggleCommand}" />
        </StackLayout.GestureRecognizers>
    </StackLayout>
</ControlTemplate>

Header Template

<ControlTemplate x:Key="headerTemplate">
    <Grid>
        <Label Text="Select city:"
               TextColor="White"
               Padding="20"
               FontSize="16"
               VerticalTextAlignment="Center"
               HorizontalTextAlignment="Center"
               BackgroundColor="#B73562"/>
    </Grid>
</ControlTemplate>

Footer Template

<ControlTemplate x:Key="footerTemplate">
    <StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="FillAndExpand" BackgroundColor="#B73562">
        <telerik:RadButton Text="Cancel"
                           WidthRequest="80"
                           TextColor="White"
                           BackgroundColor="Transparent"
                           Command="{TemplateBinding CancelCommand}" />
        <telerik:RadButton Text="OK"
                           WidthRequest="80"
                           TextColor="White"
                           BackgroundColor="Transparent"
                           Command="{TemplateBinding AcceptCommand}" />
    </StackLayout>
</ControlTemplate>

Set a sample business model:

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

Define the ViewModel:

public class CitiesViewModel
{
    public CitiesViewModel()
    {
        this.Items = new ObservableCollection<City>
        {
            new City { Name = "Tokyo", Population = 13929286 },
            new City { Name = "New York", Population = 8623000 },
            new City { Name = "London", Population = 8908081 },
            new City { Name = "Madrid", Population = 3223334 },
            new City { Name = "Los Angeles", Population = 4000000},
            new City { Name = "Paris", Population = 2141000 },
            new City { Name = "Beijing", Population = 21540000 },
            new City { Name = "Singapore", Population = 5612000 },
            new City { Name = "New Delhi", Population = 18980000 },
            new City { Name = "Bangkok", Population = 8305218 },
            new City { Name = "Berlin", Population = 3748000 },
        };
    }

    public ObservableCollection<City> Items { get; set; }
}

Add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

The following image shows the end result:

For a sample templates example, refer to the ListPicker/Templates folder of the Telerik UI for .NET MAUI SDKBrowser Application.

See Also

• Styling