question

rettiseert-7630 avatar image
0 Votes"
rettiseert-7630 asked rettiseert-7630 commented

Xamarin CollectionView jittery scrolling

Hi

I have a simple Xamarin forms page that uses this XAML:

 <ContentPage.BindingContext>
   <vm:MainPageViewModel />
 </ContentPage.BindingContext>
    
 <CollectionView ItemsSource="{Binding Items}" RemainingItemsThreshold="1">
   <CollectionView.ItemTemplate>
      <DataTemplate x:DataType="vm:Item">
         <ContentView>
            <Frame Margin="20" Padding="20" BorderColor="Gray">
               <StackLayout Spacing="5">
                  <Label Text="{Binding Header}" FontAttributes="Bold" />
                  <StackLayout BindableLayout.ItemsSource="{Binding SubItems}">
                     <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="vm:SubItem">
                           <StackLayout Orientation="Horizontal">
                              <Label WidthRequest="70" Text="{Binding Column0}" />
                              <Label WidthRequest="70" Text="{Binding Column1}" />
                              <Label WidthRequest="70" Text="{Binding Column2}" />
                              <Label                   Text="{Binding Column3}" />
                           </StackLayout>
                        </DataTemplate>
                     </BindableLayout.ItemTemplate>
                  </StackLayout>
                  <Label Text="{Binding Footer}" FontAttributes="Bold" />
               </StackLayout>
            </Frame>
         </ContentView>
      </DataTemplate>
   </CollectionView.ItemTemplate>
 </CollectionView>

to produce something like this:

90879-image7.png

However, when trying to scroll the collection view, it pauses and looks very jittery, even with a low number of items. The problem is less prominent in high end phones, but in mid-range phones is terrible.

The data that binds to the collection view is generated by this code:

 class MainPageViewModel : INotifyPropertyChanged
     {
         public MainPageViewModel()
         {
             Items = new List<Item>();
             for (int i = 0; i < 30; i++)
                 Items.Add(new Item());
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Items)));
         }
    
         public event PropertyChangedEventHandler PropertyChanged;
    
         public IList<Item> Items { get; set; }
     }
    
    
     class Item
     {
         public Item()
         {
             for (int i = 0; i < Util.RandomGenerator.Next(0, 5); i++)
                 SubItems.Add(new SubItem());
         }
         public string Footer { get; set; } = Util.GetRandomString();
         public string Header { get; set; } = Util.GetRandomString();
         public IList<SubItem> SubItems { get; set; } = new List<SubItem>();
     }
    
     class SubItem
     {
         public string Column0 { get; set; } = Util.GetRandomString();
         public string Column1 { get; set; } = Util.GetRandomString();
         public string Column2 { get; set; } = Util.GetRandomString();
         public string Column3 { get; set; } = Util.GetRandomString();
     }
    
     static class Util
     {
         public static readonly Random RandomGenerator = new Random();
         public static string GetRandomString() => RandomGenerator.Next(10000, 100000).ToString();
     }

I think there must be a way to reduce the jitter without removing the data bindings, but don't know what to do. Can you help?

Thanks!


dotnet-xamarin
image7.png (7.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

CherryBu-MSFT avatar image
1 Vote"
CherryBu-MSFT answered rettiseert-7630 commented

Hello,

Welcome to our Microsoft Q&A platform!

According to your xaml, I suggest you can use Xamarin.Forms CollectionView Grouping to design your UI. Using GroupHeaderTemplate and GroupFooterTemplate to display Heaser and Footer string.

I do one sample according to your code:

 class MainPageViewModel 
     {
         public ObservableCollection<Item> items { get; set; }  
         public MainPageViewModel()
         {
             items = new ObservableCollection<Item>();
             for (int i = 0; i < 30; i++)
             {
                 string header= Util.GetRandomString();
                 string footer= Util.GetRandomString();
                 ObservableCollection<SubItem> item = new ObservableCollection<SubItem>();
                 for (int j = 0; j < Util.RandomGenerator.Next(0, 5); j++)
                 {
                     item.Add(new SubItem());
                 }
                 items.Add(new Item(header,footer,item));                  
             }
         }
    
     }
     class Item:ObservableCollection<SubItem>
     {
         public string Footer { get; set; } 
         public string Header { get; set; } 
         public Item(string header,string footer,ObservableCollection<SubItem> item):base(item)
         {
    
             Header = header;
             Footer = footer;        
         }
           
     }
     class SubItem
     {
         public string Column0 { get; set; } = Util.GetRandomString();
         public string Column1 { get; set; } = Util.GetRandomString();
         public string Column2 { get; set; } = Util.GetRandomString();
         public string Column3 { get; set; } = Util.GetRandomString();
     }
    
     static class Util
     {
         public static readonly Random RandomGenerator = new Random();
         public static string GetRandomString() => RandomGenerator.Next(10000, 100000).ToString();
     }


   <CollectionView
                 x:Name="CollectionDiary"
                 IsGrouped="True"
                 ItemsSource="{Binding items}"
                 SelectionMode="Single">
                 <CollectionView.ItemTemplate>
                     <DataTemplate>
                         <StackLayout Orientation="Horizontal">
                             <Label Text="{Binding Column0}" />
                             <Label Text="{Binding Column1}" />
                             <Label Text="{Binding Column2}" />
                             <Label Text="{Binding Column3}" />
                         </StackLayout>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
                 <CollectionView.GroupHeaderTemplate>
                     <DataTemplate>
                         <Label
                             BackgroundColor="LightGray"
                             FontAttributes="Bold"
                             FontSize="Large"
                             Text="{Binding Header}" />
                     </DataTemplate>
                 </CollectionView.GroupHeaderTemplate>
    
                 <CollectionView.GroupFooterTemplate>
                     <DataTemplate>
                         <Label
                             BackgroundColor="LightGray"
                             FontAttributes="Bold"
                             FontSize="Large"
                             Text="{Binding Footer}" />
                     </DataTemplate>
                 </CollectionView.GroupFooterTemplate>
             </CollectionView>

Best Regards,

Cherry Bu


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Yes! It feels much better now...

Thank you so much for your time!

0 Votes 0 ·