Searchbar in Navigation bar Or TabbedPage

GaganSinghGaganSingh Gagandeep SinghUSUniversity ✭✭✭

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 Adam Pedley 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 Gagandeep Singh 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 Bhauraj Biradar 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 Japhia Olson 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 Robert Al Malak USUniversity ✭✭

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

  • codercamposcodercampos Carlos Campos 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 Yura Babiy UAMember ✭✭✭

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

  • iAlexeyiAlexey Alexey Shevelyov USMember
    edited January 3
  • GaganSinghGaganSingh Gagandeep Singh 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.
  • SiwakornApichitsopaSiwakornApichitsopa Siwakorn Apichitsopa USMember

    Nobody to help about problem. I has error about topic in Xamarin Cross Platform too.

  • nattarSanthanarajnattarSanthanaraj nattar Santhanaraj 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 Richard TORRE FRMember ✭✭

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

  • AdamPAdamP Adam Pedley 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 Richard TORRE 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 kavya bajaj 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.