【问题标题】：Xamarin.Forms Sizing elements in a WrapLayoutXamarin.Forms 在 WrapLayout 中调整元素大小
【发布时间】：2019-09-25 13:23:27
【问题描述】：

当前：目标：

尝试实现 WrapLayout 以允许以干净的水平添加格式添加动态按钮，如“目标”图片所示。然而，从“当前”中可以看出，WrapLayout 中按钮的大小远非理想。

通过简单的试验和错误发现，在任何元素（scrollView、wrapLayout、按钮）中使用高度和宽度请求都不会改变按钮格式。

HeightRequest = xx;
WidthRequest = xx;

到目前为止，我发现改变 wrapLayout 元素大小的唯一方法是添加大量子元素，例如：

如图所示，我对如何格式化 WrapLayout 子级的理解相当缺乏。那么，如何格式化每行允许的子级数量以及如何正确格式化 WrapLayout 的子级？

按照Xamarin Developer Sample for WrapLayout 中所示的 WrapLayout 类开发的当前实现

ScrollView scrollView = new ScrollView {
    Margin = new Thickness(20, 20, 20, 20),
};
WrapLayout wrapLayout;
wrapLayout = new WrapLayout {
     ColumnSpacing = 12,
};
scrollView.Content = wrapLayout;
wrapLayout.Children.Add(
    new Button
    {
        Text = "9 ° (?)",
        BackgroundColor = Color.Yellow,
        BorderColor = Color.Black,
    }
);
wrapLayout.Children.Add(
    new Button
    {
        Text = "10.5 ° (?)",
        BackgroundColor = Color.Gray,
        BorderColor = Color.Black,
    }
);

【问题讨论】：

您可以设置 HeightRequest，也可以将 Vertical Options 设置为在 Button Children 中启动
@BrunoCaceiro 太棒了！这更接近了。见ColumnSpacing和RowSpacing，但是如何设置列数、行数？`

标签： xamarin layout xamarin.forms

【解决方案1】：

你应该看看CollectionView Nuget Package

您可以使用基于 WrapLayout 的 GridCollectionView。

在那里，您可以使用：

统一网格

指定每行排列的列数。每一列的宽度变为行宽除以该值得到的宽度。此列数可以通过 PortraitColumns 和 LandscapeColumns 属性设置。 "

AutoSpacingGrid

一旦指定了列宽，每列都会排列，直到适合每一行，并自动调整每个间距。列宽可以通过 ColumnWidth 属性设置，设置 SpacingType 属性可以改变如何调整间距。

一个例子：

<ai:GridCollectionView 
        ItemsSource="{Binding ItemsSource}" TouchFeedbackColor="Yellow"
        ColumnWidth="100" ColumnHeight="1.0" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ai:ContentCell>
                    <Label Text="{Binding Name}" />
                </ai:ContentCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ai:GridCollectionView>

【讨论】：

【解决方案2】：

我推荐使用AiForms.Layout 包：

https://dev.to/muak_x/wraplayout-and-repeatablestacklayout-for-xamarinforms-1dck

这是示例，它按我们的预期工作：

    <aiforms:WrapLayout Spacing="4" UniformColumns="3" IsSquare="true" HorizontalOptions="FillAndExpand">
        <BoxView Color="Red" />
        <BoxView Color="Blue" />
        <BoxView Color="Green" />
        <BoxView Color="Black" />
        <BoxView Color="Yellow" />
    </aiforms:WrapLayout>

还有一个 RepeatableWrapLayout 与 Itemtemplate 和 ItemsSource 绑定。

【讨论】：