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 3
  • 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

Sign In or Register to comment.