2

I want to bring a search tab on top of a tabbed page in Xamarin Forms. This is the UI I want to implement.

As you can see a search bar on top of tab vendor name and product/service. I don't know how to implement it. I have tried this code

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:pages="clr-namespace:RestaurantApp"
            x:Class="RestaurantApp.SearchTabbedPage"
            NavigationPage.HasNavigationBar="False">
    <ContentPage>
        <StackLayout>
            <StackLayout Orientation="Horizontal"
             HorizontalOptions="FillAndExpand"
             Padding="5">


                <Label TextColor="#606060" FontSize="Large" Text="EXPLORE"
                HorizontalOptions="CenterAndExpand"/>

            </StackLayout>
            <BoxView  Color="#E0E0E0" WidthRequest ="80" HeightRequest="1"/>
            <Frame CornerRadius="10" Padding="0" OutlineColor="DarkGray" HasShadow="True" HorizontalOptions="Fill"  Margin="10,0,10,0" VerticalOptions="Center">
                <pages:searchTab x:Name="searchBar"  Placeholder="Search" PlaceholderColor="Black" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />

            </Frame>
        </StackLayout>
    </ContentPage>
    <TabbedPage.Children>
        <NavigationPage Title="VENDOR NAME">
            <x:Arguments>
                <pages:TabbedPageExampleTab1 />
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="PRODUCT/SERVICE">
            <x:Arguments>
                <pages:TabbedPageExampleTab2 />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>

</TabbedPage>

But it created one more tab. I don't know how to implement this. And I'm not getting any solution for this. Any suggestions?

Note:

I have the code for navigation tab title and bottom navigation bar. And I want to keep them common for both the tabbed page. So it has to be implemented in the same way as the search tab.

user3452
  • 349
  • 5
  • 20

2 Answers2

0

You can't add a (Content)Page inside a (Tabbed)Page. You have to change your layout, so you have a ContentPage and inside of it, you add a Label (Header "Explore"), SearchBar, Custom Tabs (not TabbedPage) with Lists...

For Tabs you can use either your custom layout build with buttons which change visibility of the Lists, or you can use some fancier existing solutions like TabView from Telerik, or Segmented Bar Control by Rendy.

UI Tips: From UI perspective your mockup could be a little better if you have one TabbedPage with 4 Children:

  • Near Me
  • Search - if the user clicks on Add, you can dynamically change the Cart
  • Cart
  • Account

If you have the newest Xamarin Forms nuget package (from 3.1), you can add tabs on the bottom.

Martinedo
  • 355
  • 3
  • 9
0

TabbedPage can accept content page as only children. If you want to add search view on top of navigation bar this article can help you https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews

Anmol Modi
  • 51
  • 6