带有方形图像的 Xamarin Forms CollectionView

Question

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

<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

我复制了一个小样本。

我唯一添加的是将图像包裹在内容视图中，应用填充（您可以忽略）

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

不要使用 <Image></Image> 作为 DataTemplate 中的根布局。相反，使用布局控件（StackLayout、AbsoluteLayout 等）或 ContentView 之一，然后将一些样式或您喜欢的任何样式应用于 CollectionView 的根布局。

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

Answer 3

感谢其他答案，我最终得到了自定义 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>

带有方形图像的 Xamarin Forms CollectionView

Xamarin Forms CollectionView with square images

xamarin

xamarin.forms

collectionview