代码之家 › 专栏 › 技术社区 › jtth

沙马林。形式在WrapLayout中调整元素大小

wrap xamarin.forms layout xamarin

0

jtth · 技术社区 · 7 年前

目标:

尝试实现WrapLayout,以便以干净的水平添加格式添加动态按钮,如“目标”图片所示。然而,正如在“Current”中看到的那样,WrapLayout中按钮的大小远远不够理想。

HeightRequest = xx;
WidthRequest = xx;

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

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

中显示的WrapLayout类之后开发的当前实现 Xamarin Developer Sample for 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,
    }
);

1 回复 | 直到 7 年前

1

0

Community Mohan Dere 6 年前

你应该看看 CollectionView Nuget Package

您可以使用基于WrapLayout的GridCollectionView。

在这里,您可以使用:

UniformMgrid公司

指定每行中排列的列数。每个列宽将成为行宽度除以该值得到的宽度。此列数可以通过“肖像列”和“景观列”属性设置。 "

一旦指定了列宽,将对每列进行排列,直到适合每行并自动调整每个间距。列宽可以通过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

0

György Gulyás 6 年前

我建议使用 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绑定。