xamarin - Xamarin 社区工具包 TabView 高度

Question

我有一个顶部有图像和文本的视图。在底部，我有一个带有不同 TabViewItems 的 TabView。每个 TabViewItem 都有不同的高度，因为每个都有不同的内容。

我希望 TabView 的高度与更高的 TabViewItem 的高度相匹配，但我做不到。

如果我不指定 TabContentHeight 属性，则仅显示 TabView 标题，如果我为其设置大小，则 TabViewItems 的内容将被截断。正确的方法是什么？

Answer 1

如果您想要底部标签 UI，请查看此文章的 TabView。

1. https://devblogs.microsoft.com/xamarin/xamarin-community-toolkit-tabview/
2. https://www.sharpnado.com/pure-xamarin-forms-tabs/

但是你提到的你想要根据内容增加标签大小而不是我认为你不需要 tabview，你必须为此创建自己的 CustomView。

您还可以为此使用 Syncfusion 控件：https ://www.syncfusion.com/kb/11007/how-to-reduce-or-increase-the-tab-header-height-in-xamarin-forms-sftabview

TabView 只是为 UI 提供：

• 图标和标签
• 只有图标
• 只有文字

而且它的大小是固定的。

您可以更改其活动/非活动状态的背景颜色。

Answer 2

如果我不指定 TabContentHeight 属性，则仅显示 TabView 标题，如果我为其设置大小，则 TabViewItems 的内容将被截断。正确的方法是什么？

也许您可以尝试添加ScrollView以TabViewItem包含内容。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Image Source="waterfront.jpg" />
    <Label Grid.Row="1" Text="this is test" />
    <Grid Grid.Row="2">
        <xct:TabView
            TabContentBackgroundColor="Yellow"
            TabIndicatorColor="Yellow"
            TabStripBackgroundColor="Blue"
            TabStripHeight="60"
            TabStripPlacement="Bottom">

            <xct:TabViewItem
                FontSize="12"
                Icon="triangle.png"
                Text="Tab 1"
                TextColor="White"
                TextColorSelected="Yellow">
                <ScrollView>
                    <StackLayout BackgroundColor="Gray">

                        <Label
                            HorizontalOptions="Center"
                            Text="TabContent1"
                            VerticalOptions="Center" />
                        <Image  Source="waterfront.jpg" />
                        <Image  Source="internet.png" />
                    </StackLayout>
                </ScrollView>
            </xct:TabViewItem>

            <xct:TabViewItem
                FontSize="12"
                Icon="circle.png"
                Text="Tab 2"
                TextColor="White"
                TextColorSelected="Yellow">
                <Grid>
                    <Label
                        HorizontalOptions="Center"
                        Text="TabContent2"
                        VerticalOptions="Center" />
                </Grid>
            </xct:TabViewItem>
        </xct:TabView>
    </Grid>
</Grid>