Layouts

Cross-platform layouts for MAUI applications to simplify dealing with templates, BindingContext in XAML, and advanced layout scenarios.

Getting Started

Add layouts support to your application in MauiProgram.cs:

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .UseNaluLayouts(); // Add this line

Available Components

Nalu.Maui.Layouts provides several powerful components:

Component	Description
ViewBox	Lightweight replacement for ContentView with content binding context support
TemplateBox	View holder based on DataTemplate or DataTemplateSelector
ToggleTemplate	Conditional template switcher based on boolean value
ExpanderViewBox	Animated collapsible content container
HorizontalWrapLayout	Flow layout that wraps children left-to-right, top-to-bottom
VerticalWrapLayout	Flow layout that wraps children top-to-bottom, left-to-right
Popups	Flexible modal popup system
Magnet	Constraint-based layout engine

Quick Examples

ViewBox with Content Binding

<nalu:ViewBox ContentBindingContext="{Binding SelectedAnimal}">
    <views:AnimalView x:DataType="models:Animal" />
</nalu:ViewBox>

Wrap Layout for Tags

<nalu:HorizontalWrapLayout HorizontalSpacing="8" VerticalSpacing="8">
    <Label Text="Tag 1" BackgroundColor="LightBlue" Padding="8,4" />
    <Label Text="Tag 2" BackgroundColor="LightGreen" Padding="8,4" />
    <Label Text="Tag 3" BackgroundColor="LightCoral" Padding="8,4" />
</nalu:HorizontalWrapLayout>

Animated Expander

<nalu:ExpanderViewBox CollapsedHeight="100" IsExpanded="{Binding IsExpanded}">
    <Label Text="{Binding LongDescription}" />
    </nalu:ExpanderViewBox>

Learn More

• 📘 ViewBox, TemplateBox & ToggleTemplate - Template containers and content binding
• 📘 ExpanderViewBox - Animated collapsible content
• 📘 Wrap Layouts - Horizontal and vertical flow layouts with expand modes
• 📘 Popups - Modal popup system
• 📘 Magnet - Constraint-based layout engine