将 Xamarin Forms TabView 添加到 ContentPage 的中间

Question

我正在为我的应用程序使用 Xamarin 社区工具包 TabView。我想将静态 StackLayout 添加到页面顶部，然后将 TabView 底部添加到该视图并将选项卡 headers 添加到页面底部。在 Android 中，它按我的意愿工作。但不在iOS。 TabView 项目被静态 StackLayout 隐藏。

我想要这样的东西。

XAML...

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="B_Connect_revamp.Challenges.General.GC2021.views.Tab1View">

    <ContentPage.ToolbarItems>
        <ToolbarItem  Name="Settings" Icon="iconSetting.png" Priority="0" Order="Primary" Clicked="Settings_Clicked" />
    </ContentPage.ToolbarItems>

    <ContentPage.Content>

        <Grid>

            <Grid>

                <StackLayout Orientation="Vertical">

                    <StackLayout Margin="0" Orientation="Vertical" IsVisible="{Binding hasData}">

                            <yummy:PancakeView BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1" VerticalOptions="Start" Padding="10" CornerRadius="0,0,15,15" HorizontalOptions="FillAndExpand">

                                <yummy:PancakeView.Shadow>

                                    <yummy:DropShadow Offset="0,1" Color="Gray">

                                        <yummy:DropShadow.Opacity>

                                            <OnPlatform x:TypeArguments="x:Single">

                                                <On Platform="Android" Value="0.1" />
                                                <On Platform="iOS" Value="0.1" />

                                            </OnPlatform>

                                        </yummy:DropShadow.Opacity>

                                    </yummy:DropShadow>

                                </yummy:PancakeView.Shadow>

                                <yummy:PancakeView.BackgroundGradientStops>

                                    <yummy:GradientStopCollection>

                                        <yummy:GradientStop Color="{StaticResource NavigationBarBackColor}" Offset="0"/>

                                        <yummy:GradientStop Color="{StaticResource NavigationBarBackColor}" Offset="0.5"/>

                                        <yummy:GradientStop Color="#00818c" Offset="1"/>

                                    </yummy:GradientStopCollection>

                                </yummy:PancakeView.BackgroundGradientStops>

                                <StackLayout Orientation="Vertical">

                                    <Label Text="{Binding agName}" FontFamily="{StaticResource RalewayM}" Margin="0,2,0,0" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" FontSize="20" TextColor="White"/>

                                    <Label Text="{Binding agCategory}" FontFamily="{StaticResource quicksandsMedium}" Margin="0" HorizontalOptions="CenterAndExpand" FontSize="16" TextColor="White"/>

                                    </StackLayout>

                                </StackLayout>

                            </yummy:PancakeView>

                    </StackLayout>

                    <xct:TabView VerticalOptions="FillAndExpand" IsVisible="{Binding hasData}" IsSwipeEnabled="True" TabStripPlacement="Bottom">

                        <xct:TabViewItem Text="MONTHLY" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">

                            <xct:TabViewItem.Content>

                                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">

                                    <StackLayout Orientation="Vertical" Spacing="0">

                                        <Label Text="{Binding monthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>

                                    </StackLayout>

                                </Frame>

                            </xct:TabViewItem.Content>

                        </xct:TabViewItem>

                        <xct:TabViewItem Text="SIX MONTH" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">

                            <xct:TabViewItem.Content>

                                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">

                                    <StackLayout Orientation="Vertical" Spacing="0">

                                        <Label Text="{Binding sixMonthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>

                                    </StackLayout>

                                </Frame>

                            </xct:TabViewItem.Content>

                        </xct:TabViewItem>

                        <xct:TabViewItem Text="SUMMIT" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">

                            <xct:TabViewItem.Content>

                                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">

                                    <StackLayout Orientation="Vertical" Spacing="0">

                                        <Label Text="{Binding sixMonthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>

                                        <Label Text="New business total" FontSize="15" Margin="0,15,0,0" HorizontalOptions="CenterAndExpand" FontFamily="{StaticResource quicksandsMedium}" TextColor="#546e7a"/>
            
                                    </StackLayout>

                                </Frame>

                            </xct:TabViewItem.Content>

                        </xct:TabViewItem>

                    </xct:TabView>

                    <StackLayout VerticalOptions="Center" HorizontalOptions="Center" IsVisible="{Binding noData}">

                        <Image Source="not_available.jpg" VerticalOptions="Center" HorizontalOptions="Center"/>

                    </StackLayout>

                </StackLayout>

            </Grid>

            <StackLayout>
                
            </StackLayout>

        </Grid>

    </ContentPage.Content>

