1

I have a view that has images and texts at the top. At the bottom I have a TabView with different TabViewItems. Each TabViewItem has a different height since each one has different content.

I want the height of the TabView to match the height of the TabViewItem that is taller, but I can't do it.

If I don't specify the TabContentHeight property, only the TabView headers are shown and if I put a size to it, the content of the TabViewItems is cut off. What would be the correct way to do it?

Rocoso
  • 193
  • 1
  • 10
  • 1
    Could you post your xaml code please? "different content" means label length or icon size or sth else? – Shaw Jul 12 '21 at 09:01
  • I have 4 TabViewItems. One has a gallery with several images (you can have only 1 or several). Another TabViewItem has text, it can be little or a lot with many lines and other similar TabViewItems. Everyone can grow in content, therefore I need the TabView to grow as well. – Rocoso Jul 12 '21 at 09:36
  • You can try setting TabStripHeight, it should help – slprog1 Mar 20 '22 at 21:19
  • try set the HeightRequest on xct:TabView instead of TabContentHeight – TouchBoarder Aug 04 '23 at 11:42

2 Answers2

1

Check this articles for TabView if you want bottom tabs UI.

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

But the what you mentioned that you want to grow tab size according to content than I think you do not need tabview, you have to create your own CustomView for that.

You can also use Syncfusion control for this: https://www.syncfusion.com/kb/11007/how-to-reduce-or-increase-the-tab-header-height-in-xamarin-forms-sftabview

TabView just provide UI with:

  • Icon and Label
  • Only Icon
  • Only Text

And its size is fixed.

You can change its background color for active/inactive state.

Divyesh
  • 2,085
  • 20
  • 35
0

If I don't specify the TabContentHeight property, only the TabView headers are shown and if I put a size to it, the content of the TabViewItems is cut off. What would be the correct way to do it?

Maybe you can try to add ScrollView in TabViewItem to contain content.

<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>
Cherry Bu - MSFT
  • 10,160
  • 1
  • 10
  • 16
  • Yes, that is the only solution I have found. I have also researched on the painting events but I cannot change the size of the TabView at runtime, although I can determine the size of the largest TabViewItem and apply it to the TabContentHeight property it does not change the size. – Rocoso Jul 13 '21 at 06:39
  • In case it is not clear, I add this link. https://www.iherb.com/pr/country-life-natural-omega-3-1-000-mg-300-softgels/9707 The effect I want to achieve is that of this website, which also works the same in its APP version. Each product has a Tab with different TabItems and the tab always occupies the entire screen. There is not a Scroll within each tab. – Rocoso Jul 13 '21 at 06:44
  • @Rocoso It looks different from tabview, maybe you can try to create custom dialog when press label. – Cherry Bu - MSFT Jul 13 '21 at 08:44
  • The mobile version of Iherb (open the web with the Chorme simulating a mobile phone) and the APP has a TabView at the bottom with different pages (Overview, Details, Reviews ...) Each product has those TabItems with different sizes, depending on the product, the Tabs are adjusted in height. I want to get similar functionality with the TabView but I can't. – Rocoso Jul 13 '21 at 09:21
  • @Rocoso Maybe you can try to search some third party to achieve it. – Cherry Bu - MSFT Jul 14 '21 at 06:36