Xamarin 表单：如何从列表视图中隐藏重复的月份名称？

我为您编写了一个示例，以显示在您的情况下显示 Grouped ListView 应该具有的模型和数据：

模型和数据应该是这样的：

public partial class MainPage : ContentPage
{
    public ObservableCollection<EventsHB> AllItems { get; set; }


    public MainPage()
    {
        InitializeComponent();            

        AllItems = new ObservableCollection<EventsHB>();

        var julyGroup = new EventsHB() {month = "july"};

        julyGroup.Add(new EventTO() { calendarEventId = "1", title = "firstTitle", startDate = "01-1-1", startTime = "01-1-1"});
        julyGroup.Add(new EventTO() { calendarEventId = "2", title = "secondTitle", startDate = "02-1-1", startTime = "01-1-2" });
        julyGroup.Add(new EventTO() { calendarEventId = "3", title = "thirdTitle", startDate = "02-1-1", startTime = "01-1-3" });
        julyGroup.Add(new EventTO() { calendarEventId = "4", title = "fourthTitle", startDate = "02-1-1", startTime = "01-1-4" });

        var juneGroup = new EventsHB() { month = "june" };
        juneGroup.Add(new EventTO() { calendarEventId = "1", title = "junefirstTitle", startDate = "01-1-1", startTime = "01-1-1" });
        juneGroup.Add(new EventTO() { calendarEventId = "2", title = "junesecondTitle", startDate = "02-1-1", startTime = "01-1-2" });
        juneGroup.Add(new EventTO() { calendarEventId = "3", title = "junethirdTitle", startDate = "02-1-1", startTime = "01-1-3" });
        juneGroup.Add(new EventTO() { calendarEventId = "4", title = "junefourthTitle", startDate = "02-1-1", startTime = "01-1-4" });

        AllItems.Add(julyGroup);
        AllItems.Add(juneGroup);
        //...
        //more months like April,May can be added

        BindingContext = this;
    }

}

public class EventsHB : ObservableCollection<EventTO>
{
    public string month { get; set; }
    public EventTO eventTO { get; set; }
}

public class EventTO
{
    public string calendarEventId { get; set; }
    public string title { get; set; }
    public string startDate { get; set; }
    public string startTime { get; set; }
}

在你的json数据中，数据结构似乎不符合我在我的示例中列出的结构，所以你要做的就是将你的数据转换为正确的结构，我写了一个测试函数，你可以检查它是否有效：

//A test function to convert you json array to the array we need
    void test()
    {

        EventsHB julyGroup = new EventsHB() { month = "july" }; ;
        EventsHB juneGroup = new EventsHB() { month = "june" };
        //other months group


        foreach (var item in AllItems)
        {
            EventsHB hb = item;
            if (hb.month == "july")
            {
                julyGroup.Add(hb.eventTO);
            }
            else if (hb.month == "june")
            {
                juneGroup.Add(hb.eventTO);
            }//...other months
        }

        //at last, add them to All items.
        AllItems.Add(julyGroup);
        AllItems.Add(juneGroup);
        //...add other months
    }

你可以用你自己的方式转换它。

示例在这里：grouped-listView

参考：customizing-list-appearance#grouping

更新：

在应用程序端转换数据结构真的很复杂，我为你转换它并在我更新项目代码的每个地方添加注释。

你得到异常的原因是因为模型EventsHB : ObservableCollection<EventTO>，所以我在这里创建了一个新的来反序列化 json。

public class CalendarEvents
{
    //update here: here should be List<EventsHBTwo>
    public List<EventsHBTwo> eventsHB { get; set; }
}

//update use this one to shou grouped list data
public class EventsHB : ObservableCollection<EventTO>
{
    public string month { get; set; }
    public EventTO eventTO { get; set; }
}

//Update: use this one to deserialize json
public class EventsHBTwo
{
    public string month { get; set; }
    public EventTO eventTO { get; set; }
}

在 ViewModel.cs 中：

//Update: add a new tempItem to get json data
public ObservableCollection<EventsHBTwo> tempItem
{
    get
    {
        return _tempItems;
    }
    set
    {
        _tempItems = value;
        OnPropertyChanged("tempItem");
    }
}

然后使用这个 tempItem 来获取 json 数据：

   tempItem = new ObservableCollection<EventsHBTwo>(myevents.eventsHB);    
   //update: converData here 
   converData(tempItem);

和转换功能：

public void converData(ObservableCollection<EventsHBTwo> allItem)
        {

            AllItems = new ObservableCollection<EventsHB>();

            EventsHB julyGroup = new EventsHB() { month = "July" };
            EventsHB juneGroup = new EventsHB() { month = "June" };

            foreach (var item in allItem)
            {
                EventsHBTwo hb = item;
                if (hb.month == "July")
                {
                    julyGroup.Add(hb.eventTO);
                }
                else if (hb.month == "June")
                {
                    juneGroup.Add(hb.eventTO);
                }
            }

            //at last, add them to All items.
            AllItems.Add(julyGroup);
            AllItems.Add(juneGroup);
        }

最后在 xaml 中，在此处添加 IsGroupingEnabled GroupShortNameBinding GroupDisplayBinding：

<ListView x:Name="MyEventsListview"
                      RefreshCommand="{Binding RefreshCommand}"
                      IsRefreshing="{Binding IsRefreshing}"
                      IsPullToRefreshEnabled="True"
                      HasUnevenRows="True"
                      ItemsSource="{Binding AllItems,Mode=TwoWay}"
                      BackgroundColor="White"
                      IsGroupingEnabled="True"
                      GroupDisplayBinding="{Binding month}"
                      GroupShortNameBinding="{Binding month}">

并直接使用 startDate startTime 而不是 eventTO.startDate。

我在这里上传了我的示例，您可以查看它：working-grouped-listView-xamarin.forms

实现此目的的最佳方法是要求您的服务端为您提供这样的 json：

{"eventsHB":
    {july:[

        {"eventTO":{"calendarEventId":135,}}

        {"eventTO":{"calendarEventId":135,}}

        {"eventTO":{"calendarEventId":135,}}

        {"eventTO":{"calendarEventId":135,}}
    }

    {june:[

        {"eventTO":{"calendarEventId":135,}}

        {"eventTO":{"calendarEventId":135,}}

        {"eventTO":{"calendarEventId":135,}}

        {"eventTO":{"calendarEventId":135,}}

         ]
    }
    ...
}