CODEWITHSUNDEEP
xamarin.formsnavigationbarsearchbartabbedpage
sahithi
sahithi

Reputation: 1089

How to add search bar in navigation bar of tabbed page

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

enter image description here

when the search icon is tapped, I want the view as follows.

enter image description here

how can it be achieved?

Upvotes: 0

Views: 1519

Answers (1)

Himanshu Dwivedi
Himanshu Dwivedi

Reputation: 8139

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:

enter image description here

Upvotes: 1

Related Questions