avalonia-layout

Avalonia Layout

Overview

Avalonia layout uses a two-pass measure/arrange system. Every control has Margin (space outside the control), Padding (space inside), HorizontalAlignment, and VerticalAlignment. Layout is done with Panel subclasses — choose the panel that matches the arrangement model.

Panel Quick Reference

Panel	Arranges children	Use when
Grid	In defined rows/columns	Complex layouts, forms, dashboards
StackPanel	Linearly (H or V)	Toolbars, lists, vertical forms
WrapPanel	Linearly, wraps to next row/col	Tag clouds, icon grids, badge lists
DockPanel	Docked to edges + fill center	App shell, menu+content+statusbar
Canvas	Absolute x/y positions	Drawing surfaces, overlays, diagrams
UniformGrid	Equal-size cells, auto rows/cols	Grids of same-size items
RelativePanel	Relative to siblings or panel	Adaptive layouts, dynamic alignment

Grid

Sizing Modes

Syntax	Meaning
*	Proportional — takes remaining space
2*	Takes 2× the share of *
Auto	Sized to content
200	Fixed pixel size

Basic Grid

<Grid RowDefinitions="Auto,*,Auto"
      ColumnDefinitions="200,*">

    <!-- Header spans full width -->
    <Border Grid.Row="0" Grid.ColumnSpan="2" Background="Navy" Height="50"/>

    <!-- Sidebar -->
    <ListBox Grid.Row="1" Grid.Column="0"/>

    <!-- Main content -->
    <ScrollViewer Grid.Row="1" Grid.Column="1">
        <StackPanel Margin="16" Spacing="8"/>
    </ScrollViewer>

    <!-- Footer spans full width -->
    <StatusBar Grid.Row="2" Grid.ColumnSpan="2"/>

</Grid>

Login Form Example

<Grid RowDefinitions="Auto,Auto,Auto,Auto"
      ColumnDefinitions="120,*"
      Width="320"
      HorizontalAlignment="Center"
      VerticalAlignment="Center">

    <TextBlock Grid.Row="0" Grid.Column="0"
               Text="Username:"
               VerticalAlignment="Center"
               Margin="0,0,8,8"/>
    <TextBox Grid.Row="0" Grid.Column="1"
             Margin="0,0,0,8"/>

    <TextBlock Grid.Row="1" Grid.Column="0"
               Text="Password:"
               VerticalAlignment="Center"
               Margin="0,0,8,8"/>
    <TextBox Grid.Row="1" Grid.Column="1"
             PasswordChar="●"
             Margin="0,0,0,16"/>

    <Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
            Content="Sign In"
            HorizontalAlignment="Right"/>

</Grid>