Layout issue when using pull to refresh

[Valentin]

I have a RadListView which uses a ListViewTemplateCell to specify the list item layout.
When the list is displayed initially, the layout looks OK. After using pull to refresh a few times, the layout looks weird. With the example I'm attaching below, the layout is affected typically on the fourth pull to refresh. Just watch the rightmost text how it shifts to the left and right as you pull to refresh. Keep pulling for even more movement.

Telerik_UI_for_Xamarin_2018_2_516_2_Dev
Shared code project targets .NET Standard 1.4
Xamarin Forms 2.5.1.527436
Android
Android 8.1 (API Level 27 - Oreo) - on emulator

Here's the page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListBug"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             x:Class="ListBug.MainPage"
             x:Name="Self">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

        <telerikDataControls:RadListView x:Name="listView"
                        ItemsSource="{Binding Path=Items, Source={x:Reference Name='Self'}}"
                        IsPullToRefreshEnabled="True"
                        RefreshRequested="listView_RefreshRequested">
            <telerikDataControls:RadListView.ItemTemplate>
                        <DataTemplate>
                            <telerikListView:ListViewTemplateCell>
                                <telerikListView:ListViewTemplateCell.View>
                                    <Grid RowSpacing="2" Padding="5, 0, 5, 0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="4*"/>
                                            <ColumnDefinition Width="1*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Label Text="{Binding Overview}" />
                                        <Label Grid.Row="1" Text="{Binding Details}" />
                                        <Label Grid.Column="1" Grid.RowSpan="2" Text="{Binding Other}" HorizontalTextAlignment="End" VerticalTextAlignment="Center" />
                                    </Grid>
                                </telerikListView:ListViewTemplateCell.View>
                            </telerikListView:ListViewTemplateCell>
                        </DataTemplate>
            </telerikDataControls:RadListView.ItemTemplate>
        </telerikDataControls:RadListView>

    </Grid>
</ContentPage>

 

Here's the code behind:

using System.Collections.Generic;
using Xamarin.Forms;

namespace ListBug
{
    public partial class MainPage : ContentPage
    {

        public static readonly BindableProperty ItemsProperty =
            BindableProperty.Create(nameof(Items), typeof(List<Item>), typeof(MainPage), default(List<Item>), BindingMode.Default, null);

        public List<Item> Items
        {
            get { return (List<Item>)GetValue(ItemsProperty); }
            set { SetValue(ItemsProperty, value); }
        }

        public MainPage()
        {
            InitializeComponent();
            InitializeItems();
        }

        private void InitializeItems()
        {
            Items?.Clear();
            var items = new List<Item>();

            items.Add(new Item()
            {
                Overview = "First item overview",
                Details = "First item details",
                Other = "Item1"
            });
            items.Add(new Item()
            {
                Overview = "Second item overview",
                Details = "Second item details",
                Other = "Item2"
            });
            items.Add(new Item()
            {
                Overview = "Third item overview",
                Details = "Third item details",
                Other = "Item3"
            });
            items.Add(new Item()
            {
                Overview = "Fourth item overview",
                Details = "Fourth item details",
                Other = "Item4"
            });
            items.Add(new Item()
            {
                Overview = "Fifth item overview",
                Details = "Fifth item details",
                Other = "Item5"
            });

            Items = items;
        }

        private void listView_RefreshRequested(object sender, Telerik.XamarinForms.DataControls.ListView.PullToRefreshRequestedEventArgs e)
        {
            InitializeItems();
            listView.EndRefresh(true);
        }
    }
}

 

and here's the Item class

namespace ListBug
{
    public class Item
    {
        public string Overview { get; set; }
        public string Details { get; set; }
        public string Other { get; set; }
    }
}

[Didi]

Hi Valentin,

Thank you for the provided code.

I tested it and I reproduced the issue you described. I have logged this in our Feedback portal as a bug and you could follow the item on the provided link below:
https://feedback.telerik.com/Project/168/Feedback/Details/251950-listviewandroid-inaccurate-measure-when-pull-to-refresh-is-enabled

As a workaround you could add the DataTemplate as a resource in the Resource page of the app and set the ItemTemplate as a static resource from type DataTemplate. 
Please take a look at the provided example and let me know if you have any other questions on this.

You can also find your Telerik points updated for reporting this to us.

Regards,
Didi
Progress Telerik

[Valentin]

Thank you for confirming and logging the bug, Didi. I implemented the workaround and it indeed resolves the issue for now. Look forward to the bug fix.

Valentin

[IanV]

I'm having a similar problem where the layout of a very complex cell isn't correct. Pull to Refresh often fixes it though.

 

I tried putting the Template into a resource but no change.

 

Is there an update to the bug?

 

Android only

[Lance | Manager Technical Support]

Hello Ian,

You can check the status of a bug report (or feature request) by opening the Feedback Hub link link and checking the status. If you'd like to be notified immediately when the status changes, click the "Follow" button at the top of the issue,

Here's a screenshot of the Feedback Item you're asking about





When development team is currently working on the item, that will be changed to "In Development". Additionally, if it's been released, it will show "Completed". 

Note: If this is a showstopper for you, take a look at Didi's workaround to see if that's a solution for you.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik