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; |
} |
} |
} |
} |