question

BubbaJones-9922 avatar image
0 Votes"
BubbaJones-9922 asked BubbaJones-9922 commented

Adding Search Icon to Toolbar

93525-code.txt

I have been trying to insert a search control in a toolbar. I understand that in order to do this I need to write a custom renderer. I have based myself on the following:

https://codetraveler.io/2019/10/05/adding-a-search-bar-to-xamarin-forms-navigationpage/

With the complete solution found here:

https://github.com/brminnick/GitTrends

I have integrated the relevant portions of the above solution into my project. However despite my best efforts have not been able to get the search icon to appear in my toolbar. My code is displayed below. When I debug the SearchPageRenderer.cs in the android project, OnElementChanged gets called which then calls AddSearchToToolbar. This behavior is correct. In AddSearchToToolbar all the if statements in it check out which is also correct. Still no search icon appears in the toolbar. Its been a week and i'm all out of ideas at this point.

If there are other more simple solutions to implementing this, i'm all ears. This has been my first (and very unpleasent) experience with custom renderers.

My relevant code is viewable in the attachment.


dotnet-xamarin
code.txt (3.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered BubbaJones-9922 commented

Hello,​

Welcome to our Microsoft Q&A platform!

If there are other more simple solutions to implementing this

To display a view in Navigation Bar, you could just use the NavigationPage.TitleView.

<ContentPage ...>
    <NavigationPage.TitleView>
        <SearchBar />
    </NavigationPage.TitleView>
    
    <ContentPage.Content>
        ...
    </ContentPage.Content>
</ContentPage>

Check the doc: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar

Best Regards,

Jarvan Zhang



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for the reply. I got my sample to work; basically I needed my tabbed page (which was to have the search icon) to be a navigation page. I confused toolbar and navigation page.

That said I would like to simplify this as much as possible and will look into seeing if I can implement a solution based on your suggestion as I believe having to maintain custom renderers will be hell in the long run.

1 Vote 1 ·