Xamarin Forms ViewModel with List in List

Question

I have a problem. I created a ViewModel that does a webcall and collects a List with albums: List.

Here is the Album class:

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

As you can see the Album contains another List with Images:

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

In the xaml I created a CollectionView that does get filled with the Albums, but in the Albums I want to show all the images the album contains. The problem is that I don't know how to show those images from the albumList<Album>. Here is my current 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>

Here is an example image of the result I want:

How can I create this layout?

UPDATE

To get one bigger image I removed the first image from the list and created a Image in a different grid column. But that doesn't get displayed. Here is the xaml I have now:

<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 is a different variable ImageSource in the ViewModel, but the demoImage doesn't get displayed. How can I fix this?

Answer 1

You could use Bindable Layouts . Which enable any layout class that derives from the Layout class to generate its content by binding to a collection of items.

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

in code behind

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

Note: I noticed that you define your iamge class as Image , which maybe will have name conflict with Xamarin.Forms.Image . So you would better rename it like MyImage

Update

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