Xamarin Forms 101: How to put an Entry or Search View in the Navigation Bar

Are you wondering how you can create an entry or search bar in the navigation bar of your Xamarin Forms app?

Can’t find an easy way on how to include an entry or search view in your navigation bar?

In this post, you will learn how to create your first entry or search in a navigation bar without using any NuGet package.

By default, you can’t put an entry inside your navigation bar in Xamarin Forms without creating a custom renderer. That takes time to figure out how to do it. However, there’s a workaround for doing that. Here are the steps.

 

Step 1:

On your App.xaml.cs, wrap your page with NavigationPage. Do this especially if you’re planning to navigate to another page.

 

Step 2:

Create a BoxView inside a GridLayout. This BoxView will act as your Navigation bar.

Overlay your SearchBar or Entry on top of your BoxView. Position it properly to make it look like a real NavigationBar with a SearchBar overlaying on it.

 

Step 3:

Now remove the UI of the real NavigationBar. Otherwise, this will create two NavigationBars on your page.

You can see below that I’ve created a collection of Person where you can query a Person by its name.

Here’s the link to the GitHub repo of this demo.

https://github.com/webmasterdevlin/SearchOnNavBarDemo

Step 4:

Build and run your project. Try to search in the SearchBar.

 

Overall, creating an Entry or SearchBar in NavigationPage is like walk-in-a-park if you follow the steps above. You can do it in 5 minutes.

See you on my next blog. Happy coding.



2 Comments

  • Aritra Das

    Very nice tutorial, but the links given for the images seem to be not working.
    Can you tell what would be the best way to load the images?
    Having them hosted somewhere loading at runtime or having them saved locally when the app gets a network connection?

    • Devlin

      Thank you. You can locally include your 50×50 images in these folders. Android Project -> Resources -> drawable and iOS Project -> Resources. Then change the format of your image’s addresses from to