RadListView item height issue on iOS

[Tracy]

Note that the issue I'm experiencing only happens on iOS. On UWP and Android, everything works as expected.

Xamarin Forms app with a RadListView control on the page. The control itself consumes the entire page, as expected. The issue is that the rows in the list view have varying heights (or should). The rows render just fine on UWP and Android with varying heights that size correctly to the contents. However, on iOS, all rows render as a constant height that seems like it's "one line of medium text" high.

I've tried adding a LayoutDefinition with the ListViewLinearLayout set to 150, and confirmed that a fixed height adjustment works...and that would be fine if I needed a constant height to the rows. However, I need an "automatically resizes to fit the content" height adjustment.

Again, it's working perfectly on UWP and Android. Only issue is on iOS.

[Didi]

Hello Tracy,

I will need more information on your setup. Could you please send us a code snippet of the page where the RadListView control is defined. Also which versions of Xamarin.Forms and Telerik UI for Xamarin are used, and on which iOS device/simulator version the issue can be reproduced? 

I look forward to your reply.

Regards,
Didi
Progress Telerik

[Tracy]

Here's the information you requested.

• Telerik.UI.for.Xamarin v2019.2.513.1
• Xamarin.Forms 4.6.0.726
• iPhone XS Max running iOS 13.5.1

01.<?xml version="1.0" encoding="utf-8" ?>
02.<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
03.             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
04.             xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
05.             xmlns:view="clr-namespace:wallet.View"
06.             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
07.             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
08.             BackgroundColor="{DynamicResource AppBackgroundColor}"
09.             Title="Messages"
10.             Icon="message_icon.png"
11.             plugin:TabBadge.BadgeText="{Binding BadgeText}"
12.             plugin:TabBadge.BadgeColor="Red"
13.             plugin:TabBadge.BadgeTextColor="White"
14.             plugin:TabBadge.BadgeFont="Bold"
15.             x:Class="wallet.View._003_Running.History_Browser.ConversationIndexPage">
16.    <ContentPage.Content>
17.        <StackLayout x:Name="stackListView" Orientation="Vertical" VerticalOptions="FillAndExpand">
18.            <ScrollView Orientation="Vertical">
19.                <telerikDataControls:RadListView x:Name="listView"
20.                           HorizontalOptions="FillAndExpand"
21.                           VerticalOptions="FillAndExpand"
22.                           BackgroundColor="Transparent"
23.                           ItemsSource="{Binding ConversationItems}"
24.                           SelectionMode="Single"
25.                           SelectionChanged="HistoryItemsView_SelectionChanged"
26.                           SelectionGesture="Tap" >
27.                    <telerikDataControls:RadListView.ItemTemplate>
28.                        <DataTemplate>
29.                            <telerikListView:ListViewTemplateCell>
30.                                <telerikListView:ListViewTemplateCell.View>
31.                                    <StackLayout Orientation="Vertical">
32.                                        <BoxView HeightRequest="1" Margin="0,0,0,10" BackgroundColor="Transparent" />
33.                                        <StackLayout Orientation="Horizontal" Margin="5,0,5,0">
34.                                            <view:FASImage Glyph="" ForegroundColor="{Binding IsNewItemColor}" HorizontalOptions="CenterAndExpand" Size="10" Margin="0,0,5,0"/>
35.                                            <StackLayout Orientation="Vertical" Margin="5,0,10,0">
36.                                                <StackLayout Orientation="Horizontal" WidthRequest="1000">
37.                                                    <Label Text="{Binding ChannelName}" TextColor="{DynamicResource StandardTextColor}" FontSize="Small" HorizontalOptions="StartAndExpand" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
38.                                                    <Label Text="{Binding TimeStamp}" TextColor="{DynamicResource StandardTextColor}" FontSize="Micro" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="End"/>
39.                                                </StackLayout>
40.                                                <Label Text="{Binding Excerpt}" FontSize="Small" TextColor="{DynamicResource StandardTextColor}"  />
41.                                            </StackLayout>
42.                                            <view:FASImage Glyph="" ForegroundColor="{DynamicResource StandardTextColor}" Size="15" HorizontalOptions="EndAndExpand" Margin="10,0,0,0"/>
43.                                        </StackLayout>
44.                                        <BoxView HeightRequest="1" BackgroundColor="{DynamicResource IDBrowserSeperatorColor}" Margin="0,10,0,0" />
45.                                    </StackLayout>
46.                                </telerikListView:ListViewTemplateCell.View>
47.                            </telerikListView:ListViewTemplateCell>
48.                        </DataTemplate>
49.                    </telerikDataControls:RadListView.ItemTemplate>
50.                    <telerikDataControls:RadListView.ItemStyle>
51.                        <telerikListView:ListViewItemStyle BackgroundColor="Transparent"
52.                                        TextCellTextColor="White"
53.                                        BorderColor="Transparent"
54.                                        BorderWidth="0"
55.                                        BorderLocation="None" />
56.                    </telerikDataControls:RadListView.ItemStyle>
57.                    <telerikDataControls:RadListView.SelectedItemStyle>
58.                        <telerikListView:ListViewItemStyle BackgroundColor="Transparent"
59.                                        TextCellTextColor="White"
60.                                        BorderColor="Transparent"
61.                                        BorderWidth="0"
62.                                        BorderLocation="None" />
63.                    </telerikDataControls:RadListView.SelectedItemStyle>
64.                    <telerikDataControls:RadListView.PressedItemStyle>
65.                        <telerikListView:ListViewItemStyle BackgroundColor="Transparent"
66.                                        TextCellTextColor="White"
67.                                        BorderColor="Transparent"
68.                                        BorderWidth="0"
69.                                        BorderLocation="None" />
70.                    </telerikDataControls:RadListView.PressedItemStyle>
71.                </telerikDataControls:RadListView>
72.            </ScrollView>
73.        </StackLayout>
74.    </ContentPage.Content>
75.</ContentPage>

