.NET MAUI ComboBox Styling

The Telerik UI for .NET MAUI ComboBox provides the following Style properties for customizing its look:

• PlaceholderColor (Microsoft.Maui.Graphics.Color)—Defines the color for the placeholder text.
• TextColor (Microsoft.Maui.Graphics.Color)—Defines the color of the text when the control is editable and the color of the selected item when the control is not editable and the selection mode is single.
• BackgroundColor (Microsoft.Maui.Graphics.Color)—Defines the background color of the control.
• BorderColor (Microsoft.Maui.Graphics.Color)—Defines the color of the border.
• BorderThickness (Microsoft.Maui.Thickness)—Defines the thickness of the border.
• ClearButtonStyle (of type Style with target type Telerik.Maui.Controls.RadButton)—Defines the style for the clear button.
• Font Options (FontAttributes, FontFamily, FontSize)—Define the font options to the text of the RadComboBox. It's applied to the Placeholder, Selected Text (for single selection), and when the control is in Editable Mode.
• HighlightTextColor (Color)—Specifies the color of the text that will be highlighted when searching (IsEditable must be True).

Example for ComboBox Styling

1. Define the ComboBox in XAML:

<telerik:RadComboBox ItemsSource="{Binding Items}" 
                     Placeholder="Select City!"
                     PlaceholderColor="Blue"
                     BackgroundColor="LightGray"
                     BorderColor="Black"
                     BorderThickness="2"
                     ClearButtonStyle="{StaticResource ClearButtonStyle}"
                     DisplayMemberPath="Name"
                     AutomationId="comboBox">
    <telerik:RadComboBox.BindingContext>
        <local:ViewModel/>
    </telerik:RadComboBox.BindingContext>
</telerik:RadComboBox>

2. Add the telerik namespace:

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

3. Add sample business model:

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

4. Add the ViewModel:

Here is how the ComboBox looks when styling is applied:

Here is how the styling is applied when the control is focused and item is selected:

For the ComboBox Styling example, go to the SDKBrowser Demo Application and navigate to the ComboBox > Styling category.

DropDown Styling

The following properties styles the ComboBox Drop Down:

• DropDownBorderColor(Microsoft.Maui.Graphics.Color): Defines the color of the border around the drop down part of the control.
• DropDownBorderThickness(Microsoft.Maui.Thickness): Defines the thickness of the border that is around of the drop down part of the control.
• DropDownBorderCornerRadius(Microsoft.Maui.Thickness): Defines the corner radius of the border that is around the drop down part of the control
• DropDownBackgroundColor(Microsoft.Maui.Graphics.Color): Defines the background color of the drop down part of the control.
• DropDownButtonStyle(of type Style with target type Telerik.Maui.Controls.RadButton): Defines the style for the drop down button.

Example for DropDown Styling

1. Define the ComboBox in XAML:

<telerik:RadComboBox ItemsSource="{Binding Items}"
                     IsEditable="True" 
                     SearchTextPath="Name"
                     DisplayMemberPath="Name"
                     SelectionMode="Multiple"
                     HighlightTextColor="Black"
                     DropDownBorderColor="Blue"
                     DropDownBorderThickness="2"
                     DropDownCornerRadius="5"
                     DropDownBackgroundColor="LightBlue"
                     DropDownButtonStyle="{StaticResource DropDownButtonStyle}"
                     AutomationId="comboBox">
    <telerik:RadComboBox.BindingContext>
        <local:ViewModel/>
    </telerik:RadComboBox.BindingContext>
</telerik:RadComboBox>

2. Add the telerik namespace:

3. Define the DropDown Button Style in the Page's ResourceDictionary:

<Style TargetType="telerik:RadButton" x:Key="DropDownButtonStyle">
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
    <Setter Property="VerticalOptions" Value="Center"/>
    <Setter Property="WidthRequest" Value="24"/>
    <Setter Property="HeightRequest" Value="24"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BackgroundColor" Value="Transparent"/>             
    <Setter Property="TextColor" Value="Blue"/>
    <Setter Property="Padding" Value="{OnPlatform Android='8, 2, 4, 2', iOS='4, 2, 12, 2', MacCatalyst='4, 0, 8, 0', WinUI='6, 0, 10, 0'}"/>
</Style>

4. Add sample business model:

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

5. Add the ViewModel used:

Here is how the Drop Down Styling looks on Android:

For the ComboBox DropDown Styling example, go to the SDKBrowser Demo Application and navigate to ComboBox -> Styling category.

See Also

• Configuration