如何使用Xamarin表单中的集合视图添加两行不同的图像

Question

View Image here..See section circled with black ink我想在项目的“集合”视图中添加第二行。假设此第二行是水平列出的第一行，并且由不同的图像组成

我已经尝试将另一个图像标签添加到集合视图模板中，但确实解决了我的问题，因为它会重复两次相同的图像。在下面找到我的代码

<CollectionView ItemsSource="{Binding sliders}" 
                HorizontalOptions="CenterAndExpand" HeightRequest="150" >
    <CollectionView.ItemsLayout>
        <ListItemsLayout>
            <x:Arguments>
                <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
            </x:Arguments>
        </ListItemsLayout>           
     </CollectionView.ItemsLayout>        
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#282626" Padding="0,5,0,0" >
                <Grid.RowDefinitions >
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Url}"
                       Aspect="AspectFill"
                       HeightRequest="160"
                       WidthRequest="160" 
                       Grid.Row="0"
                       VerticalOptions="CenterAndExpand"
                       HorizontalOptions="CenterAndExpand"/>
                 <Label Text="{Binding Name}" TextColor="White" />       
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

上面的代码向项目添加了一行一行的collections视图。 请帮助我添加第二行以不同的图像。

Answer 1

CollectionView元素在Source中每个对象显示一行（在本例中为“滑块”）。因此，为了创建另一行，您只需将另一个对象添加到要在第二行中显示的图像的“滑块”列表中。

向Image添加另一个DataTemplate将不起作用，因为它将引用相同的对象，并且如果您使用与图像源相同的属性（在本例中为“ Url” ），它将显示相同的图像。