DataGrid
The DataGrid control is a control that displays data in a customizable grid.

Reference

​DataGrid​

Source code

​DataGrid.cs​

Add required styles to App.axaml

The Themes can be changed to light or dark to fit your application theme.
1
<Application.Styles>
2
<StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
3
<StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
4
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>
5
</Application.Styles>
Copied!
Or if you are using new Fluent theme, you will need to include styles created specifically for that:
1
<Application.Styles>
2
<FluentTheme Mode="Light" />
3
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
4
</Application.Styles>
Copied!

Examples

Basic DataGrid

This will generate a DataGrid with column header names. FirstName and LastName.
1
<Window xmlns="https://github.com/avaloniaui"
2
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
6
x:Class="AvaloniaAppTemplate.MainWindow"
7
Title="AvaloniaAppTemplate">
8
<Grid>
9
<DataGrid Name="MyDataGrid" Items="{Binding People}" >
10
</DataGrid>
11
</Grid>
12
</Window>
Copied!
1
public class Person
2
{
3
public string FirstName { get; set; }
4
public string LastName { get; set; }
5
}
Copied!

Custom headers

The DataGrid uses the same class Person as before, but now with custom column header name. Forename and Surname.
1
<Window xmlns="https://github.com/avaloniaui"
2
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
6
x:Class="AvaloniaAppTemplate.MainWindow"
7
Title="AvaloniaAppTemplate">
8
<Grid>
9
<DataGrid Name="MyDataGrid" Items="{Binding People}" AutoGenerateColumns="False" >
10
<DataGrid.Columns>
11
<DataGridTextColumn Header="Forename" Binding="{Binding FirstName}"/>
12
<DataGridTextColumn Header="Surname" Binding="{Binding LastName}" />
13
</DataGrid.Columns>
14
</DataGrid>
15
</Grid>
16
</Window>
Copied!

Common Properties

Property
Description
AutoGenerateColumns
Control if the columns should be automatically generate for display in UI from the bounded data source.
Items
Gets or sets a collection that is used to generate the content of the control.
CanUserReorderColumns
Indicates whether the user can change the column display order by dragging column headers with the mouse.
CanUserResizeColumns
Indicates whether the user can adjust column widths using the mouse.
CanUserSortColumns
Indicates whether the user can sort columns by clicking the column header.
Last modified 3mo ago