Skip to main content
Version: 0.10.x

DataGridColumns

Overview​

Every . can hold multiple DataGridColumns. Avalonia has several build-in DataGridColumns, which can be used to display a certain data type with a certain appearance.

Build-in DataGridColumns​

Common Properties for all DataGridColumns​

PropertyDescription
HeaderGets or sets the header content of the column
HeaderTemplateGets or sets a data template for the column (see: datatemplates.md)
IsReadOnlyGets or sets if the column is read-only. If the owning grid is read-only, then the column is also read-only, even if this property is set to true.

DataGridTextColumn​

This column is used to display text data, normally represented by a string. In the normal state the text is displayed in a TextBlock. If the user edits the current cell, a TextBox will be shown. This column has some properties which can be used to control the appearance like FontSize and FontFamily.

Example​

<DataGrid Name="MyDataGrid" Items="{Binding People}" AutoGenerateColumns="False" >
    <DataGrid.Columns>
        <DataGridTextColumn Header="Forename" Binding="{Binding FirstName}"/>
        <DataGridTextColumn Header="Surname" Binding="{Binding LastName}" />
    </DataGrid.Columns>
</DataGrid>

API Reference​

DataGridTextColumn

Source code​

DataGridTextColumn.cs

DataGridCheckBoxColumn​

This column is used to represent a bool value. The value is represented by a CheckBox, which is disabled in the normal state and enabled in the editing state of the DataGridCell. If needed you can enable the indeterminate state by setting the property IsThreeState to true.

Example​

<DataGrid Name="MyDataGrid" Items="{Binding ToDoListItems}" AutoGenerateColumns="False" >
    <DataGrid.Columns>
        <DataGridCheckBoxColumn Header="✔" Binding="{Binding IsChecked}"/>
        <DataGridTextColumn Header="ToDo" Binding="{Binding Content}" />
    </DataGrid.Columns>
</DataGrid>

API Reference​

DataGridCheckBoxColumn

Source code​

DataGridCheckBoxColumn.cs

DataGridTemplateColumn​

This column is used to display any content you like. There are two datatemplates.md which you can define, the CellTemplate for the normal state and the CellEditingTemplate for the editing state of the current DataGridCell.

info

The DataGridTemplateColumn is editable from Avalonia version 0.10.12 onward. If you do not set a CellEditingTemplate, the column will stay read-only.

Example​

<DataGrid Name="MyDataGrid"
          xmlns:model="using:MyApp.Models"  >
  <DataGrid.Columns>
    <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
    <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
    <DataGridTemplateColumn Header="Age">
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate DataType="model:Person">
          <TextBlock Text="{Binding Age, StringFormat='{}{0} years'}" VerticalAlignment="Center" HorizontalAlignment="Center" />
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
      <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate DataType="model:Person">
          <NumericUpDown Value="{Binding Age}" FormatString="N0" HorizontalAlignment="Stretch" Minimum="0" Maximum="120"  />
        </DataTemplate>
      </DataGridTemplateColumn.CellEditingTemplate>
    </DataGridTemplateColumn>
  </DataGrid.Columns>
</DataGrid>

API Reference​

DataGridTemplateColumn

Source code​

DataGridTemplateColumn.cs