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

• DataGridTextColumn
• DataGridCheckBoxColumn
• DataGridTemplateColumn

Common Properties for all DataGridColumns

Property	Description
Header	Gets or sets the header content of the column
HeaderTemplate	Gets or sets a data template for the column (see: datatemplates.md)
IsReadOnly	Gets 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.

信息

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