C# Xamarin使用列表中的列表形成ViewModel_C#_Xamarin_Xamarin.forms_Xamarin.android_Xamarin.ios

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

c# xamarin xamarin.forms xamarin.android xamarin.ios

C# Xamarin使用列表中的列表形成ViewModel,c#,xamarin,xamarin.forms,xamarin.android,xamarin.ios,C#,Xamarin,Xamarin.forms,Xamarin.android,Xamarin.ios,我有个问题。我创建了一个ViewModel，它可以进行网络调用并收集一个包含albums: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; } } 在xaml中，我

我有个问题。我创建了一个ViewModel，它可以进行网络调用并收集一个包含albums: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; }
}

在xaml中，我创建了一个CollectionView，其中确实充满了相册，但在相册中，我希望显示相册包含的所有图像。问题是我不知道如何显示相册列表中的那些图像

如何创建此布局

更新为了得到一个更大的图像，我从列表中删除了第一个图像，并在不同的网格列中创建了一个图像。但这并没有表现出来。以下是我现在拥有的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不会显示。如何修复此问题？

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

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

MyImage

更新

公共类相册
{
公共相册（）
{
DemoImage=Images[0]。MyImageSource；
图像。移除（0）；
}
公共int Id{get；set；}
公共字符串名称{get；set；}
公共可见收集映像{get；set；}
公共字符串Price{get；set；}
公共字符串DemoImage{get；set；}
}

谢谢，但在该示例中，它将在我的相册中为每个图像创建一个新行，但我希望相册中有一行，在该行中显示每个图像，然后使用水平布局。正如@Jason的评论和@Lucas的回答所描述的，StackLayout就是您所需要的。是否在相册列表中最左边的列中设置图像？然后，相册模型的

SelectedImageSource

属性可能会有所帮助。谢谢，这很有效。。。。关于这一点，还有一个问题，就是为了实现我想要的结果。我希望

列表

的第一个图像较大，并且位于

网格中的不同位置，就像我的示例图像一样。然后，所有其他图像都需要像代码一样显示，当然第一个图像除外。我该怎么做？将图像放在网格的特定单元格中，然后设置绑定。如果有帮助，请不要忘记接受我的回答：）你能告诉我如何为1个图像设置绑定，以及如何跳过BindingLayout的第一个图像吗？你可以从列表中删除第一个源，并将其设置为特定图像的源。。。
<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>

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

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

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