Xamarin forms, custom renderer for searchbar in iOS

zank_stzank_st Member ✭✭

I want to change the background of the searchbar from the default grey to white.

I tried implement this custom renderer without success:

using MyNamespace.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(SearchBarRenderer), typeof(SearchBarRendererForiOS))]
namespace MyNamespace.iOS.Renderers
{
    public class SearchBarRendererForiOS : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
        {
            base.OnElementChanged(e);

            var searchbar = (UISearchBar)Control;

            if (e.NewElement != null)
            {
                Foundation.NSString _searchField = new Foundation.NSString("searchField");
                var textFieldInsideSearchBar = (UITextField)searchbar.ValueForKey(_searchField);
                textFieldInsideSearchBar.BackgroundColor = UIColor.FromRGB(0, 0, 12);
                textFieldInsideSearchBar.TextColor = UIColor.White;
                // searchbar.Layer.BackgroundColor = UIColor.Blue.CGColor;
                searchbar.TintColor = UIColor.White;
                searchbar.BarTintColor = UIColor.White;
                searchbar.Layer.CornerRadius = 0;
                searchbar.Layer.BorderWidth = 12;
                searchbar.Layer.BorderColor = UIColor.White.CGColor;

                searchbar.ShowsCancelButton = true;
            }
        }
    }
}

Where am I wrong?

Thanks

