.NET MAUI ComboBox Templates
If the default templates of the control do not suit your needs, you can easily 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 there is not enough space for all Tokens to be visualized when the selection mode is multiple. -
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:
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=""
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:
For the ComboBox TokenTemplate and ShowMoreTemplate example, go to the SDKBrowser Demo Application and navigate to ComboBox -> Templates category.