2

我想在 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>

但它又创建了一个标签。我不知道如何实现这一点。我没有得到任何解决方案。有什么建议么？

注意：

我有导航标签标题和底部导航栏的代码。我想让它们在两个标签页中保持通用。所以它必须以与搜索选项卡相同的方式实现。

4

2 回答 2

0

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

于 2018-12-04T08:24:05.723 回答
0

您不能在 a 中添加(Content)Pagea (Tabbed)Page。你必须改变你的布局，所以你有一个ContentPage和里面，你添加一个Label（标题“探索”）SearchBar，自定义标签（不是TabbedPage）和列表......

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

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

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

如果你有最新的 Xamarin Forms nuget 包（从 3.1 开始），你可以在底部添加选项卡。

于 2018-12-04T07:54:55.890 回答