CODEWITHSUNDEEP
xamarinxamarin.formstabviewxamarin-community-toolkit
Rocoso
Rocoso

Reputation: 293

Xamarin Community Toolkit TabView height

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?

Upvotes: 1

Views: 1865

Answers (2)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10356

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>

Upvotes: 0

Divyesh
Divyesh

Reputation: 2417

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.

Upvotes: 1

Related Questions