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

Question

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.

Answer 1

I think use Grouping is the best way to achieve this,becasuse you could define a DataTemplate for your head.

If you don't want to make a big change you could try using iValueConverter,change the Margin value according to dayVisibility，but this only seems to reduce the spacing relatively.

create IsHasSpaceConvert :

public class IsHasSpaceConvert : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
              if ((bool)value)
        {
            return new Thickness(5,10,5,0);
        }
        else
        {
            return new Thickness(5,-5, 5,0);
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

then in your xaml:

 <ContentPage.Resources>
    <ResourceDictionary>
        <local:IsHasSpaceConvert x:Key="isHasSpace" />
    </ResourceDictionary>
</ContentPage.Resources>

<StackLayout>
    <ListView 
        x:Name="EventsListview"
        IsVisible="true"
        SeparatorVisibility="Default"
        ItemsSource="{Binding EventAllItems, Mode=TwoWay}"
        HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <StackLayout 
                            Margin="{Binding dayVisibility,
                                Converter={StaticResource isHasSpace}}"
                            Padding="5"
                            Orientation="Vertical">
                            <Frame>
                                <StackLayout
                                    Orientation="Vertical">

                                    <Label 
                                        Text="{Binding finalDay}"
                                        IsVisible="{Binding dayVisibility}"
                                        TextColor="Black"
                                        HorizontalOptions="Start" 
                                        HorizontalTextAlignment="Start"
                                        VerticalTextAlignment="Center"
                                        VerticalOptions="CenterAndExpand">
                                        <Label.FontSize>
                                            <OnIdiom x:TypeArguments="x:Double">
                                                <OnIdiom.Phone>15</OnIdiom.Phone>
                                                <OnIdiom.Tablet>22</OnIdiom.Tablet>
                                                <OnIdiom.Desktop>15</OnIdiom.Desktop>
                                            </OnIdiom>
                                        </Label.FontSize>
                                    </Label>

                                    <Label
                                        HorizontalOptions="StartAndExpand"
                                        Text="{Binding eventsListTO.title}"
                                        VerticalOptions="CenterAndExpand"
                                        TextColor="Black">
                                        <Label.FontSize>
                                            <OnIdiom x:TypeArguments="x:Double">
                                                <OnIdiom.Phone>20</OnIdiom.Phone>
                                                <OnIdiom.Tablet>30</OnIdiom.Tablet>
                                                <OnIdiom.Desktop>20</OnIdiom.Desktop>
                                            </OnIdiom>
                                        </Label.FontSize>
                                    </Label>
                                </StackLayout>
                            </Frame>
                        </StackLayout>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.Footer>
            <Label/>
        </ListView.Footer>
    </ListView>
</StackLayout>