title: How to bring a search tab on top tabbed page in xamarin forms?
body: <p>I want to bring a search tab on top of a tabbed page in Xamarin Forms. This is the UI I want to implement.</p>
  
  <p><a href="https://i.stack.imgur.com/RPmkI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RPmkI.png" alt=""></a></p>
  
  <p>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</p>
  
  <pre><code>&lt;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"&gt;
      &lt;ContentPage&gt;
          &lt;StackLayout&gt;
              &lt;StackLayout Orientation="Horizontal"
               HorizontalOptions="FillAndExpand"
               Padding="5"&gt;
  
  
                  &lt;Label TextColor="#606060" FontSize="Large" Text="EXPLORE"
                  HorizontalOptions="CenterAndExpand"/&gt;
  
              &lt;/StackLayout&gt;
              &lt;BoxView  Color="#E0E0E0" WidthRequest ="80" HeightRequest="1"/&gt;
              &lt;Frame CornerRadius="10" Padding="0" OutlineColor="DarkGray" HasShadow="True" HorizontalOptions="Fill"  Margin="10,0,10,0" VerticalOptions="Center"&gt;
                  &lt;pages:searchTab x:Name="searchBar"  Placeholder="Search" PlaceholderColor="Black" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Center" /&gt;
  
              &lt;/Frame&gt;
          &lt;/StackLayout&gt;
      &lt;/ContentPage&gt;
      &lt;TabbedPage.Children&gt;
          &lt;NavigationPage Title="VENDOR NAME"&gt;
              &lt;x:Arguments&gt;
                  &lt;pages:TabbedPageExampleTab1 /&gt;
              &lt;/x:Arguments&gt;
          &lt;/NavigationPage&gt;
  
          &lt;NavigationPage Title="PRODUCT/SERVICE"&gt;
              &lt;x:Arguments&gt;
                  &lt;pages:TabbedPageExampleTab2 /&gt;
              &lt;/x:Arguments&gt;
          &lt;/NavigationPage&gt;
      &lt;/TabbedPage.Children&gt;
  
  &lt;/TabbedPage&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>Note</strong>:</p>
  
  <p>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.</p>