Skip to main content
Version: 11.0.0

Data Grid Columns

A data grid can contain multiple data grid columns and Avalonia UI has two built-in column types which can be used to display a different data types, and a template type that can customise the column appearance.

Column TypeDescription
DataGridTextColumnPresents a text box for display and editing of the column data. You can control font properties like family and size in this column type.
DataGridCheckBoxColumnPresents a check box for display and editing of the column data, when it is Boolean. This column type also supports the three-state check box when the value is nullable.
DataGridTemplateColumnCan be used to customise the presentation of column data, for both display and editing.

Useful Properties

Most of these properties are common to all three column types:

PropertyDescription
HeaderThe header content of the column.
HeaderTemplateUses a data template for the column.
IsReadOnlyWhether the column is read-only. If the data grid itself is read-only, then the column is also read-only, whatever the value of this property.
IsThreeStateCheck box column only. Enables the third (filled) state when a nullable Boolean value is null.
WidthThe column width can be given in absolute or relative size (see below).

Column Width

If you do not set the width for a column, it will be resized to fit the contents, and a horizontal scrollbar will be added to the grid if necessary.

You can set the width of a column absolutely, for example:

<DataGridTextColumn Width="200" />

This will cause the column content that does not fit to be hidden.

Alternatively, you can specify relative automatic sizes. This uses * to represent an equal division of the available width, and then multiples like 2*. Any columns without a width specified are sized to their content.

For example to divide a data grid into 3 equal columns:

<DataGridTextColumn Width="*" />
<DataGridTextColumn Width="*" />
<DataGridTextColumn Width="*" />

Example

This example improves a data grid by expanding two columns equally across the width:

<Window ... >
<Design.DataContext>
<vm:MainWindowViewModel/>
</Design.DataContext>
<DataGrid Margin="20" ItemsSource="{Binding People}"
IsReadOnly="True"
GridLinesVisibility="All"
BorderThickness="1" BorderBrush="Gray">
<DataGrid.Columns>
<DataGridTextColumn Header="First Name" Width="*"
Binding="{Binding FirstName}"/>
<DataGridTextColumn Header="Last Name" Width="*"
Binding="{Binding LastName}" />
</DataGrid.Columns>
</DataGrid>
</Window>
C# View Model
using AvaloniaControls.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace AvaloniaControls.ViewModels
{
public class MainWindowViewModel : ViewModelBase
{
public ObservableCollection<Person> People { get; }

public MainWindowViewModel()
{
var people = new List<Person>
{
new Person("Neil", "Armstrong"),
new Person("Buzz", "Lightyear"),
new Person("James", "Kirk")
};
People = new ObservableCollection<Person>(people);
}
}
}
C# Item Class
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }

public Person(string firstName , string lastName)
{
FirstName = firstName;
LastName = lastName;
}
}

It works in the preview pane because the <Design.DataContext> element creates a view model to bind to:

More Information

info

For the complete API documentation about the data grid text column, see here.

info

For the complete API documentation about data grid check box column, see here.

info

View the source code on GitHub DataGridTextColumn.cs

info

View the source code on GitHub DataGridCheckBoxColumn.cs