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

您不能在(Content)Page内添加(Tabbed)Page。您必须更改布局，以便拥有一个ContentPage，并在其中添加Label（标题为“ Explore”），SearchBar，带有列表的自定义标签（非TabbedPage） ...

对于标签，您可以使用带有按钮的自定义布局构建来更改列表的可见性，也可以使用一些更高级的现有解决方案，例如TabView from Telerik或Segmented Bar Control by Rendy。

用户界面提示：从用户界面角度来看，如果您有一个TabbedPage有4个孩子，则您的模型可能会更好一些：

靠近我
搜索-如果用户点击添加，则可以动态更改购物车
购物车
帐户

如果您拥有最新的Xamarin Forms nuget软件包（来自3.1），则可以添加tabs on the bottom。

Answer 2

TabbedPage可以仅将内容页面作为子页面接受。如果您想在导航栏顶部添加搜索视图，则本文可以为您https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews

提供帮助

如何在Xamarin表单的顶部选项卡式页面上显示搜索选项卡？

2 个答案: