Grid - Avalonia

The Grid control is a Panel control useful for organizing other controls in columns and rows. ColumnDefinition and RowDefinition properties are used to define absolute, relative, or proportional row and column geometries for the grid. Each control in the grid will be placed using the Grid.Column and Grid.Row additional properties. It is also possible to have controls that span multiple rows and/or columns by using the ColumnSpan and RowSpan properties.
Reference
​Grid​
Source code
​Grid.cs​
Examples
Grid Using Properties and Spanning Columns
Below is an example that shows:
Configuring the grid using the ColumnDefinition and GridDefinition properties directly
How to assign the cell for a given component
Showing effects of spanning rows/columns An example of a Grid with 3 equal Rows and 3 Columns with (1 fixed width), (2 grabbing the rest proportionally) would be:
1
<Grid ColumnDefinitions="100,1.5*,4*" RowDefinitions="Auto,Auto,Auto"  Margin="4">
2
  <TextBlock Text="Col0Row0:" Grid.Row="0" Grid.Column="0"/>
3
  <TextBlock Text="Col0Row1:" Grid.Row="1" Grid.Column="0"/>
4
  <TextBlock Text="Col0Row2:" Grid.Row="2" Grid.Column="0"/>
5
  <CheckBox Content="Col2Row0" Grid.Row="0" Grid.Column="2"/>
6
  <Button Content="SpansCol1-2Row1-2" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
7
</Grid>
Copied!
In the above example we have two keywords: asterix and Auto. Here is explanation for them:
The "Auto" keyword is used to have the row or column geometry be determined by the containing control's definitions.
The asterisk is used for denoting proportional spacing. 
The multiplier used in front of the proportional spacing value is used to figure out the relative size for the proportional columns. All proportional columns fit in the space left behind after all explicit values and "Auto" values are calculated. So for the above example the Column 1 will get 1.5 parts plus Column 2 will get 4 parts of the remainder of the space that Colum 0 left. Lastly, the Button itself will fill in from the initial Cell 1,1 over one column and down one row because Grid.RowSpan and Grid.ColumnSpan are set to occupy two units instead of one.
Grid Using Properties and Spanning Columns
Here is another example showing the difference between those two.
First let's create sample 2x2 grid in our View, we can achieve this simply by writing code looking like this:
1
    <Grid ShowGridLines="True">
2
        <Grid.RowDefinitions>
3
            <RowDefinition Height="*"></RowDefinition>
4
            <RowDefinition Height="*"></RowDefinition>
5
        </Grid.RowDefinitions>
6
        <Grid.ColumnDefinitions>
7
            <ColumnDefinition Width="*"></ColumnDefinition>
8
            <ColumnDefinition Width="*"></ColumnDefinition>
9
        </Grid.ColumnDefinitions>
10
    </Grid>
Copied!
As you can see we created equal grid, I left ShowGridLines parameter set to True for better visibility.
Grid Using Asterix Symbols
Now let's fill our grid with some elements, i will fill exery field with button, you can use anything you want.
Grid Using Sterix Symbols Filled With Buttons
Now our View code look's like this:
1
    <Grid ShowGridLines="True">
2
        <Grid.RowDefinitions>
3
            <RowDefinition Height="*"></RowDefinition>
4
            <RowDefinition Height="*"></RowDefinition>
5
        </Grid.RowDefinitions>
6
        <Grid.ColumnDefinitions>
7
            <ColumnDefinition Width="*"></ColumnDefinition>
8
            <ColumnDefinition Width="*"></ColumnDefinition>
9
        </Grid.ColumnDefinitions>
10
​
11
        <Button Grid.Row="0" Grid.Column="0">Some text written on a button</Button>
12
        <Button Grid.Row="0" Grid.Column="1">Some text written on a button</Button>
13
        <Button Grid.Row="1" Grid.Column="0">Some text written on a button</Button>
14
        <Button Grid.Row="1" Grid.Column="1">Some text written on a button</Button>
15
    </Grid>
Copied!
In this moment our asterix symbols are forcing our grid to become equal, now let's see what will happen when we replace asterix with the Auto keyword
Grid Using Auto Keyword
As you can see our grid become sticky to it's content, it is very usefull when we have components with variable Height propety.
This new View code look's like this:
1
    <Grid ShowGridLines="True">
2
        <Grid.RowDefinitions>
3
            <RowDefinition Height="Auto"></RowDefinition>
4
            <RowDefinition Height="Auto"></RowDefinition>
5
        </Grid.RowDefinitions>
6
        <Grid.ColumnDefinitions>
7
            <ColumnDefinition Width="Auto"></ColumnDefinition>
8
            <ColumnDefinition Width="Auto"></ColumnDefinition>
9
        </Grid.ColumnDefinitions>
10
​
11
        <Button Grid.Row="0" Grid.Column="0">Some text written on a button</Button>
12
        <Button Grid.Row="0" Grid.Column="1">Some text written on a button</Button>
13
        <Button Grid.Row="1" Grid.Column="0">Some text written on a button</Button>
14
        <Button Grid.Row="1" Grid.Column="1">Some text written on a button</Button>
15
    </Grid>
Copied!
Using Verbose Row/Column Definitions
For more complex row and column definitions it's possible to explicitly use Grid.ColumnDefinitions and Grid.RowDefinitions XAML fields to provide access to these additional settings. The below code produces is exactly the same except for the fact we set the minimum width on the second column to be 300.
1
<Grid Margin="4">
2
  <Grid.ColumnDefinitions>
3
    <ColumnDefinition Width="100" />
4
    <ColumnDefinition Width="1.5*" MinWidth="300"/>
5
    <ColumnDefinition Width="4*"/>
6
  </Grid.ColumnDefinitions>
7
  <Grid.RowDefinitions>
8
    <RowDefinition Height="Auto"/>
9
    <RowDefinition Height="Auto"/>
10
    <RowDefinition Height="Auto"/>
11
  </Grid.RowDefinitions>
12
  <TextBlock Text="Col0Row0:" Grid.Row="0" Grid.Column="0"/>
13
  <TextBlock Text="Col0Row1:" Grid.Row="1" Grid.Column="0"/>
14
  <TextBlock Text="Col0Row2:" Grid.Row="2" Grid.Column="0"/>
15
  <CheckBox Content="Col2Row0" Grid.Row="0" Grid.Column="2"/>
16
  <Button Content="SpansCol1-2Row1-2" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
17
</Grid>
Copied!
Using Verbose Row/Column Definitions
Common Properties
Property
Description
ColumnDefinitions
A collection of ColumnDefinitions describing the width and max or min width of a column
RowDefinitions
A collection of RowDefinitions describing the height and max or min height of a row
Grid.Column
Attached property to assign a control into a zero based column
Grid.Row
Attached property to assign a control into a zero based row
Grid.ColumnSpan
Attached property to define the number of columns a control will span
Grid.RowSpan
Attached property to define the number of rows a control will span
Expander
GridSplitter
Last modified 3mo ago
Export as PDF
Copy link
Contents
Reference
Source code
Examples
Grid Using Properties and Spanning Columns
Using Verbose Row/Column Definitions
Common Properties