Xamarin使用正方形图像形成CollectionView

Question

我想用Xamarin表单将图像列表显示为具有多行(2行或4行)的网格。网格的每个单元格都必须是正方形。我正在使用垂直布局的CollectionView，所需的跨度和DataTemplate中固定的HeightRequest。我得到多列网格，但我不能使图像(单元)成为正方形。

<CollectionView ItemsSource="{Binding .}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="2" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Image
                        HeightRequest="100"
                        x:Name="imageCell"
                        Aspect="AspectFill"
                        Source="{Binding .}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

Answer 1

多亏了另一个答案，我最终得到了自定义ContentView，将HeightRequest设置为Width，并在其中设置图像。

    public class SquareView : ContentView
    {
        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            HeightRequest = Width;
        }
    }

和XAML

<CollectionView
                ItemsSource="{Binding .}">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout
                        Orientation="Vertical"
                        Span="2" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <views:SquareView>
                            <Image
                                HeightRequest="20"
                                Aspect="AspectFill"
                                Source="{Binding .}" />
                        </views:SquareView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Answer 2

我复制了一个小样本。

我添加的唯一一件事就是将图像包装在一个contentview中，应用一个填充(你可以忽略它)

 <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="2" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <ContentView Padding="0">
                    <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzJUY4JZTX9oYsSl1jclFvdsoXhtA0AfxqKkYX2P81Qb3cyX9o"
                           HeightRequest="150"
                           Aspect="AspectFill"
                           />
                        </ContentView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

​

​

Answer 3

在DataTemplate中，不要使用<Image></Image>作为根布局。相反，可以使用其中一个布局控件(StackLayout、AbsoluteLayout等)或者ContentView，然后将一些样式或任何您喜欢的样式应用到CollectionView的根布局中。

<DataTemplate>
   <StackLayout>
      <Image
         HeightRequest="100"
         x:Name="imageCell"
         Aspect="AspectFill"
         Source="{Binding .}" />
   </StackLayout>
</DataTemplate>