带有列表中列表的Xamarin表单ViewModel

Question

我有问题。我创建了一个ViewModel，可以进行网络通话并收集带有相册的列表：列表。

这里是相册类：

public class Album
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Image> Image { get; set; }
    public decimal Price { get; set; }
}

如您所见，相册包含另一个带有图像的列表：

public class Image
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Format { get; set; }
    public decimal Price { get; set; }
    public ImageSource imageSource { get; set; }
}

在xaml中，我创建了一个CollectionView，它确实充满了相册，但是在相册中，我想显示相册包含的所有图像。问题是我不知道如何显示来自albumList<Album>的图像。这是我当前的xaml：

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid HeightRequest="86">
            <Grid.RowDefinitions>
                <RowDefinition Height="3"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="3"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="3"/>
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="1" Grid.Column="3" Orientation="Horizontal">
                <Label VerticalTextAlignment="Center" VerticalOptions="Center"  HorizontalOptions="StartAndExpand"
                        Text="{Binding Name}" TextColor="Black" FontAttributes="Bold" FontSize="18" />
                <Label VerticalTextAlignment="Center" VerticalOptions="Center"  HorizontalOptions="EndAndExpand"
                        Text="{Binding Price, StringFormat='€ {0:F2}'}" TextColor="Black" FontSize="18"/>
            </StackLayout>

            <!--
            Show all the images -->

        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

这里是我想要的结果的示例图像：

如何创建此布局？

Answer 1

您可以使用可绑定布局。这使从Layout类派生的任何布局类都可以通过绑定到项目集合来生成其内容。

在xaml中

<StackLayout  Grid.Row="xx" Grid.Column="xx" BindableLayout.ItemsSource="{Binding Image}" Orientation="Horizontal">
   <BindableLayout.ItemTemplate>
      <DataTemplate>

          <Image  HeightRequest="30" WidthRequest="30" Aspect="AspectFit" Source="{Binding imageSource}"/>

      </DataTemplate>
   </BindableLayout.ItemTemplate>
</StackLayout>

在后面的代码中

public class MyImage
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Format { get; set; }
    public decimal Price { get; set; }
    public string MyImageSource { get; set; }
}

注意：我注意到您将iamge类定义为Image，这可能与Xamarin.Forms.Image发生名称冲突。因此，您最好将其重命名为MyImage