如何在.Net Maui Page XML 中迭代字典的 ObservableCollection

Question

我有一個來自 JSON 的數據結構：

{
"07-2022": [],
"08-2022": [
    {
        "event_title": "asdf"
        "positions": [
            {
                "position_title": "Graphics Op"
            },
            {
                "position_title": "Graphic Design"
            }
        ]
    }
],
"06-2023": []
}

我有工作和職位的模型

public class OpenJob {
    // props...
    public List<Position> positions { get; set; }
}

在我的代碼中，我獲取數據並將其放入 Dictionary

Dictionary<string, List<Models.OpenJob>> OpenJobList = new();

public async Task<Dictionary<string, List<Models.OpenJob>>> getOpenJobs() {
        if (OpenJobList?.Count > 0) {
            return OpenJobList;
        }
        var url = "https://api.com";
        var response = await httpClient.GetAsync(url);

        if (response.IsSuccessStatusCode) {
            //Debug.WriteLine(response.ToString);
            OpenJobList = await response.Content.ReadFromJsonAsync<Dictionary<string, List<Models.OpenJob>>>();
        }
        return OpenJobList;
    }

然后在我的 ViewModel 中，我將它轉移到 ObservableCollection

//...
public ObservableCollection<Dictionary<string, List<OpenJob>>> OpenJobsCollection { get; } = new();
//...
try {
    IsBusy = true;
    var openJobs = await jobsService.getOpenJobs();
    
    if (OpenJobsCollection.Count > 0) {
        OpenJobsCollection.Clear();
    }
    OpenJobsCollection.Add(openJobs);
 }

最后在我的 xml 頁面中，我知道如何迭代一個簡單的列表。 但是我找不到這種數據結構的解決方案。

VerticalStackLayout>
    <CollectionView
        ItemsSource="{This Should be the Dictionary}"
        SelectionMode="None">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="THIS SHOULD BE THE STRING KEY">
                <Frame>
                    <CollectionView
                          ItemSource="{This should be the List of OpenJob Models}" />
                          <CollectionView.ItemTemplate>
                              <DataTemplate x:DataType="Models.OpenJob">
                                  <Label Text="{Binding event_title}"/>
                              </DataTemplate>
                          </CollectionView.ItemTemplate>
                    </CollectionView>
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        
     </CollectionView>
    
    <Button Text="Get Open Jobs"
            Command="{Binding GetOpenJobsCommand}"
            IsEnabled="{Binding IsNotBusy}"
            />
    <ActivityIndicator IsVisible="{Binding IsBusy}"
                       IsRunning="{Binding IsBusy}"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="CenterAndExpand"
                       />
</VerticalStackLayout>

Answer 1

考慮一下你是否真的需要嵌套 CollectionViews。 通常有更好的解決方案，包括不可滾動的布局。 稍后我會給你一個例子。

您的視圖模型中有三個嵌套集合（ ObservableCollection 、 Dictionary和List<OpenJob> ），所以要小心，因為視圖中的第一個布局必須綁定ObservableCollection ，而不是Dictionary 。

我給您的另一個建議是使用自定義類而不是Dictionary ，因為這允許您繼續使用x:DataType ，而如果您繼續使用 Dictionaries ，則必須將其刪除，否則將生成編譯時錯誤。

您可以通過這種方式在 xaml 中迭代字典：

<!-- D is the dictionary in your viewmodel -->
<!-- In your case it will be bound from the ObservableCollection -->

<CollectionView
    ItemsSource="{Binding D}"
    >
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout
                BindableLayout.ItemsSource="{Binding .}"
                >
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <VerticalStackLayout>
                            <Label Text="{Binding Key}" />
                            <Label Text="{Binding Value}" />
                        </VerticalStackLayout>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </VerticalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

如果您確實需要嵌套 CollectionView，只需將外部VerticalStackLayout替換為另一個CollectionView並將BindableLayout標簽替換為經典標簽。