RadTabView does not update the height when switching between Tabs

[Angola]

Hello good afternoon, I have a problem since I updated to the most current versions of Xamarin.Forms and Telerik.

I had a ScrollView that was the parent of a RadTabView, and when switching between Tab items it updated as heights normally.

But after the update it records only the first height of the content of the first item and when I switch to the other items the scroll does not work because the height of the Tab does not change and he is unable to make a difference to calculate how much will roll.

 

EX:

 

 <ScrollView x:Name="s"
              BackgroundColor="Azure">
        <telerikPrimitives:RadTabView x:Name="tabView"
                                          BackgroundColor="Blue"
                                          IsContentSwipingEnabled="False">
            <telerikPrimitives:RadTabView.Items>
                <telerikPrimitives:TabViewItem HeaderText="Home">
                    <telerikPrimitives:TabViewItem.Content>
                        <StackLayout x:Name="sta"
                                         BackgroundColor="Aquamarine">

                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Tapped="st1" />
                            </StackLayout.GestureRecognizers>

                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                        </StackLayout>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem HeaderText="Folder">
                    <telerikPrimitives:TabViewItem.Content>
                        <StackLayout x:Name="stb"
                                         BackgroundColor="Firebrick">

                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Tapped="st2" />
                            </StackLayout.GestureRecognizers>

                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                        </StackLayout>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem HeaderText="View">
                    <telerikPrimitives:TabViewItem.Content>
                        <StackLayout x:Name="stc"
                                         BackgroundColor="DodgerBlue">

                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Tapped="st3" />
                            </StackLayout.GestureRecognizers>

                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                        </StackLayout>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
            </telerikPrimitives:RadTabView.Items>
        </telerikPrimitives:RadTabView>
    </ScrollView>

 

Ao mudar para o terceiro item da Tab ele não entende que deve fazer scroll.

 

Porf se alguém puder ajudar, agradeço.

[Didi]

Hello Angola,

Thank you for the provided code. 

I have noticed that the items inside the third tab content exceed the visible area of the device screen. Then you cannot scroll inside them as they are inside a stack layout. In order to scroll you will need to add a ScrollView inside the third TabView content: 

<telerikPrimitives:TabViewItem HeaderText="View">
                    <telerikPrimitives:TabViewItem.Content>
                        <ScrollView>
                            <StackLayout x:Name="stc"
                                         BackgroundColor="DodgerBlue">

                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer />
                                </StackLayout.GestureRecognizers>

                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                                <Label Margin="10" Text="This is the content of the Home tabdfoihdsoifhsoidhfoisdhfoishfois"
                               HeightRequest="50"
                               BackgroundColor="Red"/>
                            </StackLayout>
                        </ScrollView>
                        
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>

I have noticed that you have set same height and margin to all Labels inside the content of the three tabs. So it is expected that the height will be the same. I am afraid, I do not understand the exact issue you are observing, maybe I am missing something. Could you please send me a video of the issue?

Could you please elaborate more on the following:  since I updated to the most current versions of Xamarin.Forms and Telerik. What were the Telerik and Xamarin versions in which the height was working? 

I look forward to your reply.

Regards,
Didi
Progress Telerik

[Angola]

Hello dear.

Thank you very much for your feedback.

The previous versions where the solution worked were:
Telerik.UI.for.Xamarin (2020.2.615) and
Xamarin.Forms 4.8 ...

The real problem is that before I scrolled the entire page, that is, both the tab and its content scrolled, but now nothing scrolls unless I scroll the tab's content, which is what you don't want to do.

I need to find a way to scroll the entire page when the content of the current tab is higher in height than the screen. And do not scrol when it is not necessary.

Thanks.

[Didi]

Hi Angola,

Yes, I have reproduced the inconsistency in the behavior with the ScrollView and TabView. 
With R1 2021 release we have added additional features to the TabView control.

I have logged internal item for additional research as I am not sure whether the behavior now is expected, or it is an issue in the TabView, ScrollView, etc. 
If you want to have a scrollable content inside the TabView, the option you can use is to add a ScrollView inside the TabView.Item Content. 

 

[Angola]

Hello, one more thanks for returning.

Yes yes, I had already tested and verified that placing the scrollview inside each tab content would work, but as I said earlier I don't want that.

EX: If the first item on the tab has more content than fits on the screen, I want the whole page to scroll including the header that I will implement in the top of the page and that was the behavior before the update.

[Didi]

Hi,

I have explained that I have logged an internal item for additional research from our dev team. 
Another possible solution which you can use is as follow:

<ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="600"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="300"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="300"/>
            </Grid.RowDefinitions>

            <telerikPrimitives:RadTabView x:Name="tabView"
                                          BackgroundColor="Blue"
                                          IsContentSwipingEnabled="False">
                <telerikPrimitives:RadTabView.Items>

                    <telerikPrimitives:TabViewItem HeaderText="View">
                        <telerikPrimitives:TabViewItem.Content>
                            <ScrollView>
                                <StackLayout x:Name="stc"
                                         BackgroundColor="DodgerBlue">
...................

And also add a scrollview inside the TabView content

Here is the result: 

These are the options I can suggest. 

                  

[Angola]

Hello dear.
Thanks for the suggestion, I'll try to apply and see how it looks.