Custom Layouts in .NET MAUI

In .NET MAUI, custom layouts allow you to go beyond the built-in ones (StackLayout, Grid, FlexLayout, AbsoluteLayout, etc.) and design your own layout behavior when the defaults don’t fit your needs.

🔑 What Are Custom Layouts?

A custom layout is a class you create that inherits from Layout (or Layout<T>). You override its measuring and arranging logic to control how child views are sized and positioned. This gives you full flexibility to implement unique UI patterns.

⚙️ Key Steps to Create a Custom Layout

Inherit from Layout

csharp

public class CustomLayout : Layout<View>
{
    protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
    {
        // Measure children and return desired size
    }

    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        // Position and size children here
    }
}

Override OnMeasure

Decide how much space the layout needs.

Typically, measure each child and calculate total width/height.

Override LayoutChildren

Arrange children at specific coordinates.

You can implement custom rules (e.g., circular arrangement, staggered grid).

📘 Example: Circular Layout

csharp

public class CircleLayout : Layout<View>
{
    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        double radius = Math.Min(width, height) / 2;
        double angleStep = 360.0 / Children.Count;
        double centerX = width / 2;
        double centerY = height / 2;

        for (int i = 0; i < Children.Count; i++)
        {
            var child = Children[i];
            double angle = i * angleStep * Math.PI / 180;
            double childX = centerX + radius * Math.Cos(angle) - child.Width / 2;
            double childY = centerY + radius * Math.Sin(angle) - child.Height / 2;

            LayoutChildIntoBoundingRegion(child, new Rect(childX, childY, child.Width, child.Height));
        }
    }
}

👉 This arranges children in a circle around the center.

✅ Why Choose Custom Layouts?

When built-in layouts don’t meet your design requirements.

To implement unique UI patterns (e.g., radial menus, staggered cards).

To optimize performance by controlling measurement/arrangement directly.

To encapsulate reusable layout logic for consistency across your app.

📌 Common Use Cases

Radial Menus: Buttons arranged in a circle.

Custom Dashboards: Widgets positioned in non-standard ways.

Game UIs: Special positioning of sprites or controls.

Specialized Grids: Masonry layouts, staggered lists.

Data Visualizations: Charts or diagrams with custom positioning.

⚠️ Considerations

Complexity: Requires careful handling of measurement and arrangement.

Performance: Avoid heavy calculations in OnMeasure and LayoutChildren.

Responsiveness: Ensure your layout adapts to different screen sizes.

✨ In short: Custom layouts in MAUI give you full control over how children are measured and arranged, letting you build unique, reusable, and optimized UI patterns that go beyond the standard layouts.

Custom Layouts vs AbsoluteLayout in .NET MAUI

Custom Layouts vs AbsoluteLayout in .NET MAUI so you can see when to build your own versus reusing AbsoluteLayout.

⚖️ Custom Layouts vs AbsoluteLayout

Aspect	AbsoluteLayout	Custom Layouts
Positioning	Uses LayoutBounds + LayoutFlags for fixed or proportional placement	You write your own logic in OnMeasure and LayoutChildren
Overlapping	Supports overlapping elements easily	You decide whether overlap is allowed or not
Flexibility	Limited to absolute or proportional positioning	Unlimited — you can implement circular, staggered, radial, or any custom arrangement
Ease of Use	Quick to set up, no extra code	Requires coding and understanding of layout lifecycle
Performance	Optimized for simple absolute positioning	Can be optimized for specific scenarios, but depends on your implementation
Use Cases	Dashboards, overlays, floating buttons, games	Radial menus, masonry grids, custom charts, unique UI patterns
Maintainability	Easy for small projects, but hard to adapt across devices if using fixed coordinates	More maintainable for reusable, complex patterns since logic is centralized in one class

✅ When to Choose Each

Choose AbsoluteLayout if you need quick, precise placement or overlapping elements without writing custom code. Example: placing a floating button at bottom-right.

Choose Custom Layouts if you need unique arrangements or reusable complex patterns that built-in layouts don’t support. Example: a circular menu or staggered card grid.

📘 Example Contrast

AbsoluteLayout (overlay button):

xml

<AbsoluteLayout>
    <Button Text="+" 
            AbsoluteLayout.LayoutBounds="1,1,0.2,0.1"
            AbsoluteLayout.LayoutFlags="PositionProportional,SizeProportional"/>
</AbsoluteLayout>

Custom Layout (circle arrangement):

csharp

public class CircleLayout : Layout<View>
{
    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        double radius = Math.Min(width, height) / 2;
        double angleStep = 360.0 / Children.Count;
        double centerX = width / 2;
        double centerY = height / 2;

        for (int i = 0; i < Children.Count; i++)
        {
            var child = Children[i];
            double angle = i * angleStep * Math.PI / 180;
            double childX = centerX + radius * Math.Cos(angle) - child.Width / 2;
            double childY = centerY + radius * Math.Sin(angle) - child.Height / 2;

            LayoutChildIntoBoundingRegion(child, new Rect(childX, childY, child.Width, child.Height));
        }
    }
}

✨ In short:

Use AbsoluteLayout for quick, precise, overlapping placement.

Build a Custom Layout when you need unique, reusable, or complex arrangements that go beyond what AbsoluteLayout can do.