Xamarin Forms ListView 绑定到 Observable 集合中的子对象列表

Posted 2023-03-25

【中文标题】Xamarin Forms ListView 绑定到 Observable 集合中的子对象列表

【英文标题】：Xamarin Forms ListView Binding to Child Object List in an Observable collection

【发布时间】：2018-07-25 07:35:54

【问题描述】：

如果答案很明显，请原谅。我对 Xamarin 和 Forms 相当陌生，但对编程或 C# 不熟悉。 我有一个 ListView 可以正常工作并很好地绑定到***对象及其直接属性。它是 GameDTOModel 对象的 ObservableCollection。

public ObservableCollection<GameDTOModel> ActiveGamesCollection  get;  = new ObservableCollection<GameDTOModel>();

GameDTOModel 是这样的：

public class GameDTOModel 

    public int Id  get; set; 

    public string Name  get; set; 

    // Which Game type is used in this game
    public GameType GameType  get; set;     

GameType 如下所示：

public class GameType

    public int Id  get; set; 

    public string Name  get; set; 

    public virtual ICollection<Prize> Prizes  get; set; 

而奖品对象是这样的：

public class Prize

    public int Id  get; set; 

    public string Name  get; set; 

    public string ImageURL  get; set; 

到目前为止，正如我所说的那样简单。我可以毫无问题地访问 ActiveGamesCollection 中的对象并将其绑定到 ListView。 我希望能够在 Prize 对象的 ImageURL 属性中显示图像。例如，一个游戏可能有一个包含 3 个奖品的 GameType，因此它是一个列表。 我的 XAML 如下所示：

<ListView x:Name="GamesView" ItemSelected="GamesViewItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout BackgroundColor="#eee" Orientation="Vertical">
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Binding ...stuff..." />
                        <Label Text="Binding ...stuff..." />
                        <Label Text="Binding ...stuff..." />
                        <Label Text="Binding ...stuff..." />
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
<StackLayout Orientation="Horizontal">
    <Label Text="Loaded "/>
    <Label Text="Binding ActiveGamesCollection.Count"/>
    <Label Text="  games from the server @ "/>
    <Label Text="Binding DebugmsgServerURL"/>
</StackLayout>

Itemsource 和其他东西在后面的代码中设置：

GamesView.ItemsSource = gamesmodel.ActiveGamesCollection;
GamesView.SelectedItem = gamesmodel.SelectedGame;
GamesView.IsPullToRefreshEnabled = true;

我在 List 对象中也有 ActiveGames 的副本，但需要可观察的集合才能填充 ListView。 （似乎）。

我希望能够在 ListView 中列出 3 个图像，但我很难绑定到 ActiveGamesCollection.GameType.Prizes，因为它是可观察的集合。 另外，我从阅读中了解到，您不应该将列表视图嵌套在列表视图中，因此我也需要一个解决方案。我想我可以使用网格视图，但只是开始使用它们。

任何指针任何人？ 谢谢。

【问题讨论】：

每个游戏的奖品数量是不确定的，还是总是 3 个？

是的，对不起，我应该说清楚... GameType 可以有最小 1 到最大“未定义” - 由常识定义 - 奖品。

Binding GameType.Prizes[0].ImageUrl 将为您提供图像的路径，但您必须对索引进行硬编码，因此很难为未确定数量的奖品进行布局

是的，我意识到...

您可以尝试创建自己的视图，该视图应该能够接收该列表 (Binding GameType.Prizes) 并按照您的意愿进行渲染，基本上就像 RepeaterView 所做的那样。也许这是要走的路。我还没有使用这个组件的经验，所以我现在不能分享答案，但我会研究一下。

【参考方案1】：

您可以在 ViewCell 中使用 DynamicWrapLayout 来显示图像。

<suave:DynamicWrapLayout ItemsSource="Binding Items" HorizontalOptions="Fill">
        <suave:DynamicWrapLayout.ItemTemplate>
            <DataTemplate>
                <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
                    <Label Text="Binding ." TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                </StackLayout>
            </DataTemplate>
        </suave:DynamicWrapLayout.ItemTemplate>
</suave:DynamicWrapLayout>

参考https://github.com/SuavePirate/DynamicWrapLayout