Searchbar in Navigation bar Or TabbedPage

GaganSinghGaganSingh USUniversity ✭✭✭

Hi, I was having trouble trying to get a searchbar inside the navigation bar. Then i read it wasn't possible because it only accepts ToolBarItems.
So now im trying to put the searchbar at the top of a tabbedpage where the navigation bar was. But it wont let me put anything other than a page in the TabbedPage.

<SearchBar Placeholder="Search"/>
<TabbedPage.Children>

    <custom:ContactsTab Title="Contacts" Icon="contacts_icon.png"/>
    <custom:ConversationsTab Title="Conversations" Icon="conversations_icon.png"/>

</TabbedPage.Children>

Posts

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    I had this problem not so long ago. You have 2 options.

    1. You go platform native and override the title or actionbar etc in each platform with a custom header.

    2. This would be the best approach as I had such a pain with the above method and for some reason this slipped my mind. Another programmer mentioned you can add a sub view into the NavigationPage. So I would create a NavigationPage, add in the Tabbed page to that, then add a view in the Navigation Page.

    I haven't done point 2 yet. I need to do it this week maybe, so I will write it up once I figure it out and confirm that it is possible.

  • GaganSinghGaganSingh USUniversity ✭✭✭

    I actually ended up just adding the search bar to a content page and then added the content page to the tabbedpage. That way i could still have other content inside the content page besides the search bar.

    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand"> <SearchBar x:Name="searchFor" Placeholder="Search" Text="{Binding Path=SearchText}" TextChanged="OnValueChanged" SearchButtonPressed="OnSearch" /> <StackLayout x:Name="segmentStax" Padding="10,5,10,10"/> </StackLayout>

  • BhaurajBiradarBhaurajBiradar USUniversity ✭✭

    I have the same problem. Above solution didn't worked for me, because I have 8 content pages inside tabbed page and I have to place Save and Submit button above tabbed tool bar. Is there any solution?

  • FifobuffersFifobuffers USMember

    @AdamP said:
    I had this problem not so long ago. You have 2 options.

    1. You go platform native and override the title or actionbar etc in each platform with a custom header.

    2. This would be the best approach as I had such a pain with the above method and for some reason this slipped my mind. Another programmer mentioned you can add a sub view into the NavigationPage. So I would create a NavigationPage, add in the Tabbed page to that, then add a view in the Navigation Page.

    I haven't done point 2 yet. I need to do it this week maybe, so I will write it up once I figure it out and confirm that it is possible.

    Point 2 is perfect, just tested on Android+iOS, thanks for the tip @AdamP

  • QwinQwin USUniversity ✭✭

    @Fifobuffers @AdamP hey guys just wondering but HOW do you add a subview to the NavigationPage.

  • codercamposcodercampos SVMember ✭✭

    @Qwin said:
    @Fifobuffers @AdamP hey guys just wondering but HOW do you add a subview to the NavigationPage.

    I think they were talking about: iOS side or NavigationPageRenderer

  • YuraBabiyYuraBabiy UAMember ✭✭✭

    @AdamP @Fifobuffers
    Could you please share your code of the second point?

  • iAlexeyiAlexey USMember
    edited January 2017
  • GaganSinghGaganSingh USUniversity ✭✭✭
    > @iAlexey said:
    > Brothers and sisters, that is the way to do it
    > http://stackoverflow.com/questions/27378981/how-to-use-searchview-in-toolbar-android

    The question is asking for Xamarin.Forms. Not Android.
  • Nobody to help about problem. I has error about topic in Xamarin Cross Platform too.

  • nattarSanthanarajnattarSanthanaraj USMember ✭✭

    Hi guys,
    I want the title in the Navigated page when the items clicked in the navigation drawer list. the page appears but there is no title. Please, any one helps me. thanks in advance

  • predalphapredalpha FRMember ✭✭

    @AdamP : Have you figured to insert layout on NavigationPage ? Still interested by the point 2 you mentionned.

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @predalpha - coming back to this after a few years, but a TabbedPage, will be a root element, hence nothing can be inserted above it, except for the Navigation Bar.

    You can either create custom renderers for each platform's navigation bar and try to add or remove as necessary. A small example of a CR for NavigationBar, removing an icon (https://gist.github.com/Vaikesh/f86d1968c8166519f102)

    Or, use a CarouselView, as that can be placed inside a Page and you can have other views inserted above or below it.

  • predalphapredalpha FRMember ✭✭

    Thank you for your answer @AdamP

    Will try CustomRenderer solution even if i dont know how to add a template on the fly.
    Cause all the carouselview i have already tried contain an input bug overlay with the softkeyboard on UWP (phone / tablet)

  • kavya16kavya16 USMember ✭✭

    Hi All,

    Was anyone able to place SearchBar above and place the different tabbedpages below it in Xamarin.Forms?
    Please help.

    Thanks & Regards,
    Kavya

  • adityadeshpandeadityadeshpande Member ✭✭

    @Fifobuffers said:

    @AdamP said:
    I had this problem not so long ago. You have 2 options.

    1. You go platform native and override the title or actionbar etc in each platform with a custom header.

    2. This would be the best approach as I had such a pain with the above method and for some reason this slipped my mind. Another programmer mentioned you can add a sub view into the NavigationPage. So I would create a NavigationPage, add in the Tabbed page to that, then add a view in the Navigation Page.

    I haven't done point 2 yet. I need to do it this week maybe, so I will write it up once I figure it out and confirm that it is possible.

    Point 2 is perfect, just tested on Android+iOS, thanks for the tip @AdamP

    @Fifobuffers @AdamP It would be great help if you guys could share the code. I'm Stuck at a point where i want to have my default nav bar and then override it with 2 different nav bars one having search bar in it and other having custom buttons on it, all conditionally bind. how do i do this? i tried going by @AdamP 's second approach but i guess i messed up somewhere. @Fifobuffers can you please share how you got through it? Thanks

  • RCarvalhoRCarvalho PTMember ✭✭

    @adityadeshpande I found this one (https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews/), but this is only for Android using Xamarin.Forms, maybe give it a try and tell us some feedback :)

  • adityadeshpandeadityadeshpande Member ✭✭

    @RCarvalho said:
    @adityadeshpande I found this one but this is only for Android using Xamarin.Forms, maybe give it a try and tell us some feedback :)

    trying the same, but this needs too many changes (including Resource.Designer.cs) and still not working.
    also. i need 2 layouts that could be switched n top of default nav bar.
    and i don't understand how to achieve it by this approach.

  • adityadeshpandeadityadeshpande Member ✭✭

    @RCarvalho I worked more on that. that thing works for search bar.
    i'll write a blog about the extra things that i did to make it work. :)
    however i am unable to throw in my extra buttons in that nav bar. if you get a way around then please let me know
    thanks :#

  • RCarvalhoRCarvalho PTMember ✭✭

    @adityadeshpande well, i built that and figured that it only appears the search bar before API 22, did you find any solution for earlier API's?

  • adityadeshpandeadityadeshpande Member ✭✭

    @RCarvalho said:
    @adityadeshpande well, i built that and figured that it only appears the search bar before API 22, did you find any solution for earlier API's?

    No fortune so far, will surely revert back if i get to some solution or conclusion :smile:

  • JosueSamanoJosueSamano USMember ✭✭

    I'm using Prism.Unity.Forms
    How do I add my search icon to my navigation bar?

    My scenario is this:
    Login -> MasterDetail -> Categories (ListView and wanna my Search here)
    -> Employes (ListView and wanna my Search here)

    Categories is a ContentPage, it is not my root, my root is my MasterDetail, it displays a ContentPage of Categories, which has a list

    I have my Android and iOS projects

    Thanks

  • michaelitohmichaelitoh USMember ✭✭
    1. You go platform native and override the title or actionbar etc in each platform with a custom header.

    @AdamP Can you share this code?

  • RedoRedo IDMember ✭✭

    As per Xamarin Forms 3.2 in release version, you can use NavigationPage.TitleView

Sign In or Register to comment.