如何在Xamarin Android中将搜索栏的“X”关闭按钮改为“Cancel”文本

核心方案：自定义渲染器实现 #

要实现Android端将SearchBar的清除图标替换为Cancel文本按钮，同时统一双平台样式，我们可以通过自定义渲染器分别处理Android和iOS平台的原生控件：

步骤1：定义Forms端自定义SearchBar #

先在共享项目中创建一个继承自SearchBar的自定义控件，方便后续渲染器识别：

using Xamarin.Forms;

namespace YourAppName.Controls
{
    public class CustomSearchBar : SearchBar
    {
        // 可选：添加可绑定属性，让Cancel按钮文本/样式支持XAML配置
        public static readonly BindableProperty CancelButtonTextProperty = BindableProperty.Create(
            nameof(CancelButtonText),
            typeof(string),
            typeof(CustomSearchBar),
            "Cancel");

        public string CancelButtonText
        {
            get => (string)GetValue(CancelButtonTextProperty);
            set => SetValue(CancelButtonTextProperty, value);
        }
    }
}

步骤2：Android端自定义渲染器 #

在Android项目中创建渲染器，隐藏原生清除图标，添加文本版Cancel按钮：

1. 先在AssemblyInfo.cs中注册渲染器：

[assembly: ExportRenderer(typeof(YourAppName.Controls.CustomSearchBar), typeof(YourAppName.Droid.Renderers.CustomSearchBarRenderer))]

2. 编写渲染器代码：

using Android.Content;
using Android.Widget;
using AndroidX.AppCompat.Widget;
using YourAppName.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

namespace YourAppName.Droid.Renderers
{
    public class CustomSearchBarRenderer : SearchBarRenderer
    {
        private TextView _cancelButton;

        public CustomSearchBarRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);

            if (Control == null || e.NewElement == null) return;

            var customSearchBar = (CustomSearchBar)e.NewElement;
            var searchView = Control as SearchView;

            // 隐藏原生清除图标
            searchView?.FindViewById(Resource.Id.search_close_btn)?.Visibility = Android.Views.ViewStates.Gone;

            // 创建Cancel文本按钮
            _cancelButton = new TextView(Context)
            {
                Text = customSearchBar.CancelButtonText,
                TextSize = 16,
                Gravity = Android.Views.GravityFlags.CenterVertical
            };
            // 设置按钮文本颜色（可根据需求调整）
            _cancelButton.SetTextColor(Android.Graphics.Color.ParseColor("#FFFFFF"));

            // 绑定按钮点击事件：清空文本+失去焦点
            _cancelButton.Click += (s, args) =>
            {
                customSearchBar.Text = string.Empty;
                customSearchBar.Unfocus();
            };

            // 将按钮添加到搜索栏右侧布局
            if (searchView?.FindViewById(Resource.Id.search_plate) is LinearLayout searchPlateLayout)
            {
                var layoutParams = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WrapContent,
                    LinearLayout.LayoutParams.MatchParent)
                {
                    Margins = new Android.Graphics.Insets(16, 0, 16, 0) // 调整边距适配布局
                };
                searchPlateLayout.AddView(_cancelButton, layoutParams);
            }

            // 监听文本变化，控制Cancel按钮显示/隐藏
            customSearchBar.TextChanged += OnTextChanged;
            UpdateCancelButtonVisibility();
        }

        private void OnTextChanged(object sender, TextChangedEventArgs e)
        {
            UpdateCancelButtonVisibility();
        }

        private void UpdateCancelButtonVisibility()
        {
            _cancelButton?.SetVisibility(string.IsNullOrEmpty(Element.Text) 
                ? Android.Views.ViewStates.Gone 
                : Android.Views.ViewStates.Visible);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                (Element as CustomSearchBar)?.TextChanged -= OnTextChanged;
                _cancelButton?.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

步骤3：iOS端自定义渲染器（统一样式） #

iOS原生SearchBar默认带Cancel文本按钮，我们只需调整样式和Android端统一即可：

1. 注册渲染器（AssemblyInfo.cs）：

[assembly: ExportRenderer(typeof(YourAppName.Controls.CustomSearchBar), typeof(YourAppName.iOS.Renderers.CustomSearchBarRenderer))]

2. 编写渲染器代码：

using UIKit;
using YourAppName.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

namespace YourAppName.iOS.Renderers
{
    public class CustomSearchBarRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);

            if (Control == null) return;

            var customSearchBar = (CustomSearchBar)Element;
            // 强制显示Cancel按钮
            Control.ShowsCancelButton = true;

            // 获取并调整Cancel按钮样式
            if (Control.ValueForKey(new Foundation.NSString("cancelButton")) is UIButton cancelButton)
            {
                cancelButton.SetTitle(customSearchBar.CancelButtonText, UIControlState.Normal);
                cancelButton.SetTitleColor(UIColor.White, UIControlState.Normal);
                cancelButton.TitleLabel.Font = UIFont.SystemFontOfSize(16);
            }

            // 统一搜索栏基础样式（和Android端匹配）
            Control.BackgroundColor = UIColor.FromRGB(30, 30, 30);
            Control.SearchTextField.BackgroundColor = UIColor.FromRGB(50, 50, 50);
            Control.SearchTextField.TextColor = UIColor.White;
            Control.SearchTextField.PlaceholderTextColor = UIColor.FromWhiteAlpha(1, 0.6f);
        }
    }
}

步骤4：在XAML中使用自定义SearchBar #

引用自定义控件命名空间后，直接使用：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourAppName.Controls"
             x:Class="YourAppName.Views.SearchPage">
    <StackLayout>
        <controls:CustomSearchBar 
            Placeholder="搜索内容..."
            CancelButtonText="Cancel"
            TextColor="White"
            PlaceholderColor="#88FFFFFF"
            BackgroundColor="#1E1E1E"/>
    </StackLayout>
</ContentPage>

注意事项 #

• Android端需确保项目已迁移至AndroidX，否则原生SearchView的布局ID可能不同；
• 若需适配不同Android版本的布局差异，可通过判断API版本调整控件查找逻辑；
• 可扩展自定义属性，比如Cancel按钮的字体、颜色、边距等，让样式配置更灵活。

内容的提问来源于stack exchange，提问作者Deep