[Didi]

Hello Tracy,

Thank you for the provided code snippet.

I have noticed that the RadListView is positioned inside a stacklayout and scrollview. Let me explain in details:

Some of the Telerik UI for Xamarin controls, like RadListView, RadDataGrid and RadTreeView, use UI Virtualization, or other optimization methods, that require the visual parent to provide vertical or horizontal space for the control to fill into.

When using a parent that does not provide space for the control to appear, the UI component may not be visible at all or be partially cut off.

A couple of these layout controls are:

- StackLayout
- Grid RowDefinition Height="Auto"

For more details on this please check the following link from our documentation: https://docs.telerik.com/devtools/xamarin/troubleshooting/controls-are-not-appearing

Regarding the scrollview, the RadListView control has a scrollview implemented. So you do not need to place the control inside a scrollview. Please avoid this practice.  

RadListView iOS row height issue.

The issue with the row height could be related to the following issue logged in our feedback portal: https://feedback.telerik.com/xamarin/1428279-listview-ios-row-height-does-not-fit-custom-content-for-ios-13-beta

Note that this issue is fixed in R3 2019 release of Telerik UI for Xamarin. As you are using R2 2019 version, I suggest you update to R3 2019 or to the latest Telerik UI for Xamarin version and check whether this will solve the issue on your side. 

I look forward to your reply.

Regards,
Didi
Progress Telerik

[Tracy]

I reworked everything into a grid rather than stacklayouts, upgraded the Telerik components, and it worked. Frustrating, because it worked perfectly as-was on Android and Windows. Not happy that there's an inconsistent experience across the three platforms.

And...it is what it is...and it's working.

[Didi]

Hi Tracy,

I understand that there is an inconsistency in the ListView behavior on iOS, Android and UWP. The reason behind this is that native iOS, Android and UWP ListViews are 3 different controls and do not have 100% matching across all platforms.

Regarding to the issue with the row height, it was related to the iOS ListView control and it was fixed. I am happy to hear that updating the Telerik UI for Xamarin version solved the issue.

Let me know if I can assist with anything else.

Regards,
Didi
Progress Telerik