How can I change the cursor color for DataFormRadEntryEditor-controls?

[Christian]

I need a solution to get rid of the purple default color which does not fit into my color concept for Android and iOS. I found the solution for the RadEntry which should be the base function of the control, but I don't find how to get this base:

How can I change the cursor color for AuroComplete the have focused event on the MAUI in UI for .NET MAUI | Telerik Forums

It would be also fine to change the color of the underline too. I'm not sure if this color is set by the same property.

 

 

[Didi]

Hi Christian,

The The DataForm RadEntry editor uses the RadEntry control. The RadEntry has the following options for styling:  https://docs.telerik.com/devtools/maui/controls/entry/styling You can apply styling to the DataFormRadEntryEditor by using the EditorStyle property. This is described here: https://docs.telerik.com/devtools/maui/controls/dataform/styling/editors-styling 

If you want to change the focused border, then you have to use the FocusedBorderBrush through style .Here is an example: 

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:local="clr-namespace:MauiApp5"
             x:Class="MauiApp5.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="telerik:RadEntry" x:Key="Editor">
                <Setter Property="FocusedBorderBrush" Value="Red"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid>
        <telerik:RadDataForm x:Name="dataform" AutoGenerateItems="False">
            <telerik:DataFormRadEntryEditor EditorStyle="{StaticResource Editor}" PropertyName="Name"/> 
        </telerik:RadDataForm>
    </Grid>
</ContentPage>

Regarding to the cursor color, the link you shared shows the approach for the AutoComplete control. 

You can try adding a handler to the DataFormRadEntryEditor and add custom logic to customize the native element. 

Here is an example to get started:

<Grid>
    <telerik:RadDataForm x:Name="dataform" AutoGenerateItems="False">
        <telerik:DataFormRadEntryEditor HandlerChanged="DataFormRadEntryEditor_HandlerChanged" EditorStyle="{StaticResource Editor}" PropertyName="Name"/> 
    </telerik:RadDataForm>
</Grid>

    private void DataFormRadEntryEditor_HandlerChanged(object sender, EventArgs e)
    {

        var platform = this.Handler.PlatformView;
#if ANDROID
        // 2. Change the cursor
        if (this?.Handler?.PlatformView is Microsoft.Maui.Platform.ContentViewGroup borderViewGroup)
        {
            var textInputs = borderViewGroup.GetChildrenOfType<Google.Android.Material.TextField.TextInputLayout>();

            var textInput = textInputs.FirstOrDefault();

            if (textInput is { EditText.TextCursorDrawable: not null })
            {
                textInput.EditText.TextCursorDrawable.SetColorFilter(new Android.Graphics.PorterDuffColorFilter(Android.Graphics.Color.Red, Android.Graphics.PorterDuff.Mode.Darken));
            }
        }
        
#endif
    }

In general, we have a feature request logged for providing an option to change the caret color. Please cast your vote and follow the item: https://feedback.telerik.com/maui/1609886-entry-provide-an-option-to-change-the-cursor-caret-color 

Regards,
Didi
Progress Telerik

[Christian]

Unfortunately, this does not work for me because there is no TextInputLayout found in the platform view, but I found another solution for Android. I'm not really sure, which side effects this have, but currently it seams to be fine.

I changed the cursor and focus color by changing the colors.xml for Android:
Platforms > Android > Resources > values > colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Cursor -->
    <color name="colorPrimary">#649FC1</color>
    <!-- Status bar -->
    <color name="colorPrimaryDark">#418AB3</color>
    <!-- Focused text box and selected text background -->
    <color name="colorAccent">#418AB3</color>
</resources>