Xamarin.Forms – CustomSearchBar

This project, you can find at: https://github.com/officialdoniald/Xamarin.Forms.CustomControls

We have to create some platforms specific code (custom NavigationPage Renderer), because in the base Xamarin.Forms code, we can’t find this implementation. So first step, we have to create a class in the .NET Standard/PCL project: CustomSearchBar ( https://github.com/officialdoniald/Xamarin.Forms.CustomControls/blob/master/XamarinForms.CustomControls/XamarinForms.CustomControls/SearchBar/CustomSearchBar.cs ).

using Xamarin.Forms;
namespace XamarinForms.CustomControls.SearchBar
{
public class CustomSearchBar : Xamarin.Forms.SearchBar
{
public static readonly BindableProperty BorderColorProperty =
BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(CustomSearchBar));
public static readonly BindableProperty BorderWidthProperty =
BindableProperty.Create(nameof(BorderWidth), typeof(int), typeof(CustomSearchBar));
/// <summary>
/// Set the Border Color of the SearchBar.
/// </summary>
public Color BorderColor
{
set { SetValue(BorderColorProperty, value); }
get { return (Color)GetValue(BorderColorProperty); }
}
/// <summary>
/// Set the Border Width of the SearchBar.
/// </summary>
public int BorderWidth
{
set { SetValue(BorderWidthProperty, value); }
get { return (int)GetValue(BorderWidthProperty); }
}
}
}

Now, we have to implement to the various platforms. Let’s try with the Android part: https://github.com/officialdoniald/Xamarin.Forms.CustomControls/blob/master/XamarinForms.CustomControls/XamarinForms.CustomControls.Android/CustomRenderer/CustomSearchBarRenderer.cs

With this code, you can change the search icon of the searchbar:

int searchIconId = Context.Resources.GetIdentifier(“android:id/search_mag_icon”, null, null);
var icon = searchView.FindViewById(searchIconId);
(icon as ImageView).SetImageResource(Resource.Drawable.searchbaricon);

You have to create an image in the Resources/Drawable folder with this name: searchbaricon.png (you can change it, but don’t forget to rename Resource.Drawable.your_drawable).

iOS part:

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XamarinForms.CustomControls.iOS.CustomRenderer;
using XamarinForms.CustomControls.SearchBar;
[assembly: ExportRenderer(typeof(CustomSearchBar), typeof(CustomSearchBarRenderer))]
namespace XamarinForms.CustomControls.iOS.CustomRenderer
{
public class CustomSearchBarRenderer : SearchBarRenderer
{
#region Properties
private UIColor BorderColor = UIColor.Black;
private int BorderWidth = 1;
#endregion
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
{
base.OnElementChanged(e);
var newElement = ((CustomSearchBar)e.NewElement);
BorderColor = newElement.BorderColor.ToUIColor();
if (newElement.BorderWidth != 0)
{
BorderWidth = newElement.BorderWidth;
}
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 = BorderWidth;
searchbar.Layer.BorderColor = BorderColor.CGColor;
//searchbar.ShowsCancelButton = false;
}
}
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *