.NET MAUI ComboBox Styling
ComboBox control for .NET MAUI 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 typeStyle
with target typeTelerik.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.
Example for ComboBox Styling
Here is the ComboBox definition 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>
in addition you will 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:
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 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 typeStyle
with target typeTelerik.Maui.Controls.RadButton
): Defines the style for the drop down button.
Example for DropDown Styling
Here is the ComboBox definition 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>
add the following namespace:
The DropDown Button Style is defined 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>
the sample business model
public class City
{
public string Name { get; set; }
public int Population { get; set; }
}
and the ViewModel used:
Here is how the Drop Down Styling looks:
For the ComboBox DropDown Styling example, go to the SDKBrowser Demo Application and navigate to ComboBox -> Styling category.