.NET MAUI ComboBox Templates

If the default templates of the control do not suit your needs, you can define custom ones. The available templates for customizing are:

• ItemTemplate(DataTemplate)—Defines the template of the items that are visualized in the dropdown list.
• SelectedItemTemplate(DataTemplate)—Defines the template of the selected items that are visualized in the dropdown list.
• TokenTemplate(DataTemplate)—Defines the template of the tokens that are visualized when multiple selection is performed.
• ShowMoreTemplate(DataTemplate)—Defines the Template of the Show More UI that gets visualized when the control is not focused and the space is not enough to show all tokens when using the Multiple selection mode.
• SelectionBoxTemplate(DataTemplate)—Defines the template of the selected item in the box section of the control. This property is only available when the RadComboBox is non-editable (IsEditable set to false).

To customize the content inside the input area when an item is selected and the DisplayMemberPath property is not set, use the SelectionBoxTemplate. The SelectionBoxTemplate applies when the SelectionMode is Single and the control's IsEditable property is set to false.

To enable the keyboard navigation support when the drop-down is opened and when setting the custom item and selected item templates in ComboBox for .NET MAUI, wrap the content of the templates in a RadComboBoxItem. Define the necessary visual states of the RadComboBoxItem, specifically MouseOver and Highlighted.

Example with ItemTemplate and SelectedItemTemplate

1. Define the .NET MAUI ComboBox in XAML:

• XAML

<telerik:RadComboBox ItemsSource="{Binding Items}" 
                     DisplayMemberPath="Name"
                     Placeholder="Select City"
                     AutomationId="comboBox">
    <telerik:RadComboBox.ItemTemplate>
        <DataTemplate>
            <telerik:RadBorder BackgroundColor="LightYellow"
                               MinimumWidthRequest="300">
                <Label Text="{Binding Name}" 
                       Padding="8, 7, 0, 7"
                       TextColor="Black"/>
            </telerik:RadBorder>
        </DataTemplate>
    </telerik:RadComboBox.ItemTemplate>
    <telerik:RadComboBox.SelectedItemTemplate>
        <DataTemplate>
            <telerik:RadBorder BackgroundColor="LightBlue"
                               MinimumWidthRequest="300">
                <VerticalStackLayout>
                    <Label Text="{Binding Name}"
                           Padding="8, 7, 0, 7"
                           TextColor="Black"/>
                    <Label Text="{Binding Population}" 
                           FontSize="12"
                           Padding="8, 7, 0, 7"/>
                </VerticalStackLayout>                            
            </telerik:RadBorder>
        </DataTemplate>
    </telerik:RadComboBox.SelectedItemTemplate>
</telerik:RadComboBox>

2. Add the telerik namespace:

• XAML

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

3. Add a sample business model:

• C#

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

4. Add the ViewModel:

• C#

public class ViewModel
{
    public ViewModel()
    {
        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; }
}

The final result on WinUI:

For the ComboBox Item and SelectedItem Templates example, go to the SDKBrowser Demo Application and navigate to ComboBox -> Templates category.

Example with TokenTemplate and ShowMoreTemplate

1. Define the ComboBox in XAML:

• XAML

<telerik:RadComboBox ItemsSource="{Binding Items}"
                     Placeholder="Select City!"
                     SelectionMode="Multiple"
                     DisplayMemberPath="Name"
                     x:Name="comboBox"
                     AutomationId="comboBox">
    <telerik:RadComboBox.TokenTemplate>
        <DataTemplate>
            <telerik:RadBorder BackgroundColor="LightBlue"
                               CornerRadius="10"
                               Margin="2">
                <HorizontalStackLayout Margin="3">
                    <Label Text="{Binding Name}"
                           TextColor="Black"
                           VerticalTextAlignment="Center"
                           Margin="2" />
                    <Label FontFamily="TelerikFontExamples"
                           Text="&#xE80A;" 
                           FontSize="10"
                           VerticalTextAlignment="Center"
                           TextColor="Black"
                           Margin="2">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                        </Label.GestureRecognizers>
                    </Label>
                </HorizontalStackLayout>
            </telerik:RadBorder>
        </DataTemplate>
    </telerik:RadComboBox.TokenTemplate>
    <telerik:RadComboBox.ShowMoreTemplate>
        <DataTemplate>
            <Label Text="{Binding Path=., StringFormat='+{0} more items'}"
                   VerticalTextAlignment="Center"/>
        </DataTemplate>
    </telerik:RadComboBox.ShowMoreTemplate>
</telerik:RadComboBox>

2. Add a sample business model:

• C#

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

3. Add the ViewModel:

• C#

public class ViewModel
{
    public ViewModel()
    {
        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; }
}

when the default TokenTemplate is overridden, you will need to implement custom logic for removing the tokens from the ComboBox:

Here is a sample logic removing the token when adding TapGestureRecognizer to the Label:

• C#

private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
{
    var closeLabel = sender as Label;
    if (closeLabel != null)
    {
        var item = closeLabel.BindingContext as City;
        if (item != null)
        {
            this.comboBox.SelectedItems.Remove(item);
        }
    }
}

Here is the how the Token and ShowMore Templates look on WinUI:

For the ComboBox TokenTemplate and ShowMoreTemplate example, go to the SDKBrowser Demo Application and navigate to ComboBox -> Templates category.