Best Answer

  • zank_stzank_st ✭✭
    Accepted Answer

    Thanks @LandLu,
    I solved my problem with

    searchbar.SearchBarStyle = UISearchBarStyle.Minimal;
    

    full class:

    [assembly: ExportRenderer(typeof(SearchBar), typeof(SearchBarRendererForiOS))]
    namespace MyNamespace.iOS.Renderers
    {
        public class SearchBarRendererForiOS : SearchBarRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
            {
                base.OnElementChanged(e);
    
                var searchbar = (UISearchBar)Control;
    
                if (e.NewElement != null)
                {
                    searchbar.TintColor = UIColor.Black;
                    searchbar.BarTintColor = UIColor.Clear;
                    searchbar.Layer.CornerRadius = 0;
                    searchbar.Layer.BorderWidth = 1;
                    searchbar.Layer.BorderColor = UIColor.Clear.CGColor;
                    searchbar.SearchBarStyle = UISearchBarStyle.Minimal;
    
                    searchbar.SetShowsCancelButton(false, false);
                    searchbar.ShowsCancelButton = false;
    
                    searchbar.TextChanged += delegate
                    {
                        searchbar.ShowsCancelButton = false;
                    };
                }
            }
        }
    }
    

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    I'm afraid you mistook the usage of ExportRenderer. The first parameter should be the name of the control which is used in Forms like:

    [assembly: ExportRenderer(typeof(SearchBar), typeof(SearchBarRendererForiOS))]
    namespace SearchBarSample.iOS
    {
        public class SearchBarRendererForiOS : SearchBarRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
            {
                base.OnElementChanged(e);
    
                var searchbar = (UISearchBar)Control;
    
                if (e.NewElement != null)
                {
                    Foundation.NSString _searchField = new Foundation.NSString("searchField");
                    var textFieldInsideSearchBar = (UITextField)searchbar.ValueForKey(_searchField);
                    textFieldInsideSearchBar.BackgroundColor = UIColor.FromRGB(0, 0, 12);
                    textFieldInsideSearchBar.TextColor = UIColor.White;
                    // searchbar.Layer.BackgroundColor = UIColor.Blue.CGColor;
                    searchbar.TintColor = UIColor.White;
                    searchbar.BarTintColor = UIColor.White;
                    searchbar.Layer.CornerRadius = 0;
                    searchbar.Layer.BorderWidth = 12;
                    searchbar.Layer.BorderColor = UIColor.White.CGColor;
    
                    searchbar.ShowsCancelButton = true;
                }
            }
        }
    }
    

    And forms usage:

    <StackLayout>
        <SearchBar Placeholder="Search items..."/>
    </StackLayout>
    

    Here is the effect:

    Please check my attachment to see the specific code.

  • zank_stzank_st Member ✭✭

    Thank you so much, now that the custom renderer is working I still dont know how to change the background color from gray to white, I tried to set varius properties to white but without success. This is the renderer that I m using right now.

    [assembly: ExportRenderer(typeof(SearchBar), typeof(SearchBarRendererForiOS))]
    namespace MyNamespace.iOS.Renderers
    {
        public class SearchBarRendererForiOS : SearchBarRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
            {
                base.OnElementChanged(e);
    
                var searchbar = (UISearchBar)Control;
    
                if (e.NewElement != null)
                {
                    Foundation.NSString _searchField = new Foundation.NSString("searchField");
                    var textFieldInsideSearchBar = (UITextField)searchbar.ValueForKey(_searchField);
                    textFieldInsideSearchBar.BackgroundColor = UIColor.White;
                    textFieldInsideSearchBar.TextColor = UIColor.Black;
                    textFieldInsideSearchBar.HorizontalAlignment = UIControlContentHorizontalAlignment.Left;
                    textFieldInsideSearchBar.TextAlignment = UITextAlignment.Left;
                    searchbar.Layer.BackgroundColor = UIColor.White.CGColor; // I thought it was this one
                    searchbar.TintColor = UIColor.White;
                    searchbar.BarTintColor = UIColor.White;
                    searchbar.Layer.CornerRadius = 0;
                    searchbar.Layer.BorderWidth = 0;
                    searchbar.Layer.BorderColor = UIColor.White.CGColor;
    
    
                    searchbar.ShowsCancelButton = false;
                }
            }
        }
    }
    
  • LandLuLandLu Member, Xamarin Team Xamurai

    If you want a completely white search bar, try this code:

    [assembly: ExportRenderer(typeof(SearchBar), typeof(SearchBarRendererForiOS))]
    namespace SearchBarSample.iOS
    {
        public class SearchBarRendererForiOS : SearchBarRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
            {
                base.OnElementChanged(e);
    
                var searchbar = (UISearchBar)Control;
    
                if (e.NewElement != null)
                {
                    //Foundation.NSString _searchField = new Foundation.NSString("searchField");
                    //var textFieldInsideSearchBar = (UITextField)searchbar.ValueForKey(_searchField);
                    //textFieldInsideSearchBar.BackgroundColor = UIColor.White;
                    //textFieldInsideSearchBar.TextColor = UIColor.Black;
                    //textFieldInsideSearchBar.HorizontalAlignment = UIControlContentHorizontalAlignment.Left;
                    //textFieldInsideSearchBar.TextAlignment = UITextAlignment.Left;
                    //searchbar.Layer.BackgroundColor = UIColor.White.CGColor; // I thought it was this one
                    searchbar.TintColor = UIColor.White;
                    searchbar.BarTintColor = UIColor.White;
                    searchbar.Layer.CornerRadius = 0;
                    searchbar.Layer.BorderWidth = 1;
                    searchbar.Layer.BorderColor = UIColor.White.CGColor;
    
    
                    searchbar.ShowsCancelButton = false;
                }
            }
        }
    }
    

    Effect:

  • zank_stzank_st Member ✭✭
    Accepted Answer

    Thanks @LandLu,
    I solved my problem with

    searchbar.SearchBarStyle = UISearchBarStyle.Minimal;
    

    full class:

    [assembly: ExportRenderer(typeof(SearchBar), typeof(SearchBarRendererForiOS))]
    namespace MyNamespace.iOS.Renderers
    {
        public class SearchBarRendererForiOS : SearchBarRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
            {
                base.OnElementChanged(e);
    
                var searchbar = (UISearchBar)Control;
    
                if (e.NewElement != null)
                {
                    searchbar.TintColor = UIColor.Black;
                    searchbar.BarTintColor = UIColor.Clear;
                    searchbar.Layer.CornerRadius = 0;
                    searchbar.Layer.BorderWidth = 1;
                    searchbar.Layer.BorderColor = UIColor.Clear.CGColor;
                    searchbar.SearchBarStyle = UISearchBarStyle.Minimal;
    
                    searchbar.SetShowsCancelButton(false, false);
                    searchbar.ShowsCancelButton = false;
    
                    searchbar.TextChanged += delegate
                    {
                        searchbar.ShowsCancelButton = false;
                    };
                }
            }
        }
    }
    
Sign In or Register to comment.