.NET MAUI ComboBox Styling

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

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

In addition, you can change the visual appearance of the ComboBox by defining the following visual states through the .NET MAUI Visual State Manager:

• Normal—Applied when the ComboBox is in its normal state.
• Focused—Applied when the ComboBox receives focus (when it's editable).
• (Windows Only) MouseOver—Applied when the mouse cursor is hovering over the ComboBox.
• Disabled**—Applied when the ComboBox's IsEnabled is False.

Example for ComboBox Styling

The example below demonstrates some of the styling capabilities of the ComboBox, such as custom ClearButtonStyle, TextInputStyle, TextColor, PlaceholderColor, and others. It also shows how to switch its appearance through the .NET MAUI Visual State Manager.

The example uses the same ViewModel and City classes as the Getting Started topic.

1. Add a Style that targets the RadComboBox to your page's resources and apply all the needed styling properties and the visual states:

<Style TargetType="telerik:RadTextInput" x:Key="TextInputStyle">
    <Setter Property="CharacterSpacing" Value="4" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

<Style TargetType="telerik:RadTemplatedButton" x:Key="ClearButtonStyle">
    <Setter Property="FontFamily" Value="{x:Static telerik:TelerikFont.Name}" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Content" Value="&#xe851;" />
    <Setter Property="TextColor" Value="#A30111"/>
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="#B53340" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="#C76670" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled" />
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<Style TargetType="telerik:RadComboBox" x:Key="ComboBoxStyle">
    <Setter Property="TextColor" Value="#00897B" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="#00897B" />
    <Setter Property="PlaceholderColor" Value="#00A392" />
    <Setter Property="BackgroundColor" Value="#FFFFFF" />
    <Setter Property="ClearButtonStyle" Value="{StaticResource ClearButtonStyle}" />
    <Setter Property="TextInputStyle" Value="{StaticResource TextInputStyle}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadComboBox.BorderBrush" Value="#00BCA9" />
                        <Setter Property="telerik:RadComboBox.BorderThickness" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="MouseOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadComboBox.BackgroundColor" Value="#F9F9F9" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="Opacity" Value="0.6" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

2. Define the ComboBox in XAML:

<telerik:RadComboBox ItemsSource="{Binding Items}" 
                     Placeholder="Select a city"
                     DisplayMemberPath="Name"
                     Style="{StaticResource ComboBoxStyle}"
                     AutomationId="comboBox">
    <telerik:RadComboBox.BindingContext>
        <local:ViewModel/>
    </telerik:RadComboBox.BindingContext>
</telerik:RadComboBox>

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 style the ComboBox DropDown:

• DropDownBorderColor(Color)—Defines the color of the border that surrounds the DropDown part of the control.
• DropDownBorderThickness(Thickness)—Defines the thickness of the border that surrounds the DropDown part of the control.
• DropDownBorderCornerRadius(Thickness)—Defines the corner radius of the border that surrounds the DropDownn part of the control.
• DropDownBackgroundColor(Color)—Defines the background color of the DropDown part of the control.
• DropDownButtonStyle(of type Style with target type Telerik.Maui.Controls.RadTemplatedButton)—Defines the style for the DropDown button.

Example for DropDown Styling

1. Define the DropDown Button Style in the page's resources:

<Style TargetType="telerik:RadTemplatedButton" x:Key="DropDownButtonStyle">
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="TextColor" Value="#00897B"/>
</Style>

2. Define the ComboBox in XAML:

<telerik:RadComboBox ItemsSource="{Binding Items}"
                     IsEditable="True" 
                     SearchTextPath="Name"
                     DisplayMemberPath="Name"
                     SelectionMode="Multiple"
                     HighlightTextColor="#00897B"
                     DropDownBorderColor="#00897B"
                     DropDownBorderThickness="1"
                     DropDownCornerRadius="12"
                     DropDownBackgroundColor="#E2F6F3"
                     DropDownVerticalOffset="2"
                     DropDownButtonStyle="{StaticResource DropDownButtonStyle}"
                     AutomationId="comboBox">
    <telerik:RadComboBox.BindingContext>
        <local:ViewModel/>
    </telerik:RadComboBox.BindingContext>
</telerik:RadComboBox>

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.

See Also

• Configuration
• Edit Mode & Search