Styling AutoComplete in Telerik MAUI After Upgrading to Version 8.0.0 or Later
Environment
| Versions | Product | Author |
|---|---|---|
| 7.1.0 vs. latest | Telerik UI for .NET MAUI AutoComplete | Dobrinka Yordanova |
Description
After updating my application from Telerik MAUI 7.1.0 to 8.0.0 or a later version, the styles set on RadAutoComplete controls, such as colored borders and backgrounds, disappear when the controls are focused. How can I apply these styles again?
This knowledge base article also answers the following questions:
- How can I apply border color and thickness to
RadAutoCompletein Telerik MAUI after an update to 8.0.0 or a later version? - How do I maintain the
RadAutoCompletebackground color when it's focused in Telerik MAUI version 8.0.0 or later? - What changes are necessary for styling
RadAutoCompleteupon focusing after migrating to Telerik MAUI 8.0.0 or later?
Solution
To style the RadAutoComplete control, including maintaining or altering the border color, thickness, and background color when the control is focused, you need to apply specific styles to the Focused visual state of the control. This approach is necessary due to changes in the RadAutoComplete API and the introduction of a new theming mechanism in Telerik MAUI version 8.0.0 and later.
Set the Focused Visual State
First, familiarize yourself with the RadAutoComplete Styling documentation and the Visual States guide. These resources provide essential information on how to style the RadAutoComplete control effectively.
API Changes from Telerik MAUI 7.1.0 to 8.0.0 and Later
The RadAutoComplete control has changes in the transition from version 7.1.0 to 8.0.0.
The table below summarizes the key changes relevant to styling:
| Telerik.UI.for.MAUI <= 7.1.0 | Telerik.UI.for.MAUI >= 8.0.0 |
|---|---|
ClearButtonColor |
Set the TextColor in the ClearButtonStyle (Style with target type RadTemplatedButton). |
HoveredClearButtonColor |
Use PointerOver VisualState in the ClearButtonStyle (Style with target type RadTemplatedButton) and set TextColor. |
PressedClearButtonColor |
Use Pressed VisualState in the ClearButtonStyle (Style with target type RadTemplatedButton) and set TextColor. |
| NA |
VisualStates. |
Automation Id—RadAutoCompleteEntry. |
Automation Id—RadAutoCompleteTextInput. |
| NA |
TextInputStyle—Allows you to style the inner input control. |
Ensure you review the full list of breaking changes and adapt your application accordingly: Telerik MAUI 8.0.0 version breaking changes.
By addressing the changes in the API and properly setting the Focused visual state, you can maintain or customize the styling of RadAutoComplete controls when they are focused, ensuring a consistent look and feel across your application.