如何自定义MAUI内置SearchBar样式？需白色背景并移除取消按钮

完全可以自定义MAUI内置SearchBar的样式来实现你的需求，以下是分平台的具体实现方案：

基础XAML配置 #

先保留基础的SearchBar定义，后续通过平台特定代码或样式优化：

<SearchBar Placeholder="Search" 
           BackgroundColor="White"
           x:Name="CustomSearchBar" />

iOS平台实现 #

iOS的SearchBar默认在输入时会显示取消按钮，且Minimal样式可能存在默认的圆角/半透明背景，通过Handler修改原生控件来解决：

在页面的代码后台（如MainPage.xaml.cs）中重写OnHandlerChanged方法：

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();

#if IOS
    if (CustomSearchBar.Handler?.PlatformView is UIKit.UISearchBar nativeSearchBar)
    {
        // 强制隐藏取消按钮
        nativeSearchBar.ShowsCancelButton = false;
        // 监听文本变化，防止输入过程中取消按钮重新显示
        nativeSearchBar.TextChanged += (_, __) => nativeSearchBar.ShowsCancelButton = false;

        // 设置搜索输入框的白色背景与无边框
        if (nativeSearchBar.SearchTextField != null)
        {
            nativeSearchBar.SearchTextField.BackgroundColor = UIKit.UIColor.White;
            nativeSearchBar.SearchTextField.BorderStyle = UIKit.UITextBorderStyle.None;
        }

        // 设置整个SearchBar的背景为白色
        nativeSearchBar.BackgroundColor = UIKit.UIColor.White;
    }
#endif
}

Android平台实现 #

Android的SearchView默认可能带有下划线或提交按钮，可通过代码或自定义样式解决：

方式1：通过代码后台修改 #

同样在OnHandlerChanged方法中添加Android平台处理：

#if ANDROID
    if (CustomSearchBar.Handler?.PlatformView is AndroidX.AppCompat.Widget.SearchView nativeSearchView)
    {
        // 禁用提交按钮
        nativeSearchView.SetSubmitButtonEnabled(false);

        // 获取内部输入框，设置白色背景并移除下划线
        var editText = nativeSearchView.FindViewById<AndroidX.AppCompat.Widget.SearchView.SearchAutoComplete>(Resource.Id.search_src_text);
        if (editText != null)
        {
            editText.SetBackgroundColor(Android.Graphics.Color.White);
            editText.Background = null;
        }

        // 设置SearchView整体背景为白色
        nativeSearchView.SetBackgroundColor(Android.Graphics.Color.White);
    }
#endif

方式2：通过Android样式文件配置 #

在Platforms/Android/Resources/values/styles.xml中添加自定义样式：

<style name="CustomSearchBarStyle" parent="Widget.AppCompat.SearchView">
    <item name="android:background">@android:color/white</item>
    <item name="android:submitButtonEnabled">false</item>
    <item name="android:queryBackground">@android:color/white</item>
</style>

然后在XAML中引用该样式：

<SearchBar Placeholder="Search" 
           BackgroundColor="White"
           android:SearchBar.Style="@style/CustomSearchBarStyle" />

通过以上配置，即可实现白色背景、无取消按钮的SearchBar效果，匹配你的期望样式。

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