I have Items in a stack layout with horizontal orientation being cut off instead of moving to a new line end of the screen. See below code to re-produce the issue. Is this a bug in MAUI? How can I make the text wrap within the stack layout? I did try enclosing the stack layout in a grid but still did not fix the issue.
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="sampleCode.MainPage">
<StackLayout Margin="10">
<Label Text="List of names"/>
<StackLayout x:Name="namesList" Orientation="Horizontal" Spacing="15">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Name}"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</ContentPage>
Code behind
using System.Collections.ObjectModel;
namespace sampleCode;
public partial class MainPage : ContentPage
{
public class User
{
public int id { get; set; }
public string Name { get; set; }
}
public ObservableCollection<User> Users;
public MainPage()
{
InitializeComponent();
Users = new ObservableCollection<User>
{
new User { id = 1, Name = "Ali" },
new User { id = 2, Name = "Ali" },
new User { id = 3, Name = "Ali" },
new User { id = 4, Name = "Ali" },
new User { id = 5, Name = "Ali" },
new User { id = 6, Name = "Ali" },
new User { id = 7, Name = "Ali" },
new User { id = 8, Name = "Ali" },
new User { id = 9, Name = "Ali" },
new User { id = 10, Name = "Ali" },
new User { id = 11, Name = "Ali" },
new User { id = 12, Name = "Ali" },
new User { id = 13, Name = "Ali" },
new User { id = 14, Name = "Ali" },
new User { id = 15, Name = "Ali" },
new User { id = 16, Name = "Ali" },
new User { id = 17, Name = "Ali" }
};
BindableLayout.SetItemsSource(namesList, Users);
}
}
The modified XAML code to fix the issue. Setting the label height request should help in adjusting the flex layout height when items inside it grow.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="sampleCode.MainPage">
<StackLayout Margin="10">
<Label Text="List of names"/>
<FlexLayout x:Name="namesList" Wrap="Wrap" >
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout >
<Label HeightRequest="30" Text="{Binding Name}"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</StackLayout>
</ContentPage>