Custom TextField.ClearIcon Style Not Applied in Uranium UI (MAUI)

[Pallav-sculptsoft]

Issue: Custom TextField.ClearIcon Style Not Applied in Uranium UI (MAUI)

---

Description

I’m trying to customize the TextField.ClearIcon in Uranium UI by defining a Style for Path. However, the default clear icon is still appearing, and my custom style is not being applied correctly.

What I Tried

I added the following style:

<Style TargetType="Path" Class="TextField.ClearIcon">
    <Setter Property="Fill" Value="{AppThemeBinding Light=DarkGray, Dark=LightGray}" />
    <Setter Property="Data" Value="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" />
</Style>

However, the default clear icon still appears, and my custom style is ignored.

Questions:

1. Do I need to explicitly inherit from the base style for TextField.ClearIcon?
2. Should I manually apply the style somewhere, or does Uranium UI automatically apply it?
3. Is there a specific resource dictionary or location where this style should be defined?

Any guidance would be greatly appreciated! 🚀

[enisn]

Let me check really qucik

[enisn]

You cannot apply style because those properties is set by code:

UraniumUI/src/UraniumUI.Material/Controls/TextField.cs

Lines 174 to 179 in 1deac10

	Content = new Path
	{
	StyleClass = new[] { "TextField.ClearIcon" },
	Data = UraniumShapes.X,
	Fill = ColorResource.GetColor("OnBackground", "OnBackgroundDark", Colors.DarkGray).WithAlpha(.5f),
	}

Style can be only applied when the data isn't set and default. If data is set, that means code overrides the value that comes from the style and not the opposite. I could move this logic to the UraniumStyle instead of manually setting it in the code. Or I can provide new properties for TextField like ClearIcon and ClearIconColor.
But it seems style cannot be applied for now.

If you need it urgently, you can create your custom class that inherits from TextField and override this method on your own.

public class MyTextField : TextField
{
    protected override View CreateIconClear()
    {
        var contentView = new StatefulContentView
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.End,
            IsVisible = false,
            Padding = new Thickness(5, 0),
            Margin = new Thickness(0, 0, 5, 0),
            TappedCommand = new Command(OnClearTapped),
            Content = new Path
            {
                StyleClass = new[] { "TextField.ClearIcon" },
                Data = "M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z",
                Fill = ColorResource.GetColor("DarkGray", "LightGray", Colors.DarkGray),
            }
        };
        contentView.SetId("ClearIcon");
        contentView.SetBinding(StatefulContentView.IsFocusableProperty, new Binding(nameof(DisallowClearButtonFocus), source: this));
        contentView.SetBinding(StatefulContentView.IsVisibleProperty, new Binding(nameof(Text), converter: UraniumConverters.StringIsNotNullOrEmptyConverter, source: this));
        return contentView;
    }
}

[Pallav-sculptsoft]

Thanks, @enisn, for the quick reply! Now I can use that override as you mentioned above. However, it might be a good idea to create a ticket for tracking potential changes—either moving the logic to UraniumStyle or introducing properties like ClearIcon and ClearIconColor for better customization in the future.