question

SreejithSree-2948 avatar image
0 Votes"
SreejithSree-2948 asked JarvanZhang-MSFT edited

Xamarin Forms: How to remove empty space between listview items based on date?

I'm using listview to display the list of items. The items are getting listed based on their date. If there are multiple events in a day I need to remove the space between the events and hide the date for the items other than the first one. Now I'm hiding the date using the day visibility variable using the following code:

 foreach (var eventshb in eventsHBList)
 {
     bool isFirstItem = true;
     foreach (var events in eventshb.eventsList)
     {
         if (isFirstItem)
         {
             eventshb.dayVisibility = true;
             isFirstItem = false;
         }
         else
         {
             eventshb.dayVisibility = false;
         }
         eventshb.eventsListTO = events;
         EventAllItems.Add(eventshb);
     }
 }


I'm trying to remove the empty space between the items. For refers, I have added the current UI and the required UI Screenshots.

The demo project using the listview for displaying the events is uploaded in the drive.



dotnet-xamarinforms
· 2
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.

This is because you set margin and padding for the item view. To fix this, try removing the margin and padding on the top and bottom sides.

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <ViewCell.View>
                <StackLayout
                    Margin="5,0"
                    Padding="5,0,5,0"
                    Orientation="Vertical">
                    ...
                </StackLayout>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

0 Votes 0 ·

Actually, I need margin and padding value for the items.

If the events are on the same day, then only I need to set the margin as you said. If events of a day are over, I need to place the next day's events after some space.

Could you check the screenshot attached? How can I achieve that?

0 Votes 0 ·

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

Hi, SreejithSree-2948. For the effect of the screenshot, try using a grouped listView to display the data. You could group the data by date.

Related doc:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#grouping

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.