如何在标签页导航栏中添加搜索栏答案

【问题标题】：How to add search bar in navigation bar of tabbed page如何在标签页导航栏中添加搜索栏
【发布时间】：2019-08-03 04:03:02
【问题描述】：

我正在使用 xamarin。表单应用程序，其中导航栏中将有两个带有搜索图标的选项卡。我想在这里实现的是，当点击搜索图标时，所有导航栏和选项卡应该消失并相对于当前选项卡打开搜索栏。

示例：最初，页面会像这样

当点击搜索图标时，我想要如下视图。

如何实现？

【问题讨论】：

恐怕你得自己写布局。你不能简单地通过 shell 或 naviagtionbar 来实现它。

标签： xamarin.forms navigationbar searchbar tabbedpage

【解决方案1】：

您可以使用 Xamarin 最新的Xamarin.Forms Shell 来实现标签页式的布局。

参考以下代码结构：

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>

输出：

【讨论】：

嗨@Himanshu Dwivedi，抱歉，您的解决方案不符合我的要求，因为我希望在单击搜索图标时也必须隐藏这些选项卡。