Last Updated: 03 Mar 2024 23:36 by Stephen
Created on: 29 Feb 2024 21:59
Category: UI for .NET MAUI
Type: Bug Report
RadEntry's background color changes to White when focused regardless of BackgroundColor property

Regardless of the RadEntry's BackgroundColor property, I've noticed the visible-background-color to differ when the RadEntry receives active focus.

The observed behavior is this:

  • RadEntry's visible-background-color generally equals RadEntry's BackgroundColor property
  • RadEntry's visible-background-color changes to gray when hovered regardless of day-night mode
  • RadEntry's visible-background-color changes to white when focused
  • RadEntry's visible-background-color restores to RadEntry's BackgroundColor when unfocused

Typically, in day mode settings (Windows default), the RadEntry's BackgroundColor == white so you don't see the problem. However, in night mode settings (Android default), we want the RadEntry's BackgroundColor == black so the problem is more prevalent since you're typing white text on a white background.

When using Visual States, and, if you try to re-enforce the same BackgroundColor property in all of the visual states, sometimes focus, hover, unfocus, hover, focus sequence will allow you to edit in the RadEntry in your desired RadEntry's BackgroundColor property instead of white, but, most of the time is white.

This problem can be reproduced on Windows and Android if you set your application to night mode Application.Current.UserAppTheme = AppTheme.Dark and set RadEntry's BackgroundColor=Black and TextColor=White in XAML. Put 2 or 3 RadEntry's on the page so you can navigate between them to see the problem.

This item is a duplicate of an already existing item. You can find the original item here:
Posted on: 03 Mar 2024 23:36
Thanks DiDi, your response resolved my query.
Posted on: 01 Mar 2024 10:39

Hello Stephen,

I changed the status of this item to duplicated. We have same behavior logged. The status of the original item is declined. 

I shared the information in the support ticket, I am pasting it here too: 

"I tested the case and here are more details: In order to apply dark light color based on app theme you need to use visual states. Here is the definition:

        <telerik:RadEntry x:Name="radEntry" TextColor="White" PlaceholderColor="White"
                  Placeholder="Enter text here">
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Black, Dark=White}" />
                                <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />

                        <VisualState x:Name="Focused">
                                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Green, Dark=Blue}" />
                                <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />

                        <VisualState x:Name="Disabled">
                                <Setter Property="BackgroundColor" Value="Pink" />

                        <VisualState x:Name="PointerOver">
                                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Gray, Dark=Red}" />
                                <Setter Property="TextColor" Value="{AppThemeBinding Light=White, Dark=Black}" />

You need to define the values for focused, normal and point over (desktop usage) visual states. On Android this works as expected. 

However on Windows the case is different. You have to set the Visual States to the native element in the Platforms/Windows/App.xaml file. I have attached the App.xaml.file that is used inside the Windows folder. The file contains the visual states. Use the code in you app on order to modify the colors for the entry.

The App.xaml file is attached. 

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Attached Files: