# .NET MAUI ComboBox Styling

The [Telerik UI for .NET MAUI ComboBox](https://www.telerik.com/maui-ui/documentation/controls/combobox/overview) 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.
* `BorderBrush`(`Brush`)—Defines the brush of the border. `SolidColorBrush` is supported on all platforms. Gradient brushes are supported only on WinUI.
* `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.
* `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.

The ComboBox control uses the [`RadTextInput`](https://www.telerik.com/maui-ui/documentation/controls/entry/text-input) control internally when the ComboBox `IsEditable` property is set to `True`. To style the input control (`RadTextInput`), use the `TextInputStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadTextInput`).

In addition to the available styling properties, you can apply specific [Visual States](https://www.telerik.com/maui-ui/documentation/controls/combobox/visual-states) to the ComboBox control.

### 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](https://www.telerik.com/maui-ui/documentation/controls/combobox/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:

```XAML
<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="MouseOver">
                    <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:

```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:

![.NET MAUI ComboBox Styling](https://www.telerik.com/maui-ui/documentation/assets/8ccaf0f3bb1160e935f2fde91410d6e1/combobox-styling.png)

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

![.NET MAUI ComboBox Styling on Selected Item](https://www.telerik.com/maui-ui/documentation/assets/01adab3226e6fb2912504a6d976f2afd/combobox-styling-focused.png)

> For the ComboBox Styling example, go to the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) 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.
* `DropDownCornerRadius`(`Thickness`)—Defines the corner radius of the border that surrounds the DropDown 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:

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

**2.** Define the ComboBox in XAML:

```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:

![ComboBox Drop Down Style](https://www.telerik.com/maui-ui/documentation/assets/0eabc09466d4b692ac544ad82dbce68c/combobox-drop-down-style.png)

> For the ComboBox DropDown Styling example, go to the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and navigate to ComboBox -> Styling category.

## See Also

* [Apply Implicit Style](https://www.telerik.com/maui-ui/documentation/knowledge-base/implicit-style-input-controls)
* [Styling the ComboBox Using Visual States](https://www.telerik.com/maui-ui/documentation/knowledge-base/style-combobox-visual-state)
* [Configuration](https://www.telerik.com/maui-ui/documentation/controls/combobox/configuration)
* [Edit Mode & Search](https://www.telerik.com/maui-ui/documentation/controls/combobox/editmode-and-search)