带有方形图像的 Xamarin Forms CollectionView答案

【问题标题】：Xamarin Forms CollectionView with square images带有方形图像的 Xamarin Forms CollectionView
【发布时间】：2019-06-20 15:56:26
【问题描述】：

我想使用 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>

【问题讨论】：

将 WidthRequest 设置为等于您的 HeightRequest
@SushiHangover 单元格宽度必须等于页面的一半（四分之一）。我应该在运行时计算它并从视图模型传递给数据模板吗？

标签： xamarin xamarin.forms collectionview

【解决方案1】：

感谢其他答案，我最终将自定义 ContentView 设置为等于 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>

【讨论】：

感谢您的解决方法！但是，就我而言，HeightRequest = Width 有时会被忽略。在该行之前添加await Task.Yield() 使它对我来说更稳定。或者，它可以被包裹在BeginInvokeOnMainThread，see the related answer。
@Sourcerer，你确实是个巫师！先生，请您表示诚挚的谢意。

【解决方案2】：

我已经复制了一个小样本。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

您能解释一下原因吗？为了性能一般不建议添加额外的嵌套？ docs.microsoft.com/en-us/xamarin/xamarin-forms/deploy-test/…