Xamarin Forms：如何根据日期删除列表视图项目之间的空白？答案

【问题标题】：Xamarin Forms: How to remove empty space between listview items based on date?Xamarin Forms：如何根据日期删除列表视图项目之间的空白？
【发布时间】：2021-06-25 06:51:26
【问题描述】：

我正在使用 listview 来显示项目列表。这些项目是根据它们的日期列出的。如果一天中有多个事件，我需要删除事件之间的空格并隐藏第一个项目以外的项目的日期。现在我使用以下代码使用日期可见性变量隐藏日期：

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);
    }
}

我正在尝试删除项目之间的空白区域。对于引用，我已经添加了当前的 UI 和所需的 UI Screenshots。

使用列表视图显示事件的demo 项目已上传到驱动器中。

【问题讨论】：

您正在寻找的技巧称为grouping。并发布您的xaml代码，也许有人可以让差距消失。
首先你需要找出差距是从哪里来的。它几乎可以肯定是某些布局容器（例如 stackoverflow）中的默认间距值。找出控制间距的属性，手动将其设置为零。这会让它消失吗？现在，您需要一个{Binding SomeProperty} 而不是0，以具有您在适当条件下设置的值。了解绑定。
你能分享你的样品吗？
@LucasZhang-MSFT 项目示例：drive.google.com/file/d/1t13a5cwR1mIyP1iqGAmARfp4PsSXLzju/view

标签： listview xamarin.forms

【解决方案1】：

我认为使用Grouping 是实现这一目标的最佳方式，因为您可以为自己的头部定义DataTemplate。

如果你不想做大的改变你可以尝试使用iValueConverter，根据dayVisibility改变Margin的值，但这似乎只是相对减少了间距。

创建 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();
    }
}

然后在您的 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>

【讨论】：