Как вложить вкладки в Xamarin.Forms - PullRequest
Новая
       19

Как вложить вкладки в Xamarin.Forms

0 голосов
/ 18 января 2020

Я пытаюсь создать этот макет в Xamarin XAML, но не могу понять, как объединить TabView в TabView. Я хочу 3 основных вкладок внизу и для каждой страницы 1-2 вложенных вкладок. В каждой вложенной вкладке мне понадобится ScrollView (я думаю, это правильный элемент для использования) с элементами списка, что делает его еще более сложным. Понравилась эта картинка:

enter image description here

Есть идеи или указания, как этого добиться?

1 Ответ

0 голосов
/ 19 января 2020

Я пытаюсь создать эту компоновку в Xamarin XAML, но не могу понять, как объединить TabView в TabView.

Если вы хотите это сделать, вы можете вложить TabView на странице с вкладками.

TabView: https://github.com/chaosifier/TabView

Создание трех вкладок в папке представлений.

Страница с вкладками: 

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Views="clr-namespace:TabbedPageDemo.Views"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
BarBackgroundColor="Blue"
BarTextColor="White"
mc:Ignorable="d">

<Views:Tab1_Page Title="TAB1" />
<Views:Tab2_Page Title="TAB2" />
<Views:Tab3_Page Title="TAB3" />

</TabbedPage>

А затем используйте TabView на странице tab1.

Tab1_Page: 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="TabbedPageDemo.Views.Tab1_Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:local="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
    <local:TabViewControl>
        <local:TabViewControl.ItemSource>
            <local:TabItem HeaderText="SUBTAB1">
                <StackLayout VerticalOptions="Start" Padding="10">
                    <Button
                    BackgroundColor="White"                    
                    Text="List Item"
                    TextColor="Black"/>
                </StackLayout>                                                
            </local:TabItem>
            <local:TabItem HeaderText="SUBTAB2">
                <Image Source="pink.jpg" />
            </local:TabItem>
        </local:TabViewControl.ItemSource>
    </local:TabViewControl>
</ContentPage.Content>
</ContentPage>

Обратите внимание, если вы хотите сделать вкладки на вкладке внизу страницы. Добавьте приведенный ниже код в свою главную страницу. 

 On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

enter image description here

Образец кода можно загрузить с GitHub в TabbedPage_NestedTabView / TabbedPageDemo https://github.com/WendyZang/Test.git

...