</ContentPage>

在 iOS 中，滑动区域的顶部被静态 StackLayout 隐藏。

Answer 1

首先，你的xmal不正确，Element没有关闭。

其次，您没有使用 Grid.Row 来限制布局的位置。

您可以像下面这样定义 Grid.RowDefinitions，然后重新设计。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackLayout Grid.Row="0" Margin="0" Orientation="Vertical" IsVisible="{Binding hasData}">

        <yummy:PancakeView BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1" VerticalOptions="Start" Padding="10" CornerRadius="0,0,15,15" HorizontalOptions="FillAndExpand">

            <yummy:PancakeView.Shadow>

                <yummy:DropShadow Offset="0,1" Color="Gray">

                    <yummy:DropShadow.Opacity>

                        <OnPlatform x:TypeArguments="x:Single">

                            <On Platform="Android" Value="0.1" />
                            <On Platform="iOS" Value="0.1" />

                        </OnPlatform>

                    </yummy:DropShadow.Opacity>

                </yummy:DropShadow>

            </yummy:PancakeView.Shadow>

            <yummy:PancakeView.BackgroundGradientStops>

                <yummy:GradientStopCollection>

                    <yummy:GradientStop Color="{StaticResource NavigationBarBackColor}" Offset="0"/>

                    <yummy:GradientStop Color="{StaticResource NavigationBarBackColor}" Offset="0.5"/>

                    <yummy:GradientStop Color="#00818c" Offset="1"/>

                </yummy:GradientStopCollection>

            </yummy:PancakeView.BackgroundGradientStops>

            <StackLayout Orientation="Vertical">

                <Label Text="{Binding agName}" FontFamily="{StaticResource RalewayM}" Margin="0,2,0,0" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" FontSize="20" TextColor="White"/>

                <Label Text="{Binding agCategory}" FontFamily="{StaticResource quicksandsMedium}" Margin="0" HorizontalOptions="CenterAndExpand" FontSize="16" TextColor="White"/>

            </StackLayout>


    </yummy:PancakeView>

    </StackLayout>
    <xct:TabView Grid.Row="1"  VerticalOptions="FillAndExpand" IsVisible="{Binding hasData}" IsSwipeEnabled="True" TabStripPlacement="Bottom">

        <xct:TabViewItem Text="MONTHLY" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">

            <xct:TabViewItem.Content>

                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">

                    <StackLayout Orientation="Vertical" Spacing="0">

                        <Label Text="{Binding monthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>

                    </StackLayout>

                </Frame>

            </xct:TabViewItem.Content>

        </xct:TabViewItem>

        <xct:TabViewItem Text="SIX MONTH" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">

            <xct:TabViewItem.Content>

                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">

                    <StackLayout Orientation="Vertical" Spacing="0">

                        <Label Text="{Binding sixMonthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>

                    </StackLayout>

                </Frame>

            </xct:TabViewItem.Content>

        </xct:TabViewItem>

        <xct:TabViewItem Text="SUMMIT" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">

            <xct:TabViewItem.Content>

                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">

                    <StackLayout Orientation="Vertical" Spacing="0">

                        <Label Text="{Binding sixMonthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>

                        <Label Text="New business total" FontSize="15" Margin="0,15,0,0" HorizontalOptions="CenterAndExpand" FontFamily="{StaticResource quicksandsMedium}" TextColor="#546e7a"/>

                    </StackLayout>

                </Frame>

            </xct:TabViewItem.Content>

        </xct:TabViewItem>

    </xct:TabView>
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center" Grid.RowSpan="2" IsVisible="{Binding noData}">


        <Image Source="not_available.jpg" VerticalOptions="Center" HorizontalOptions="Center"/>

    </StackLayout>
</Grid>

将 Xamarin Forms TabView 添加到 ContentPage 的中间

Add Xamarin Forms TabView to middle of the ContentPage

tabview

xamarin.forms