UniformGrid

Question

当前：目标：

尝试实现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,
    }
);

Answer 1

您应该查看CollectionView Nuget Package

您可以使用基于WrapLayout的GridCollectionView。

在那里，您可以使用：

UniformGrid

指定每行中排列的列数。每个列的宽度变为通过将行宽度除以该值而获得的宽度。可以通过PortraitColumns和LandscapeColumns属性设置此列数。 “

AutoSpacingGrid

一旦指定了列宽，就会排列每一列，直到适合每一行为止，并自动调整每个间距。可以通过ColumnWidth属性设置列宽，而Setting 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>

Answer 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绑定。

WrapLayout中的Xamarin.Forms大小调整元素

2 个答案:

UniformGrid

AutoSpacingGrid