FlowListview（Xamarin）中的方形图像答案

【问题标题】：Square Images in FlowListview (Xamarin)FlowListview（Xamarin）中的方形图像
【发布时间】：2017-05-17 14:52:05
【问题描述】：

我想创建一个具有相同行数和列数的 FlowListView，它包含具有相同高度和宽度的图像。但是，FlowListView 会扭曲行的高度，使其不等于列的宽度。如何将列的宽度绑定到 RowHeight（如下所示）？

<controls:FlowListView RowHeight="{Binding ColumnWidth}" ...>
    <controls:FlowListView.FlowColumnTemplate>
      <DataTemplate>
        <Image ... />
      </DataTemplate>
    </controls:FlowListView.FlowColumnTemplate>
</controls:FlowListView>

【问题讨论】：

我面临同样的问题。你解决了吗？

标签： c# image xaml xamarin

【解决方案1】：

我在代码中而不是在 Xaml 中执行此操作，因为我发现它更容易应用，但它应该是类似的（并且可能有比我更好的方法）。

我在 FlowListView 控件上将“HasUnevenRows”属性设置为 true。

Flow = new FlowListView()
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            FlowColumnCount = 3,
            FlowColumnTemplate = new DataTemplate(typeof(FlowCellImage)),
            FlowTappedBackgroundDelay = 250,
            FlowTappedBackgroundColor = Color.Gray,
            SeparatorVisibility = SeparatorVisibility.Default,
            IsPullToRefreshEnabled = true,
            HasUnevenRows = true,
            //Margin = thickness
        };

然后在图像上，我将“HeightRequest”属性设置为“Application.Current.MainPage.Width / 3”，因为我的行中有 3 张图片。

public class FlowCellImage : FlowViewCell
    {
        private Image ImgPost;
        public FlowCellImage()
        {
            ImgPost = new Image
            {
                Aspect = Aspect.AspectFill
            };
            ImgPost.SetBinding(Image.SourceProperty, "ThumbnailUrl");

            HeightRequest = Application.Current.MainPage.Width / 3;
            Content = ImgPost;
        }
    }

【讨论】：