Xamarin Community toolkit : TabViewItem content not rendering inside TabView

Viewed 61

I am using Xamarin forms version (5.0.0.2515) and Xamarin community toolkit (2.0.4). I have tried to set TabViewItem content a normal label as well as a sample content view but none of them is rendering. Am I missing something or may be doing something wrong or anybody else recently faced similar issue with Xamarin community toolkit TabView.

Emulator Screenshot enter image description here

Sample code :

<ContentPage.Content>
    <ScrollView>
        <Grid RowDefinitions="220,Auto,auto,Auto,Auto,150" RowSpacing="5">
            <Image
            Aspect="Fill"
            Source="ocean.jpeg"
            HeightRequest="190"
            VerticalOptions="Fill"
            HorizontalOptions="Fill"/>
            <Label
            Margin="0,15,20,0"
            VerticalOptions="Start"
            HorizontalOptions="End"
            WidthRequest="30"
            FontSize="30"
            TextColor="White"
            FontFamily="Material"
            Text="&#xe87d;"/>
            <pancakeview:PancakeView Grid.Row="1" Margin="0,-20,0,0" CornerRadius="30,30,0,00">
                <Grid RowDefinitions="Auto,Auto,auto,Auto,10,Auto" BackgroundColor="white">
                    <Label Margin="9,10,6,0" HorizontalOptions="StartAndExpand">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span
                                FontFamily="FontMontserratMedium"
                                FontSize="Medium"
                                Text="Delhi"
                                TextColor="Black" />
                                <Span Text="    " FontSize="14"/>
                                <Span
                                FontSize="16"
                                FontFamily="Material"
                                Text="&#xea18;"
                                TextColor="Black" />
                                <Span 
                                Text="    " 
                                FontSize="Medium"/>
                                <Span
                                FontFamily="FontMontserratMedium"
                                FontSize="Medium"
                                Text="Kasol, Haridwar, Rishikesh"
                                TextColor="Black" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Label 
                    Margin="9,0,5,0" 
                    Grid.Row="1" 
                    Text="Monday, 25 July 2022 To Friday, 25 July 2022" 
                    FontSize="11" 
                    TextColor="Black"
                    HorizontalTextAlignment="Center"
                    HorizontalOptions="Start"/>
                    <Label 
                    Margin="9,0,5,0" 
                    Grid.Row="2" 
                    FontSize="Caption"
                    Text="Safar Partner Id: Safar2022"/>
                    <StackLayout
                    Margin="9,0,5,0" 
                    Grid.Row="3" 
                    Orientation="Horizontal" 
                    Spacing="15" 
                    HorizontalOptions="Start"
                    Padding="5">
                        <Label 
                    FontFamily="Material"
                    FontSize="26"
                    TextColor="Black"
                    Text="&#xe53a;" />
                        <Label 
                    FontFamily="Material"
                    FontSize="26"
                    Text="&#xe561;" />
                        <Label 
                            FontFamily="Material"
                            FontSize="26"
                            Text="&#xe3f7;" />
                        <Label 
                            FontFamily="Material"
                            FontSize="26"
                            Text="&#xe50a;" />
                        <Label 
                            FontFamily="Material"
                            Text="&#xea62;"
                            FontSize="26"/>
                        <Label 
                            FontFamily="Material"
                            FontSize="26"
                            Text="&#xe405;" />
                        <Label 
                            FontFamily="Material"
                            FontSize="26"
                            Text="&#xe576;" />
                    </StackLayout>
                    <StackLayout Grid.Row="3"
                             Margin="0,-20,5,5"
                             HorizontalOptions="End"
                             Orientation="Vertical"
                             Spacing="10">
                        <Label>
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span
                                            FontFamily="FontMontserratMedium"
                                            FontSize="14"
                                            Text="Rating"
                                            TextColor="Black" />
                                    <Span Text="  5" FontSize="14"/>
                                    <Span Text="  *" FontSize="15" TextColor="Gold"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                        <pancakeview:PancakeView CornerRadius="10">
                            <Label Text="View review" BackgroundColor="LightGreen"/>
                        </pancakeview:PancakeView>
                    </StackLayout>
                    <Label Grid.Row="4" BackgroundColor="LightGreen" Opacity="0.7"/>
                    <Grid Grid.Row="5">
                        <xct:TabView
                            TabStripPlacement="Top"
                            TabStripBackgroundColor="White"
                            TabStripHeight="40"
                            TabIndicatorColor="Green"
                            TabContentBackgroundColor="White">
                            <xct:TabViewItem
                                Text="Overview"
                                TextColor="Gray"
                                TextColorSelected="LightGreen"
                                FontSize="12">
                                <Grid>
                                    <Label    
                                        HorizontalOptions="Center"
                                        VerticalOptions="Center"
                                        Text="Itineary" />
                                </Grid>
                            </xct:TabViewItem>

                            <xct:TabViewItem
                                Text="Itineary"
                                TextColor="Gray"
                                TextColorSelected="LightGreen"
                                FontSize="12">  
                                <Grid>
                                    <Label    
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                Text="Itineary" />
                                </Grid>
                            </xct:TabViewItem>
                            <xct:TabViewItem
                                Text="Safety and Security"
                                TextColor="Gray"
                                TextColorSelected="LightGreen"
                                FontSize="12">
                                <Grid>
                                    <Label    
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                Text="TabContent2" />
                                </Grid>
                            </xct:TabViewItem>
                            <xct:TabViewItem
                                Text="Terms/Conditions"
                                TextColor="Gray"
                                TextColorSelected="LightGreen"
                                FontSize="12">
                                <Grid>
                                    <Label    
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                Text="TabContent2" />
                                </Grid>
                            </xct:TabViewItem>
                        </xct:TabView>
                    </Grid>
                </Grid>
            </pancakeview:PancakeView>
            <pancakeview:PancakeView
                        Grid.Row="1"
                        VerticalOptions="Start"
                        HorizontalOptions="End"
                        CornerRadius="10,0,0,10"
                        HeightRequest="60"
                        WidthRequest="150"
                        Margin="0,-70,18,-10">
                <StackLayout 
                        BackgroundColor="{AppThemeBinding Dark=Gray,Light=black}" >
                    <Label Margin="5,5,0,3">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span
                            FontFamily="FontMontserratMedium"
                            FontSize="12"
                            Text="Rs 4000"
                            TextColor="White" />
                                <Span 
                            Text=" 50 % Off" 
                            FontSize="10" 
                            TextColor="Red"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Label Margin="5,-5,0,0">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span
                                FontFamily="FontMontserratMedium"
                                FontSize="15"
                                Text="Rs 2000/"
                                TextColor="White" />
                                <Span 
                                Text=" Per Person" 
                                TextColor="White" 
                                FontSize="Caption"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>

                </StackLayout>
            </pancakeview:PancakeView>
        </Grid>
    </ScrollView>
</ContentPage.Content>
0 Answers
Related