Xamarin iOS searchbar customization

Question

I'm trying to do the following customization of the Xamarin searchbar for iOS;

• Change the X (close) icon in the search bar that appears when search text is added
• Add padding between the search text and the search icon

I have added a custom Renderer with the code as follows;

public class ExtendedSearchBarRenderer : SearchBarRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
    {
        base.OnElementChanged(e);

        Control.BackgroundColor = UIColor.White;
        UITextField txSearchField = (UITextField)Control.ValueForKey(new Foundation.NSString("searchField"));
        txSearchField.BackgroundColor = Color.FromHex("#f0f3f7").ToUIColor();
        txSearchField.BorderStyle = UITextBorderStyle.None;
        txSearchField.Layer.CornerRadius = 6f;
    }
    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == nameof(SearchBar.Text))
        {
            Control.SetShowsCancelButton(false, false);
        }
    }
}

How this code be extended to allow the above customization?

Answer 1

IOS UiTextField has ClearButtonMode, first can set like this:

uITextfield.ClearButtonMode = UITextFieldViewMode.WhileEditing;

If want to change image of cancle button ,need to use Delegate of textfield:

uITextfield.Delegate = new TextFieldDelegate();

TextFieldDelegate.cs

public class TextFieldDelegate : UITextFieldDelegate
{
    public override bool ShouldChangeCharacters(UITextField textField, NSRange range, string replacementString)
    {
        UIButton button = (UIButton)textField.ValueForKey(new Foundation.NSString("_clearButton"));

        if (button is UIButton)
        {
            button.SetImage(new UIImage("eye.png"), UIControlState.Normal);

        }

        return true;
    }
}

The effect as follow: