I have a Grid where I have defined the Height as 50, and then displaying a bunch of labels bound to a List. How can I overflow the Labels from row to row instead of what’s happening now which is squeezing the Labels vertically?
public List LabelList { get; set; } = new List
{
“Cat”,
“Dog”,
“Fox”,
“Leopard”,
“Bear”,
“Monkey”,
“Lion”,
“Bison”,
“Alpaca”,
“Sheep”,
“Ant”,
“Fox”,
“Tiger”,
“Elephant”,
“Mouse”,
“Eagle”,
“Coyote”
};
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="50" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
Text="{Binding}" />
</StackLayout>
<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />
3
Answers
I had to use FlexLayout instead of StackLayout
Have you tried something like?:
From what I gather, you haven’t set your
LayoutOptions
for the labels you are trying to stack.https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout
If you want to display UI like the screenshot, you can take a look the following code: