Search code examples
asp.net-mvcxamarin.formsxamarin.androidsearchbarandroid-navigation-bar

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");  


Solution

  • you could set the NavigationPage.TitleView to achive the effect.

    like in c# Code :

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

    or in xaml :

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageTitleView.TitleViewPage">
      <NavigationPage.TitleView>
        <SearchBar HeightRequest="44" WidthRequest="300" />
      </NavigationPage.TitleView>
       ...
    </ContentPage>