How to include Search Bar in to Navigation Page

So, i need to include Search Bar in to Navigation Page or Navigation Bar, but I can’t understand how do this programmatically. I can create Search Bar in App.cs but can’t include it in Navigation Bar( I work on Xamarin.Forms and RestApi in ASp.NetCore. Please help me!

Result in Android.Sdk

protected async override void OnStart(){

HttpResponseMessage response = await client.GetAsync("http://192.168.1.6:5000/api/Events");

                if (response.StatusCode == HttpStatusCode.OK)
                {
                    HttpContent responseContent = response.Content;
                    var json = await responseContent.ReadAsStringAsync();
                    List<Event> Events = JsonConvert.DeserializeObject<List<Event>>(json);
                    MainPage page =  new MainPage();
                    StackLayout MyButtons = new StackLayout()
                    {
                        Orientation = StackOrientation.Vertical,
                        HorizontalOptions = LayoutOptions.FillAndExpand,
                    };
                    SearchBar search = new SearchBar
                    {
                        Placeholder = "Search items...",
                        PlaceholderColor = Color.Gray,
                        TextColor = Color.Gray,
                        HorizontalTextAlignment = TextAlignment.End,
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.Start,
                        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(SearchBar)),
                        FontAttributes = FontAttributes.Italic,
                    };
                    search.SearchButtonPressed += OnSearchButtonPressed;
                    Frame FrameSearch = new Frame()
                    {
                        BorderColor = Color.Gray,
                        CornerRadius = 10,
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.Start,
                        HeightRequest = 40,
                        WidthRequest = 180,
                        HasShadow = true,
                        Margin = new Thickness(0,10,0,0),
                        Padding = new Thickness(0),
                        Content = new StackLayout
                        {
                            Padding = 0,
                            Children =
                            {
                                search                  
                            }
                        }
                    };                
                    MyButtons.Children.Add(FrameSearch);                
                    foreach (var item in Events)
                    {
                        var btn = new Button()
                        {
                            Text = item.Name, //Whatever prop you wonna put as title;
                            StyleId = item.EventId.ToString(), //use a property from event as id to be passed to handler
                            BorderRadius = 50,
                            FontSize = 30,
                            BorderColor = Color.Black,
                            FontAttributes = FontAttributes.Bold,
                            Margin = new Thickness(2, 5, 2, 0),
                            Padding = new Thickness(0),
                            HorizontalOptions = LayoutOptions.FillAndExpand
                        };
                        btn.Clicked += OnDynamicBtnClicked;
                        //Content = new ContentPage()
                        MyButtons.Children.Add(btn);
                    }
                    ScrollView scrollView = new ScrollView();
                    scrollView.Content = MyButtons;
                    page.Content = scrollView;
                    Application.Current.MainPage = new NavigationPage(page);
                    NavigationPage _Page = Application.Current.MainPage as NavigationPage;
                    _Page.BarBackgroundColor = Color.FromHex("009688");  

This Post Has One Comment

  1. No Fault

    Set the NavigationPage.TitleView to archive the effect.

    like in c# Code :

    public TitleViewPage()
    {
    InitializeComponent();
    var titleView = new SearchBar { HeightRequest = 44, WidthRequest = 300 };
    NavigationPage.SetTitleView(this, titleView);
    }
    or in xaml :

Leave a Reply