liveBook · Manning

Row definition

As explained in .NET MAUI in Action

A row definition is a Grid specification that determines the sizing behavior of one row.

A row definition tells a .NET MAUI Grid how to size one horizontal row. Each definition uses a Height value. Together, the definitions establish the vertical structure of the Grid before controls are placed into it. A Grid with five row definitions has rows numbered 0 through 4, with row 0 at the top. section 5.1.2

Define rows either as RowDefinition elements inside Grid.RowDefinitions or as a comma-separated RowDefinitions value on the Grid itself. Both forms produce the same layout; the inline form is the shorter choice for a straightforward Grid. section 5.1.2

Choose a Height value based on the layout behavior you need:

  • Use * for a proportional share of the available Grid height. Multiple * rows divide that space equally. section 5.1.2
  • Use a number before * for a weighted proportional share. A 4* row receives four times the height of a * row. section 5.1.3
  • Use a numeric height when a row must remain a fixed size, such as 100 for consistently sized calculator-button rows. section 5.1.3

Give a calculator display more room

A calculator Grid can use one display row and four button rows. With RowDefinitions="4*,*,*,*,*", the display row gets four shares while each button row gets one. There are eight total shares, so the display uses half of the available height and the four button rows share the other half. This avoids giving every row the same height when the display needs more space. <Grid ColumnDefinitions="*,*,*,*" RowDefinitions="4*,*,*,*,*" RowSpacing="2" ColumnSpacing="2"> section 5.1.3

Star values are relative proportions, not fixed device-independent units. For example, 1*, 3*, 8* creates the same proportions as 4*, 12*, 32*. This makes proportional rows useful when available height changes, but the resulting controls can stretch differently on portrait phones and wide desktop windows. section 5.1.3

When consistent button dimensions matter more than filling all available space, combine a flexible row with fixed rows. A calculator can keep its screen row flexible while assigning 100-height rows to buttons; centering the Grid helps preserve the intended layout on a wide desktop window. section 5.1.3

Listing 5.10 Updated Grid with proportional screen and rows
<Grid ColumnDefinitions="*,*,*,*"
      RowDefinitions="4*,*,*,*,*"   #1
 
      RowSpacing="2"
      ColumnSpacing="2">

Inspect an inline Grid declaration where the first row is weighted at 4* and the remaining four rows use equal * sizing. section 5.1.3

How .NET MAUI in Action covers it

How deep it goes
Explains inline and element syntax, equal and weighted star sizing, and fixed-height rows without detailing Grid layout internals.
Examples
Builds MauiCalc with equal rows, a 4* display row, and fixed 100-height button rows.
What it assumes
Introduces Grid row declarations from a blank .NET MAUI app without assuming prior MAUI layout knowledge.
What you can do after
Apply it via .NET MAUI Grid XAML to balance flexible display space against consistent button sizing.
How it connects
Connects Grid, ColumnDefinition, Grid.Row, Grid.Column, RowSpacing, ColumnSpacing, and HorizontalOptions.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of .NET MAUI in Action. The section links point to the parts of the book it draws on.