How to hide Cancel button for .Net MAUI SearchBar control for iOS using MAUI handlers?

Question

In .Net MAUI using handlers how can I hide "Cancel button" for SearchBar control when user enters text in SearchBar for iOS?

In Xamarin forms this we had implemented using custom renderer like below:

 protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == "Text")
            {
                Control.ShowsCancelButton = false;
            }
        }

So, similarly I want to do it in .Net MAUI for multiple pages using handlers because the "SearchBarRenderer" is reported as deprecated hence I want to use the handlers approach. Does anyone know how to achieve this?

Awaiting reply on above query.

Thanks in advance.

Muffadal.

Answer 1

Hello,

There is a workaround at GitHub- Hide Cancel button for SearchBar on iOS while edit/text enter operation using MAUI handlers and Mappers not working #13720

#if IOS
SearchBarHandler.Mapper.AppendToMapping("CancelButtonColor", (handler, view) =>
{
handler.PlatformView.SetShowsCancelButton(false, false);
});
#endif

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I think searchbar should have the same entry property

            <Style TargetType="Entry">
                <Setter Property="ClearButtonVisibility" Value="WhileEditing"/>
            </Style>

You could open a propose on github.

BTW, I have not tried but you could start here:

        Microsoft.Maui.Handlers.SearchBarHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if IOS || MACCATALYST

			handler.PlatformView.ShowsCancelButton = false;
#endif
        });

Answer 3

Hello,

I check the source code of SearchBarHandler.iOS.cs, this issue is related to the UpdateCancelButtonVisibility and the UpdateCancelButton methods. There is a same issue reported at GitHub - Hide Cancel button for SearchBar on iOS while edit/text enter operation using MAUI handlers and Mappers not working #13720, please follow the progress at GitHub.

You could try to custom control with handlers and set UISearchBar for the handler.PlatformView (the handler.PlatformView in SearchBarHandler is of type MauiSearchBar) Please refer to Create custom controls with .NET MAUI handlers - .NET MAUI | Microsoft Learn

can you please provide a sample / example of the same.

You can refer to the above official doc and sample, and I make a simple customize view, please see the following code:
**1.**Create the cross-platform control

namespace SearchBarSample.Views
{
   public class MAUICustomSearchBar:View
    {    //you can set BindableProperty
    }
}

2.Create any required additional cross-platform types.(I didn't create types, it's UISearchBar)

3.Create a partial handler class.
4.Create a PropertyMapper dictionary.
5.Create a CommandMapper dictionary.

namespace SearchBarSample.Handlers
{
    public partial class CustomSearchBarHandler : ViewHandler<MAUICustomSearchBar, UISearchBar>
    {
        public static IPropertyMapper<MAUICustomSearchBar, CustomSearchBarHandler> PropertyMapper = new PropertyMapper<MAUICustomSearchBar, CustomSearchBarHandler>(ViewHandler.ViewMapper)
        {// please deal with mapper if you can set BindableProperty and define what Actions to take when a property change occurs in the cross-platform control
        };
        public static CommandMapper<MAUICustomSearchBar, CustomSearchBarHandler> CommandMapper = new(ViewCommandMapper)
        {
           
        };

        public CustomSearchBarHandler() : base(PropertyMapper, CommandMapper)
        {
        }
    }
}

6.Create partial handler classes for iOS platform

//CustomSearchBarHandler.ios.cs
#if IOS || MACCATALYST
using UIKit;
#endif
namespace SearchBarSample.Handlers
{
    public partial class CustomSearchBarHandler:ViewHandler<MAUICustomSearchBar,UISearchBar>
    {
        protected override void ConnectHandler(UISearchBar platformView)
        {
            base.ConnectHandler(platformView);
        }
        protected override void DisconnectHandler(UISearchBar platformView)
        {
            platformView.Dispose();
            base.DisconnectHandler(platformView);
        }
        protected override UISearchBar CreatePlatformView()
        {
            UISearchBar searchBar = new UISearchBar() { SearchBarStyle = UISearchBarStyle.Default, ShowsCancelButton = false };
            return searchBar;
        }
    }
}

7.Register the handler using the ConfigureMauiHandlers and AddHandler methods in your app's MauiProgram class.

builder
.UseMauiApp<App>()
.ConfigureMauiHandlers(handlers =>
                  {
              handlers.AddHandler(typeof(MAUICustomSearchBar), typeof(CustomSearchBarHandler));
            });

8.Add customize control on the Page

  <Views:MAUICustomSearchBar  BackgroundColor="Yellow" ></Views:MAUICustomSearchBar>

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.