Skip to content

Commit 24b25c4

Browse files
author
KB Bot
committed
Added new kb article change-entry-cursor-color-dotnet-maui
1 parent 73933f6 commit 24b25c4

File tree

1 file changed

+106
-0
lines changed

1 file changed

+106
-0
lines changed
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Changing Entry Cursor Color on Android and iOS
3+
description: Learn how to change the cursor color of the Entry control on Android and on iOS to match the application's input field styling.
4+
type: how-to
5+
page_title: Adjusting Cursor Color for Entry Control in UI for .NET MAUI
6+
meta_title: Adjusting Cursor Color for Entry Control in UI for .NET MAUI
7+
slug: change-entry-cursor-color-dotnet-maui
8+
tags: entry, ui for .net maui, cursor color, android, radtextinput, handlerchanged, native customization
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
| Version | Product | Author |
15+
| --- | --- | ---- |
16+
| 8.0.0 and above | Telerik UI for .NET MAUI Entry | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
17+
18+
## Description
19+
20+
I am trying to change the cursor color of the [UI for .NET MAUI Entry ](https://www.telerik.com/maui-ui/documentation/controls/entry/overview) control on Android and on iOS to match the color of other input fields in the application. However, the available documentation for customizing the cursor is for versions 5.2.0 to 7.0.0 and is incompatible with the current version. Since version 8.0.0, the control uses `RadTextInput` internally instead of `RadEntry`, which requires different logic for cursor customization.
21+
22+
This knowledge base article also answers the following questions:
23+
- How to update Entry cursor color on mobile?
24+
- How to handle breaking changes for cursor customization in Entry after version 8.0.0?
25+
- How to apply native logic to change cursor color in Entry control?
26+
27+
## Solution
28+
29+
To modify the cursor color in the Entry control, follow these steps:
30+
31+
1. Handle the `Loaded` event of the Entry control to locate the internal `RadTextInput` control and apply the necessary native logic.
32+
2. Use the `Handler` property of `RadTextInput` to update the cursor color for Android and iOS.
33+
34+
```csharp
35+
private void entry_Loaded(object sender, EventArgs e)
36+
{
37+
var textInput = ChildOfType<RadTextInput>(this.entry);
38+
if (textInput != null)
39+
{
40+
var handler = textInput.Handler;
41+
if (handler == null)
42+
{
43+
textInput.HandlerChanged += this.OnTextInputHandlerChanged;
44+
}
45+
else
46+
{
47+
this.UpdateNativeElement(handler);
48+
}
49+
}
50+
}
51+
52+
private void OnTextInputHandlerChanged(object sender, EventArgs e)
53+
{
54+
var textInput = (RadTextInput)sender;
55+
this.UpdateNativeElement(textInput.Handler);
56+
textInput.HandlerChanged -= this.OnTextInputHandlerChanged;
57+
}
58+
59+
private void UpdateNativeElement(IViewHandler handler)
60+
{
61+
var nativeEntry = handler.PlatformView as Telerik.Maui.Platform.RadMauiTextInput;
62+
if (nativeEntry != null)
63+
{
64+
#if ANDROID
65+
nativeEntry.TextCursorDrawable?.SetColorFilter(new Android.Graphics.PorterDuffColorFilter(Android.Graphics.Color.Red, Android.Graphics.PorterDuff.Mode.Darken));
66+
#elif __IOS__
67+
nativeEntry.TintColor = UIKit.UIColor.Red;
68+
#endif
69+
}
70+
}
71+
72+
internal static T ChildOfType<T>(View visualElement) where T : View
73+
{
74+
if (visualElement == null)
75+
{
76+
return null;
77+
}
78+
79+
foreach (var item in VisualTreeElementExtensions.GetVisualTreeDescendants(visualElement))
80+
{
81+
if (item is T targetElement)
82+
{
83+
return targetElement;
84+
}
85+
}
86+
87+
return null;
88+
}
89+
```
90+
91+
3. Add sample Entry definition in XAML:
92+
93+
```xaml
94+
<VerticalStackLayout>
95+
<telerik:RadEntry x:Name="entry"
96+
Loaded=entry_Loaded" />
97+
</VerticalStackLayout>
98+
```
99+
100+
101+
## See Also
102+
103+
- [Breaking Changes in UI for .NET MAUI 8.0.0](https://www.telerik.com/maui-ui/documentation/upgrade/breaking-changes/8-0-0)
104+
- [Feature Request: Change Cursor Color in Entry](https://feedback.telerik.com/maui/1609886-entry-provide-an-option-to-change-the-cursor-caret-color)
105+
- [UI for .NET MAUI Entry Overview](https://www.telerik.com/maui-ui/components/entry/overview)
106+

0 commit comments

Comments
 (0)