New to Telerik UI for .NET MAUI? Start a free 30-day trial

.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.

When the selection mode is single and the control is not editable if there is ItemTemplate set the same template will be visualized in the box part of the control when item is selected.

  • 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").

Example with ItemTemplate and SelectedItemTemplate

Here is the ComboBox definition in 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>

you need to add the telerik namespace:

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

the sample business model

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

and the ViewModel used:

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:

ComboBox Item and SelectedItem Templates

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

Here is the ComboBox definition in 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>

Add the sample business model

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

and the ViewModel used:

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:

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:

ComboBox Token and Show More Templates

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

See Also

In this article