.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(IsEditableset to "false").
Example with ItemTemplate and SelectedItemTemplate
1. Define the .NET MAUI ComboBox 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>
2. Add the telerik namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Add a sample business model:
public class City
{
public string Name { get; set; }
public int Population { get; set; }
}
4. Add the ViewModel:
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:
<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>
2. Add a sample business model:
public class City
{
public string Name { get; set; }
public int Population { get; set; }
}
3. Add the ViewModel:
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 on WinUI:
For the ComboBox TokenTemplate and ShowMoreTemplate example, go to the SDKBrowser Demo Application and navigate to ComboBox -> Templates category.