Centered ListView content, expanding to full screen as more items are added

Hi there,

It is possible to create a ListView that is center aligned on the page, but then expands outwards to the full height of the page as more items are added to it.

I've attached a few mock-ups to show a visualisation of what i mean.
ListView_1.pngListView_2.pngListView_3.png

Currently i've got my SyncFusion ListView inside a grid, simialr to below:

         
   







When i use VerticalOptions="Fill" the list takes up the full space as expected due to using the * in the RowDefinitions , however the list items are aligned to the top.

I've tried changing the Vertical options to VerticalOptions="Center" which does force the actual ListView to be centered on the page, however this causes an issue with the actual items in the list. They are then not rendered at the correct height, so some portions of them are clipped. I used AutoFitMode="DynamicHeight" as i thought this would have allowed the list to expand from the center and calculate the correct height of each element, but unfortunately it didn't work.


1 Reply

SY Suthi Yuvaraj Syncfusion Team January 9, 2024 01:26 PM UTC

Hi Josh Southern,


We have checked your requirement , we have prepared the sample as per your requirements  ListView will layout at the center of the screen when it is loaded inside the GridLayout with a vertical option as center, we have attached the sample and output reference for your reference. Please have a look at the sample and let us know if we have missed any customization that you have done in your sample.


Output screenshot:


Kindly modify the sample or provide the code snippet to reproduce the issue to find the
solution as soon as possible.


Regards,

Suthi Yuvaraj.


Attachment: ListView_a9488b51.zip

Loader.
Up arrow icon