如何迭代.NET MAUI页面XML中的字典观测

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<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中将其转移到

//...
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页面中的观察力collection，我知道如何知道如何知道如何迭代一个简单的列表。但是我找不到有关此数据结构的解决方案。

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

考虑一下您是否真的需要嵌套收集视图。通常有更好的解决方案，涉及不可滚动的布局。稍后我给你一个例子。

您在ViewModel中有三个嵌套集合（ observableCollection ， dictionary 和 list＆lt; openjob＆gt; ），所以要小心，因为您的第一个视图中的布局必须绑定 observableCollection ，而不是字典。

我给您的另一个建议是使用自定义类而不是字典，因为这允许您继续使用 x：datatype ，而如果您继续使用字典，则要删除它，否则将生成编译时错误。

您可以以这种方式在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>

如果您确实需要嵌套CollectionViews，则只需用另一个 verticalStackLayout 用另一个 Collection> Collection> Collection> Collection view 替换 > bindableLayout 带有经典的标签。