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

【问题标题】：Xamarin Forms ListView Binding to Child Object List in an Observable collectionXamarin Forms ListView 绑定到 Observable 集合中的子对象列表
【发布时间】：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 所做的那样。也许这是要走的路。我还没有使用这个组件的经验，所以我现在不能分享答案，但我会研究一下。

标签： listview xamarin.forms

【解决方案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

【讨论】：