How to add search bar in navigation bar of tabbed page - xamarin.forms

Question

I am using the xamarin. forms application, where there will be two tabs with a search icon in the navigation bar. What I wanted here to implement is, when the search icon is tapped all the navigation bar and the tabs should disappear and open the search bar with respect to the current tab.
The example: initially, the page will be like as
when the search icon is tapped, I want the view as follows.
how can it be achieved?

Answer 1

You can use Xamarin's latest Xamarin.Forms Shell to achieve tabbed page kind of Layout.
Refer to following code structure:
AppShell.Xaml
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:ProjectName.Views"
x:Class="ProjectName.AppShell">
<Tab>
<ShellContent
Title="Page1"
ContentTemplate="{DataTemplate views:Page1}" />
<ShellContent
Title="Page2"
ContentTemplate="{DataTemplate views:Page2}" />
</Tab>
</Shell>
Page1.Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ProjectName.Views.Page1"
Title="Page1">
<Shell.SearchHandler>
<SearchHandler Placeholder="Enter search term"/>
</Shell.SearchHandler>
<ContentPage.Content>
<!--Get you desired content here-->
</ContentPage.Content>
</ContentPage>
Output: