Back to results for “XAML & UI Layouts”
.NET MAUI › XAML & UI Layouts

How do you build responsive/adaptive layouts in MAUI?

Advanced

Answer

Combine several techniques: use star-sizing Grids and FlexLayout for fluid resizing; use OnIdiom and OnPlatform to vary values by device type; use VisualStateManager with size triggers or the DeviceDisplay metrics; and use the AdaptiveTrigger-like state triggers to restructure UI at breakpoints for phone vs tablet vs desktop.
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="{OnIdiom Phone='*', Desktop='300'}" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
</Grid>
Real-world example A master-detail app shows a single stacked column on phones but a fixed 300px sidebar plus content on desktop, driven by OnIdiom.

Common follow-ups: What is OnIdiom? | How do state triggers restructure layout?