Search code examples
mauistacklayout

Stack Layout items cut off .NET MAUI

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);

    }


}

Issue

Solution

  • 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>