Xamarin Community Toolkit TabView height

Question

У меня есть представление с изображениями и текстами вверху. Внизу у меня есть TabView с разными TabViewItems. Каждый элемент TabViewItem имеет разную высоту, поскольку каждый из них имеет разное содержимое.

Я хочу, чтобы высота TabView соответствовала высоте TabViewItem, который выше, но я не могу этого сделать.

Если я не укажу свойство TabContentHeight, будут показаны только заголовки TabView, и если я добавлю к нему размер, содержимое TabViewItems будет обрезано. Как правильно это сделать?

Answer 1

Проверьте эту статью для 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 просто предоставляет пользовательский интерфейс:

• Значок и этикетка
• Только значок
• Только текст

И размер его фиксирован.

Вы можете изменить цвет фона для активного / неактивного состояния.

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>