如何在Xamarin表單的頂部選項卡式頁面上顯示搜索選項卡？

Question

我想在Xamarin Forms的選項卡式頁面頂部帶一個搜索選項卡。 這是我要實現的UI。

如您所見，在標簽供應商名稱和產品/服務上方會出現一個搜索欄。 我不知道如何實現它。 我已經嘗試過此代碼

<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">
    <ContentPage>
        <StackLayout>
            <StackLayout Orientation="Horizontal"
             HorizontalOptions="FillAndExpand"
             Padding="5">


                <Label TextColor="#606060" FontSize="Large" Text="EXPLORE"
                HorizontalOptions="CenterAndExpand"/>

            </StackLayout>
            <BoxView  Color="#E0E0E0" WidthRequest ="80" HeightRequest="1"/>
            <Frame CornerRadius="10" Padding="0" OutlineColor="DarkGray" HasShadow="True" HorizontalOptions="Fill"  Margin="10,0,10,0" VerticalOptions="Center">
                <pages:searchTab x:Name="searchBar"  Placeholder="Search" PlaceholderColor="Black" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />

            </Frame>
        </StackLayout>
    </ContentPage>
    <TabbedPage.Children>
        <NavigationPage Title="VENDOR NAME">
            <x:Arguments>
                <pages:TabbedPageExampleTab1 />
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="PRODUCT/SERVICE">
            <x:Arguments>
                <pages:TabbedPageExampleTab2 />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>

</TabbedPage>

但是它又創建了一個標簽。 我不知道該怎么實現。 我對此沒有任何解決方案。 有什么建議么？

注意事項 ：

我有用於導航選項卡標題和底部導航欄的代碼。 我想讓它們在選項卡式頁面中都通用。 因此，必須以與搜索選項卡相同的方式實施。

Answer 1

您不能在(Tabbed)Page內添加(Content)Page (Tabbed)Page 。 您必須更改布局，以便擁有一個ContentPage並且在其中具有一個Label （標頭“ Explore”）， SearchBar ，帶有列表的自定義標簽（不是TabbedPage）...

對於選項卡，您可以使用帶有按鈕的自定義布局構建來更改列表的可見性，也可以使用一些更高級的現有解決方案，例如Telerik的TabView或Rendy的Segmented Bar Control 。

用戶界面提示：從用戶界面的角度來看，如果您有一個帶有4 TabbedPage ，則您的模型可能會更好一些：

• 靠近我
• 搜索-如果用戶單擊添加，則可以動態更改購物車
• 大車
• 帳戶

如果您擁有最新的Xamarin Forms nuget軟件包（來自3.1），則可以在底部添加標簽 。

Answer 2

TabbedPage可以僅將內容頁面作為子頁面接受。 如果您想在導航欄頂部添加搜索視圖，則本文可以為您提供幫助https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews