Xamarin 使用列表中的列表形成 ViewModel

Question

我有個問題。 我創建了一個 ViewModel，它進行網絡通話並收集一個帶有專輯的列表：List。

這是相冊類：

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>

這是我想要的結果的示例圖像：

如何創建此布局？

更新

為了獲得更大的圖像，我從列表中刪除了第一個圖像，並在不同的網格列中創建了一個圖像。 但這不會顯示。 這是我現在擁有的 xaml：

<CollectionView ItemsSource="{Binding albumList}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <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>

                <Image  Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" 
                        Aspect="AspectFill">
                    <Image.Source>
                        <FileImageSource File="{Binding demoImage}" />
                    </Image.Source>
                </Image>

                <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>



                <StackLayout  Grid.Row="2" Grid.RowSpan="2" Grid.Column="3" BindableLayout.ItemsSource="{Binding Images}" Orientation="Horizontal">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Image  HeightRequest="40" WidthRequest="55" Aspect="AspectFill" Source="{Binding imageSource}"/>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>




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

demoImage 是 ViewModel 中的不同變量 ImageSource，但 demoImage 不會顯示。 我怎樣才能解決這個問題？

Answer 1

您可以使用Bindable Layouts 。 這使得從 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

更新

<Image  Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Aspect="AspectFill" Source="{Binding demoImage}" />

public class Album
    {

        public Album()
        {
            DemoImage = Images[0].MyImageSource;
            Images.RemoveAt(0);
        }

        public int Id { get; set; }
        public string Name { get; set; }
        public ObservableCollection<MyImage> Images { get; set; }
        public string Price { get; set; }

        public string DemoImage { get; set; }
    }