Search code examples
.netxamlmaui

How can a FlexLayout be created inside a ScrollView using XAML?

I encountered a problem with XAML Layout creation.

My XAML code is the following:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Achievement_Up.Achievements"
             Title="Achievements">

    <ScrollView Margin="20">

        <FlexLayout Wrap="Wrap"
                    Direction="Row"
                    AlignContent="Start">

            <BoxView Color="black" 
                     HeightRequest="100"
                     WidthRequest="100"/>

            <BoxView Color="Green" 
                     HeightRequest="100"
                     WidthRequest="100"/>

        </FlexLayout>

    </ScrollView>

</ContentPage>

My debug output, on the contrary of my expectations, is the following:

Output

Can anybody clarify for me how these tags works? I don't really know what am I doing wrong.

Lastly, there's no c# code behind the xaml page.

EDIT

I would like to see my two boxes on the top left corner in a row, instead of seeing them in the center/left side of the ScrollView. Knowing how to handle tags likes ScrollView or FlexLayour works could help me get better at developing .NET MAUI applications.

Solution
    1. Maybe you don't need ScrollView? FlexLayout is already capable of scrolling. Nesting two scrollable layouts may cause other problems.
    2. Use AlignItems instead of AlignContents.
    3. I suspect the ScrollView is getting centered in the ContentPage. Try setting ScrollView's VerticalOptions="Start". OR if you remove ScrollView, set VerticalOptions on the FlexLayout.