Place SearchBar in the top / navigation bar

Question

Is it possible to place a SearchBar in a Forms project so that it appears in the top / navigation bar of the application? What I want to achieve is something similar to the Android Youtube app, just cross-platform:

Answer 1

To do this, you must write a renderer for your page

There is my implementation for iOS (with custom 'searchField')

using CoreGraphics; using Foundation; using MyControls; using MyRenderer; using UIKit; using Xamarin.Forms; [assembly: ExportRenderer(typeof(MySearchContentPage), typeof(MySearchContentPageRenderer))] namespace IOS.Renderer { using Xamarin.Forms.Platform.iOS; public class MySearchContentPageRenderer : PageRenderer { public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated); SetSearchToolbar(); } public override void WillMoveToParentViewController(UIKit.UIViewController parent) { base.WillMoveToParentViewController(parent); if (parent != null) { parent.NavigationItem.RightBarButtonItem = NavigationItem.RightBarButtonItem; parent.NavigationItem.TitleView = NavigationItem.TitleView; } } private void SetSearchToolbar() { var element = Element as MySearchContentPage; if (element == null) { return; } var width = NavigationController.NavigationBar.Frame.Width; var height = NavigationController.NavigationBar.Frame.Height; var searchBar = new UIStackView(new CGRect(0, 0, width * 0.85, height)); searchBar.Alignment = UIStackViewAlignment.Center; searchBar.Axis = UILayoutConstraintAxis.Horizontal; searchBar.Spacing = 3; var searchTextField = new MyUITextField(); searchTextField.BackgroundColor = UIColor.FromRGB(239, 239, 239); NSAttributedString strAttr = new NSAttributedString("Search", foregroundColor: UIColor.FromRGB(146, 146, 146)); searchTextField.AttributedPlaceholder = strAttr; searchTextField.SizeToFit(); // Delete button UIButton textDeleteButton = new UIButton(new CGRect(0, 0, searchTextField.Frame.Size.Height + 5, searchTextField.Frame.Height)); textDeleteButton.Font = UIFont.FromName("FontAwesome", 18f); textDeleteButton.BackgroundColor = UIColor.Clear; textDeleteButton.SetTitleColor(UIColor.FromRGB(146, 146, 146), UIControlState.Normal); textDeleteButton.SetTitle("\uf057", UIControlState.Normal); textDeleteButton.TouchUpInside += (sender, e) => { searchTextField.Text = string.Empty; }; searchTextField.RightView = textDeleteButton; searchTextField.RightViewMode = UITextFieldViewMode.Always; // Border searchTextField.BorderStyle = UITextBorderStyle.RoundedRect; searchTextField.Layer.BorderColor = UIColor.FromRGB(239, 239, 239).CGColor; searchTextField.Layer.BorderWidth = 1; searchTextField.Layer.CornerRadius = 5; searchTextField.EditingChanged += (sender, e) => { element.SetValue(MySearchContentPage.SearchTextProperty, searchTextField.Text); }; searchBar.AddArrangedSubview(searchTextField); var searchbarButtonItem = new UIBarButtonItem(searchBar); NavigationItem.SetRightBarButtonItem(searchbarButtonItem, true); NavigationItem.TitleView = new UIView(); if (ParentViewController != null) { ParentViewController.NavigationItem.RightBarButtonItem = NavigationItem.RightBarButtonItem; ParentViewController.NavigationItem.TitleView = NavigationItem.TitleView; } } } } 

There is also a discussion: How to enable viewing in the NavigationBar of Xamarin forms?

I hope you understand the main idea.

Answer 2

 <SearchBar x:Name="searchBar" Placeholder="Search" Text="{Binding SearchedText, Mode=TwoWay}" SearchCommand="{Binding SearchCommand}"/>