從列表填充分組的ListView

Question

我有一大堆通過解析JSON文件檢索的對象。 現在，我將所述列表綁定到ListView但是該列表很笨拙，我想將其分成單獨的組以方便使用。 我嘗試遵循幾種不同的指南，但無法以正確的方式准備數據。 如果我用某些項目手動初始化一個排序列表，它們確實會顯示出來，那么代碼確實起作用了。

我的分組模型：

public class SortedItem
{
    public string Header { get; set; }
    public List<Item> Items { get; set; }

    public SortedItem(string header)
    {
        Header = header;
    }
}

我的對象模型：

public class Item
{
    public string item { get; set; }
    //public int icon { get; set; }

    private string ico;
    public string icon
    {
        get { return ico; }
        set { ico = "Icons/" + value + ".png"; }
    }

    public int id { get; set; }
    public string slot { get; set; }
    public string scrip { get; set; }
    public Reduce reduce { get; set; }
    public int lvl { get; set; }
    public string zone { get; set; }
    public int time { get; set; }
}

現在，我的XAML如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="Eorzea_Gatherer.Pages.NodesPage"
     xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
     ios:Page.UseSafeArea="true"
     BackgroundColor="#F4F4F4">
<!--https://xamarinhelp.com/safeareainsets-xamarin-forms-ios/-->
<ListView x:Name="nodesListView"
      IsGroupingEnabled="True"
      GroupDisplayBinding="{Binding Header}"
      HasUnevenRows="True"
      BackgroundColor="#F4F4F4"
      Margin="30, 30, 30, 0">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <Grid Padding="0, 5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding icon}"
                       HeightRequest="50"
                       WidthRequest="50"
                       Grid.Column="0"/>
                <StackLayout Grid.Column="1">
                    <Label Text="{Binding item}"
                           TextColor="#171717"
                           FontSize="13"
                           FontFamily="SegoeUI"/>
                    <!--https://forums.xamarin.com/discussion/97996/binding-more-than-one-property-in-listview-->
                    <Label TextColor="#171717"
                           FontSize="12"
                           FontFamily="SegoeUI">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding zone}"/>
                                <Span Text=" - "/>
                                <Span Text="{Binding slot}"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Label TextColor="#171717"
                           FontSize="12"
                           FontFamily="SegoeUI">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding time}"/>
                                <Span Text=" - "/>
                                <Span Text="00:00 AM"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </StackLayout>
            </Grid>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>
</ListView>

我用來檢索列表並將其作為源綁定到ListView的函數：

public static List<SortedItem> GetSortedItems()
{
    List<Item> items = GetItems();

    List<SortedItem> sortedItems = new List<SortedItem>()
    {
        new SortedItem("50")
        {
           Items = items.Where(x => x.lvl == 50).ToList()
        },
        new SortedItem("55"),
        new SortedItem("60"),
        new SortedItem("65"),
        new SortedItem("70")
    };

    return sortedItems;
}

使用我的代碼，我可以在ListView中看到不同的組（50、55，...），但沒有其他彈出窗口。 我確定我的問題是獲取對象列表並以適當的方式將其拆分，但是我很困惑。 使我感到困惑的是，在調試過程中，將sortedItems懸停在生成的sortedItems我看到我的第一組確實包含了所需的對象，但它們仍未顯示在視圖中。

Answer 1

試試這個，從James Montemagno偷來的

public class Grouping<K, T> : ObservableCollection<T>
{
  public K Key { get; private set; }

  public Grouping(K key, IEnumerable<T> items)
  {
      Key = key;
      foreach (var item in items)
        this.Items.Add(item);
  }
}

var sorted = from item in Items
             orderby item.lvl
             group item by item.lvl into itemGroup
             select new Grouping<int, Item>(itemGroup.Key, itemGroup);

//create a new collection of groups
ItemsGrouped = new ObservableCollection<Grouping<int, Item>>(sorted);

然后在您的XAML中

GroupDisplayBinding="{Binding Key}"

Answer 2

您應該使分組模型繼承自ObservableCollection ：

public class SortedItem : ObservableCollection<Item>
{
    public string Header { get; set; }

    public SortedItem(List<Item> list) : base(list)
    {

    }
}

然后像這樣排序：

public static List<SortedItem> GetSortedItems()
{
    List<Item> items = GetItems();

    List<SortedItem> sortedItems = new List<SortedItem>()
    {
        new SortedItem(items.Where(x => x.lvl == 50).ToList())
        {
            Header = "50"
        },
        new SortedItem(items.Where(x => x.lvl == 55).ToList())
        {
            Header = "55"
        },
        new SortedItem(items.Where(x => x.lvl == 60).ToList())
        {
            Header = "60"
        },
        new SortedItem(items.Where(x => x.lvl == 65).ToList())
        {
            Header = "65"
        },
        new SortedItem(items.Where(x => x.lvl == 70).ToList())
        {
            Header = "70"
        }
    };

    return sortedItems;
}

此外，嘗試在模型中實現INotifyPropertyChanged接口。 否則，如果您在運行時更改了模型的屬性，則不會通知UI。

Answer 3

我可能錯過了一些東西，但是您將List<item> Items綁定在哪里？ 我認為您的ListView缺少諸如ItemSource="{Binding Items}"東西，看來您的ViewCell綁定良好，應該可以按預期工作。