如何在选项卡式页面的导航栏中添加搜索栏

Question

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

示例：最初，页面将像

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

如何实现？

Answer 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>

输出：