Expand child node in FlexLayout

[daltzctr]

To simplify things, I'll start off with the behavior I'm looking for.

1 row:

• Child 1 has fixed width/height of 200px
• Child 2 should expand to fill remaining width and height
• If the application resizes to Child 2 MinimimumWidthRequest, it should flow into row 2

2 rows

• Child 1 has fixed width/height of 200px
• Child 2 should expand width and remaining height

I have something very similar to what I'm looking for, but row 1 seems to arbitrarily fitting to about half of available screen width.

What I want with only 1 row of FlexLayout:

What I want when child 2 hits it's MinimumWidthRequest:

I know how to accomplish this in HTML + CSS, but I don't see a MAUI equivalent to this sort of dynamic layout?

An example or PoC that accomplishes the above would be awesome.

[Redth]

While writing a custom layout initially may be intimidating, it's actually really not that difficult to do. This might be a good application of it. There's some great examples here: https://github.com/hartez/CustomLayoutExamples

Alternatively you may be able to achieve what you want with triggers. Here's a nice blog that describes an approach: https://blog.ewers-peters.de/add-responsive-layouts-to-your-maui-app

[daltzctr]

Thanks for the pointers. I'll take a look at using triggers, or even just having two layouts that are swapped depending on screen width.

Custom Layouts seem like a lot of complexity for this scenario, especially since I'm so close (Basis seems to only be applying when the main axis is horizontal, instead of changing when the main axis switches to vertical)

[Redth]

Custom layouts don't need to be complex, especially if you're building them for a specific purpose (eg: you don't need to factor in margins/padding if you don't need them in your scenario). It would be great for more devs to get more comfortable with building these.

I took a few minutes to put something together (maybe not exactly what you want but it's a start in the direction I think), just to show how simple these can really be:

using Microsoft.Maui;
using Microsoft.Maui.Graphics;
using Microsoft.Maui.Layouts;

namespace MauiResponsiveLayoutExample;

public class ResponsiveLayout : StackLayout
{
    public double MinimumWidthConstraint { get; set; } = 100;

    protected override ILayoutManager CreateLayoutManager()
        => new ResponsiveLayoutManager(this);
}

public class ResponsiveLayoutManager : Microsoft.Maui.Layouts.StackLayoutManager
{
    ResponsiveLayout layout;

    public ResponsiveLayoutManager(ResponsiveLayout responsiveLayout) : base(responsiveLayout)
    {
        layout = responsiveLayout;
    }

    IView child1;
    IView child2;
    
    Size child2Measure = Size.Zero;
    Size child1Measure = Size.Zero;
    Size finalSize = Size.Zero;
    bool overflows = false;
    
    public override Size Measure(double widthConstraint, double heightConstraint)
    {
        if (layout.Count != 2)
            throw new Exception($"Expected 2 children, found {layout.Count}");
        
        double totalWidth = 0;
        double totalHeight = 0;

        child1 = layout[0];
        child2 = layout[1];

        child1Measure = child1.Measure(widthConstraint, heightConstraint);
        child2Measure = child2.Measure(widthConstraint, heightConstraint);
        
        // Does child2 exceed the width required to stay on one row?
        if ((widthConstraint - child1Measure.Width) < layout.MinimumWidthConstraint)
        {
            overflows = true;
            child2Measure.Width = widthConstraint;
            totalWidth = Math.Max(child1Measure.Width, child2Measure.Width);
            totalHeight = child1Measure.Height + child2Measure.Height;
        }
        else
        {
            overflows = false;
            child2Measure.Width = widthConstraint - child1Measure.Width;
            totalWidth = child1Measure.Width + child2Measure.Width;
            totalHeight = Math.Max(child1Measure.Height, child2Measure.Height);
        }

        finalSize = new Size(totalWidth, totalHeight);
        return finalSize;
    }

    public override Size ArrangeChildren(Rect bounds)
    {
        if (overflows)
        {
            child1.Arrange(new Rect(bounds.Left, bounds.Top, child1Measure.Width, child1Measure.Height));
            child2.Arrange(new Rect(bounds.Left, bounds.Top + child1Measure.Height, child2Measure.Width, child2Measure.Height));
        }
        else
        {
            child1.Arrange(new Rect(bounds.Left, bounds.Top, child1Measure.Width, child1Measure.Height));
            child2.Arrange(new Rect(bounds.Left + child1Measure.Width, bounds.Top, child2Measure.Width, child2Measure.Height));
        }

        return finalSize;
    }
}

And for example in XAML:

<mauiResponsiveLayoutExample:ResponsiveLayout MinimumWidthConstraint="300">
        <ContentView
            Background="Blue"
            WidthRequest="200"
            HeightRequest="200" />
        <ContentView
            Background="Green"
            HeightRequest="300" />
</mauiResponsiveLayoutExample:ResponsiveLayout>