Im trying to display some items, for which, right now, I'm using a HorizontalStackLayout.
They should be displayed horizontally, but instead of acting like this:
Where the thrid item is not displayed fully and the following Items are not displyed at all, they should be wrapped to the next line. Which would look like (or similar to) this:
Is this possible with a HorizontalStackLayout or is there any other View that could create an effect like this?
The xaml for the Stacklayout looks like this at the moment:
<HorizontalStackLayout Grid.Column="1" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" Margin="10">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Border BackgroundColor="White" HeightRequest="150" MinimumWidthRequest="180" Margin="5">
<Border.StrokeShape>
<RoundRectangle CornerRadius="20,20,20,20"/>
</Border.StrokeShape>
<Grid RowDefinitions="*,*">
<Border Grid.Row="0" StrokeThickness="2" Stroke="lightgray" BackgroundColor="AliceBlue" Margin="2">
<Border.StrokeShape>
<RoundRectangle CornerRadius="20,20,20,20"/>
</Border.StrokeShape>
</Border>
<Label Grid.Row="1" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding Title}" TextColor="Black"></Label>
</Grid>
</Border>
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
CodePudding user response:
StackLayout does just that, it stacks. Be it Horizintally or vertically, it stacks one item after another. It will never make an additional row if horizontal, or another column if vertical.
The FLexLayout however does have a Wrap property for this exact scenario. Couple with the FlexDirection you should be able to wrap it any which way.
Depending on how you want to display your items, between all the different layouts available, you should be able to find one that suits your needs.