Hi,
We are in process of porting Xamarin Forms app to MAUI.
There's some very bad rendering issues when use Telerik RadListView (in Grouped List mode) under iOS that are working fine for Android.
As per screenshot attached - the List Items on iOS are suffering from these problems which we don't see on Android :
- Dynamic Item Heights are being ignored on iOS. (all items are same height even though they are varying heights as per Android)
- Margins/Spacing around Items (root UIElement inside the DataTemplate have Margins set) are being ignored on iOS - as per screenshot there is no spacing between items and items are rendering to edge of control.
Some additional notes on versions :
- Using latest MAUI .NET7 - 7.0.96 (SR8)
- Using Telerik Controls - 6.3.0
Screenshots are from Emulators (Android 13 and iOS 16.4) - however same behaviour observed on devices and other os versions too.
Can you please advise further & if an update will be provided to address these problems.
thanks
Niall
1 Answer, 1 is accepted
Hi Robert,
Thank oyu for the provided image and details.
Could you please send us more details:
1) Whether the groups are sticky?
2) Send us the group header template and the complete ListView definition.
We have this issue logged: https://feedback.telerik.com/maui/1591230-listview-ios-maccatalyst-slow-performance-when-groups-are-sticky-and-group-header-template-is-used
So I will need the exact implementation you have so I can research the case further.
Regards,
Didi
Progress Telerik
(EDIT/FYI: Tried this with updated 6.4.0 release and seeing same issues)
Hi Didi,
To answer your questions above :
1) We have this implemented in several places in the App, both with and without Sticky group headers and seeing exact same behaviour with the child ListItems (ItemTemplate) rendering - so this definitely is not a factor/cause.
2) Here is some templates - again we have a lot of different datatypes/implementations of this but seeing same issue with child ItemTemplates.
An example Group Header Template below (this is one of the simpler ones with just a rounded border and heading text :
<DataTemplate x:Key="CustomOrderGroupHeaderTemplate">
<Grid BackgroundColor="Transparent" Margin="0,0,0,0">
<Grid BackgroundColor="{StaticResource MocoNewPageBackground}" HorizontalOptions="Fill" VerticalOptions="Fill" Margin="0,0,0,8">
<Border Margin="8,8,8,0" Style="{StaticResource DialogBorderCornerStyle}" StrokeThickness="0" Padding="0" VerticalOptions="End">
<Grid BackgroundColor="{StaticResource MocoNewGroupHeaderBackgroundColor}" HorizontalOptions="Fill" >
<Label Text="{Binding Key}"
FontAttributes="Bold"
Style="{StaticResource CustomListGroupHeaderStyle}"
TextColor="{StaticResource MocoNewAlmostBlack}"
VerticalOptions="Center"
Margin="12,4,4,4"/>
</Grid>
</Border>
</Grid>
</Grid>
</DataTemplate>
<telerikControls:RadListView Grid.Row="1" ItemsSource="{Binding CombinedLists}"
GroupHeaderTemplate="{StaticResource CustomListGroupHeaderTemplate}"
ItemTemplate="{StaticResource CardedListsItemTelerikTemplate}"
SelectionMode="None"
IsGroupHeaderSticky="True"
Margin="8,0,8,0"
FooterTemplate="{StaticResource Spacer24Template}"
GroupHeaderStyle="{StaticResource TelerikListViewPlainGroupStyle}"
ItemStyle="{StaticResource TelerikListViewPlainItemStyle}"
IsVisible="{Binding IsLoadingLists, Converter={StaticResource InverseBoolConverter}}"
>
<!-- HeaderTemplate="{StaticResource Spacer16Template}"-->
<telerikControls:RadListView.PressedItemStyle>
<telerikListViewSupport:ListViewItemStyle BackgroundColor="#F0F0F0"
TextCellTextColor="Transparent"
BorderColor="Transparent"
BorderWidth="0"
BorderLocation="None"/>
</telerikControls:RadListView.PressedItemStyle>
<telerikControls:RadListView.Commands>
<helpers:TelerikGroupHeaderNoExpandCommand/>
<telerikListViewCommands:ListViewUserCommand Id="ItemTap" Command="{Binding ListItemClickedTelerikCommand}" />
</telerikControls:RadListView.Commands>
<telerikControls:RadListView.GroupDescriptors>
<telerikListViewSupport:ListViewPropertyGroupDescriptor PropertyName="GroupKey"/>
</telerikControls:RadListView.GroupDescriptors>
</telerikControls:RadListView>
<telerikListViewSupport:ListViewItemStyle
x:Key="TelerikListViewPlainItemStyle"
BackgroundColor="Transparent"
TextCellTextColor="{StaticResource MocoNewAlmostBlack}"
BorderColor="Transparent"
BorderWidth="0"
BorderLocation="None"
/>
<telerikListViewSupport:ListViewGroupStyle
x:Key="TelerikListViewPlainGroupStyle"
BackgroundColor="Transparent"
BorderColor="Transparent"
BorderWidth="0"
BorderLocation="None"
/>
<DataTemplate x:Key="Spacer24Template">
<Grid HeightRequest="24"/>
</DataTemplate>
For ItemTemplates - don't want to post full contents (for commercial sensitivity) but here is root elements which should provide enough details :
<DataTemplate x:Key="CardedListsItemTelerikTemplate" x:DataType="model:CustomList">
<telerikListViewSupport:ListViewTemplateCell>
<telerikListViewSupport:ListViewTemplateCell.View>
<Border BackgroundColor="{StaticResource MocoWhite}" Margin="8,4,8,4">
<Border.StrokeShape>
<RoundRectangle CornerRadius="6"/>
</Border.StrokeShape>
<Grid ColumnSpacing="0" Margin="0" HorizontalOptions="Fill">
<!-- ..... content in here - some templates have UserControls others have full Xaml ... -->
</Grid>
</Border>
</telerikListViewSupport:ListViewTemplateCell.View>
</telerikListViewSupport:ListViewTemplateCell>
</DataTemplate>
- The Margin on root <Border/> element is basically being ignored no matter what we specify on iOS (works fine on Android). Some of the usages have much larger margins too (ie. 16,8).
- The contents inside the Grid has dynamic heights (and needs to correctly work for multiple form factos/scaling etc PLUS some need to be different heights to other items) & hence we can't specific a fixed item height. The final desired heights & as per screenshot is being ignored & on iOS it's clipping items vertically (by a large amount - ie. 2/3 of it missing) and making every single item the same height.
As above, this is happening everywhere we are using the Telerik RadListView on iOS. If I use the Syncfusion control (which is missing some things we need) it works OK.
Hope that provides enough information for you to proceed and figure out why these problems are happening.
Thanks
Niall
Hi Robert,
Thank you for the provided code. I tested the case in a sample app and reproduced the behaviors:
Dynamic Item Heights are being ignored on iOS. (all items are same height even though they are varying heights as per Android)
Margins/Spacing around Items (root UIElement inside the DataTemplate have Margins set) are being ignored on iOS - as per screenshot there is no spacing between items and items are rendering to edge of control.
Solution:
Dynamic item height
The behavior is because of the Grid layout usage with Star sized row. We have it logged here: https://feedback.telerik.com/maui/1602046-listview-ios-content-is-not-property-visualized-when-nesting-many-grid-layouts-in-the-template-and-using-gird-rows-with-auto-and-definitive-height There are several issues in Maui layouts that affects the controls. I understand the the issue happens only on iOS still these are native controls and have native representation.
In order to solve the behavior, set the grid row definition to Auto.
Spacing between the items
I have logged the behavior here https://feedback.telerik.com/maui/1629672-listview-ios-maccatalyst-margin-in-the-template-is-not-respected
As a solution you can use the linear layout and set spacing between the elements: https://docs.telerik.com/devtools/maui/controls/listview/layouts
Hope the suggestions will be of help.
Hi Didi,
I have also found some further/better solutions for these issues.
Item Spacing : The issue is the Telerik RadListView is ignoring the Margin/Padding attributes on the root element (inside the ListViewTemplateCell.View element). The fix for this is to wrap whatever contents are in there with a Grid element and then the child element of that would have the desired Margin/Padding set. This is much preferred solution to yours as I don't want to be using LinearLayout because I need to support multiple columns when App is being used on a Tablet/Landscape device.
Dynamic Height: I found similar solution to you - simply set this new root Grid element (as per fix above) with Attribute RowDefinitions="Auto" and it seems to fix things - seems to work even if inner content has a Grid with * sizing for row definitions.
Hence - the working fix is as follows :
<DataTemplate x:Key="MyItemTemplate">
<telerikListViewSupport:ListViewTemplateCell>
<telerikListViewSupport:ListViewTemplateCell.View>
<Grid RowDefinitions="Auto"> <!-- Add This Root Wrapping Element -->
<WhateverLayoutElement Margin="8,8,8,4" Padding="8">
......
</WhateverLayoutElement>
</Grid> <!-- Close This Root Wrapping Element -->
</telerikListViewSupport:ListViewTemplateCell.View>
</telerikListViewSupport:ListViewTemplateCell>
</DataTemplate>
Where 'WhateverLayoutElement' could be any type of View (ie. Grid, Border, Custom Control etc) and contains the Margin/Padding you originally wanted to be observed by the ItemTemplates...
This solution works for both Android and iOS.
Note - I would conclude this spacing between items bug is specific to the Telerik RadListView Control as neither the Syncfusion (SfListView) nor MAUI Native controls (CollectionView) suffer from this issue. I can see from occasional errors being thrown on iOS that your RadListView is wrapping the same UICollectionView as the others too.
thanks
Niall
I am glad you have find different approach to workaround the behaviors.
Regarding to the spacing, in my previous comment I shared the logged bug report: https://feedback.telerik.com/maui/1629672-listview-ios-maccatalyst-margin-in-the-template-is-not-respected