.NET MAUI

Topics in this category

Advanced & Enterprise Advanced Data Binding & Collections App Lifecycle & Windows Best Practices & Architecture Concurrency & Threading Controls & Views Data Binding & MVVM Dependency Injection & Services Desktop - WinUI & Mac Catalyst Device Features & Essentials Fonts, Icons & Media Forms, Input & Validation Fundamentals & Architecture Gestures & Animations Graphics & Drawing Local Storage & Data Maps & Location Migration from Xamarin.Forms Native Interop & Libraries Networking & APIs

.NET MAUI

XAML & UI Layouts

Q: What is XAML and how is it used in MAUI?

XAML (eXtensible Application Markup Language) is a declarative XML-based language for defining UI. In MAUI each page or view typically has a .xaml file for layout and a .xaml.cs code-behind. XAML elements map to C# objects, so is equivalent to new Label { Text = "Hi" }.

Q: Compare StackLayout, VerticalStackLayout, and HorizontalStackLayout.

VerticalStackLayout and HorizontalStackLayout are optimized single-orientation layouts introduced in MAUI; they are faster because they don't measure both orientations. StackLayout still exists with an Orientation property but is less performant. Prefer the dedicated layouts unless you need to switch orientation at runtime.

Q: How does the Grid layout work in MAUI?

Grid arranges children in rows and columns defined by RowDefinitions and ColumnDefinitions. Sizes can be Auto (fit content), * (proportional star sizing), or absolute. Children are placed with Grid.Row and Grid.Column, and can span cells with Grid.RowSpan/ColumnSpan. It is the most flexible layout for complex screens.

Q: When would you use FlexLayout instead of Grid or StackLayout?

FlexLayout implements CSS flexbox semantics and is ideal when children should wrap, grow, shrink, or align along an axis without fixed rows/columns. Use it for tag clouds, toolbars, or card collections that reflow based on available space, where a Grid would be too rigid.

Q: What is the difference between Margin and Padding?

Padding is space inside an element between its border and its content; it is a property of layouts and some views. Margin is space outside an element between it and its neighbors; it applies to any View. Both accept a Thickness (uniform, horizontal/vertical, or left/top/right/bottom).

Q: How do you build responsive/adaptive layouts in MAUI?

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.

Q: Explain the measure and arrange layout cycle in MAUI.

Layout happens in two passes. In Measure, each layout asks children for their desired size given available space. In Arrange, the layout positions each child within the final rectangle it allocates. Custom layouts implement ILayoutManager (Measure and ArrangeChildren). Minimizing invalidations and avoiding deep nesting keeps this cycle cheap.

7 question(s)

What is XAML and how is it used in MAUI?

Beginner

XAML (eXtensible Application Markup Language) is a declarative XML-based language for defining UI. In MAUI each page or view typically has a .xaml file for layout and a .xaml.cs code-behind. XAML elements map to C# objects, so <Label Text="Hi"/> is equivalent to new Label { Text = "Hi" }.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             x:Class="MyApp.MainPage">
    <VerticalStackLayout Padding="20">
        <Label Text="Hello, MAUI" FontSize="24" />
    </VerticalStackLayout>
</ContentPage>

Real-world example A team keeps designers productive by letting them edit declarative XAML while developers handle logic in code-behind and view models.

Common follow-ups: Can you build UI without XAML? | What is code-behind?

Controls & Views Data Binding & MVVM Markup

Compare StackLayout, VerticalStackLayout, and HorizontalStackLayout.

Beginner

VerticalStackLayout and HorizontalStackLayout are optimized single-orientation layouts introduced in MAUI; they are faster because they don't measure both orientations. StackLayout still exists with an Orientation property but is less performant. Prefer the dedicated layouts unless you need to switch orientation at runtime.

<VerticalStackLayout Spacing="10">
    <Label Text="Row 1" />
    <Label Text="Row 2" />
</VerticalStackLayout>

Real-world example Replacing StackLayout with VerticalStackLayout in a long form measurably reduces layout time during scrolling.

Common follow-ups: Why are the dedicated layouts faster? | When would you still use StackLayout?

Performance & Optimization Grid Controls & Views

How does the Grid layout work in MAUI?

Intermediate

Grid arranges children in rows and columns defined by RowDefinitions and ColumnDefinitions. Sizes can be Auto (fit content), * (proportional star sizing), or absolute. Children are placed with Grid.Row and Grid.Column, and can span cells with Grid.RowSpan/ColumnSpan. It is the most flexible layout for complex screens.

<Grid RowDefinitions="Auto,*" ColumnDefinitions="2*,*">
    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Header" />
    <BoxView Grid.Row="1" Grid.Column="0" Color="Silver" />
    <BoxView Grid.Row="1" Grid.Column="1" Color="Teal" />
</Grid>

Real-world example A dashboard uses a Grid to keep a fixed header row and a content area that splits 2:1 between a chart and a details panel at any window size.

Common follow-ups: What does star sizing mean? | How do you span multiple columns?

Layouts Responsive UI FlexLayout

When would you use FlexLayout instead of Grid or StackLayout?

Intermediate

FlexLayout implements CSS flexbox semantics and is ideal when children should wrap, grow, shrink, or align along an axis without fixed rows/columns. Use it for tag clouds, toolbars, or card collections that reflow based on available space, where a Grid would be too rigid.

<FlexLayout Wrap="Wrap" JustifyContent="SpaceEvenly">
    <Button Text="Tag 1" />
    <Button Text="Tag 2" />
    <Button Text="Tag 3" />
</FlexLayout>

Real-world example A filter bar of chip buttons wraps to a second line on a narrow phone but sits on one line on a tablet, handled entirely by FlexLayout.

Common follow-ups: How does Wrap work? | What are the main FlexLayout properties?

Layouts Responsive UI Grid

What is the difference between Margin and Padding?

Intermediate

Padding is space inside an element between its border and its content; it is a property of layouts and some views. Margin is space outside an element between it and its neighbors; it applies to any View. Both accept a Thickness (uniform, horizontal/vertical, or left/top/right/bottom).

<Frame Padding="16" Margin="8,12">
    <Label Text="Card content" />
</Frame>

Real-world example A card gets breathing room from surrounding cards via Margin while its text is inset from the card edge via Padding.

Common follow-ups: What is a Thickness? | Which elements support Padding?

Layouts Styling Controls & Views

How do you build responsive/adaptive layouts in MAUI?

Advanced

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?

Responsive UI VisualStateManager Multi-window

Explain the measure and arrange layout cycle in MAUI.

Advanced

Layout happens in two passes. In Measure, each layout asks children for their desired size given available space. In Arrange, the layout positions each child within the final rectangle it allocates. Custom layouts implement ILayoutManager (Measure and ArrangeChildren). Minimizing invalidations and avoiding deep nesting keeps this cycle cheap.

public class SimpleStackLayoutManager : ILayoutManager
{
    public Size Measure(double widthConstraint, double heightConstraint) { /* ... */ }
    public Size ArrangeChildren(Rect bounds) { /* ... */ }
}

Real-world example A team writes a custom masonry layout by implementing ILayoutManager to place cards of varying heights into balanced columns.

Common follow-ups: How do you write a custom layout? | Why avoid deep view nesting?

Performance & Optimization Custom Controls Layouts