TreeDataGrid.Core 12.0.0.7

TreeDataGrid for Avalonia

Introduction

TreeDataGrid is a control for the Avalonia UI framework which displays hierarchical and tabular data together in a single view. It is a combination of a TreeView and DataGrid control.

The control has two modes of operation:

• Hierarchical: data is displayed in a tree with optional columns
• Flat: data is displayed in a 2D table, similar to other DataGrid controls

An example of TreeDataGrid displaying hierarchical data:

An example of TreeDataGrid displaying flat data:

Current Status

We accept all issues and pull requests but we answer and review only pull requests and issues that are high quality and align with project scope.

Quick Start

For new Avalonia applications, install the platform-specific package:

dotnet add package TreeDataGrid.Controls.Avalonia

Or add a package reference:

<ItemGroup>
  <PackageReference Include="TreeDataGrid.Controls.Avalonia" Version="x.y.z" />
</ItemGroup>

Add the theme to App.axaml:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaApplication.App">
  <Application.Styles>
    <FluentTheme/>
    <StyleInclude Source="avares://TreeDataGrid.Avalonia/Themes/Fluent.axaml"/>
  </Application.Styles>
</Application>

Basic Usage

Flat mode

using System.Collections.ObjectModel;
using Avalonia.Controls.Models.TreeDataGrid;

public class Person
{
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public int Age { get; set; }
}

public class MainWindowViewModel
{
    private readonly ObservableCollection<Person> _people = new()
    {
        new() { FirstName = "Eleanor", LastName = "Pope", Age = 32 },
        new() { FirstName = "Jeremy", LastName = "Navarro", Age = 74 },
    };

    public FlatTreeDataGridSource<Person> Source { get; }

    public MainWindowViewModel()
    {
        Source = new FlatTreeDataGridSource<Person>(_people)
        {
            Columns =
            {
                new TextColumn<Person, string>("First Name", x => x.FirstName),
                new TextColumn<Person, string>("Last Name", x => x.LastName),
                new TextColumn<Person, int>("Age", x => x.Age),
            },
        };
    }
}

If you prefer to define columns in XAML in Avalonia 12, expose the raw collection instead:

using System.Collections.ObjectModel;

public class MainWindowViewModel
{
    public ObservableCollection<Person> People { get; } = new()
    {
        new() { FirstName = "Eleanor", LastName = "Pope", Age = 32 },
        new() { FirstName = "Jeremy", LastName = "Navarro", Age = 74 },
    };
}

<TreeDataGrid ItemsSource="{Binding People}">
  <TreeDataGridTextColumn Header="First Name"
                          Binding="{Binding FirstName}"/>
  <TreeDataGridTextColumn Header="Last Name"
                          Binding="{Binding LastName}"/>
  <TreeDataGridTextColumn Header="Age"
                          Binding="{Binding Age}"/>
</TreeDataGrid>

Hierarchical mode

using System.Collections.ObjectModel;
using Avalonia.Controls.Models.TreeDataGrid;

public class Person
{
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public int Age { get; set; }
    public ObservableCollection<Person> Children { get; } = new();
}

public class MainWindowViewModel
{
    private readonly ObservableCollection<Person> _people = new();

    public HierarchicalTreeDataGridSource<Person> Source { get; }

    public MainWindowViewModel()
    {
        Source = new HierarchicalTreeDataGridSource<Person>(_people)
        {
            Columns =
            {
                new HierarchicalExpanderColumn<Person>(
                    new TextColumn<Person, string>("First Name", x => x.FirstName),
                    x => x.Children),
                new TextColumn<Person, string>("Last Name", x => x.LastName),
                new TextColumn<Person, int>("Age", x => x.Age),
            },
        };
    }
}

Bind code-defined sources in XAML (both modes):

<TreeDataGrid Source="{Binding Source}" />

Build and Package

Build, test, and pack the complete solution:

dotnet restore Avalonia.Controls.TreeDataGrid.slnx
dotnet build Avalonia.Controls.TreeDataGrid.slnx -c Release --no-restore
dotnet test tests/Avalonia.Controls.TreeDataGrid.Tests/Avalonia.Controls.TreeDataGrid.Tests.csproj -c Release
dotnet pack Avalonia.Controls.TreeDataGrid.slnx -c Release --no-build -o artifacts/packages
python3 build/verify-package-layout.py artifacts/packages

Packages are generated in artifacts/packages (.nupkg and .snupkg). The solution produces TreeDataGrid.Core, TreeDataGrid.Controls.Avalonia, and the compatibility TreeDataGrid package. Existing applications may keep TreeDataGrid and its avares://Avalonia.Controls.TreeDataGrid/ theme URI. Do not reference both UI packages in one application. See Avalonia package identity.

Build Documentation

Build docs locally:

./build-docs.sh

Serve docs locally:

./serve-docs.sh

Default local URL: http://127.0.0.1:8080
Override host/port with DOCS_HOST and DOCS_PORT.

Generated docs output is written to site/.lunet/build/www.

Getting Started

• Articles Home
• Installation
• Quickstart Flat
• Quickstart Hierarchical
• Columns, Cells, and Rows
• Selection Models
• Troubleshooting

License

• Main project license: licence.md
• Preserved original upstream license: LICENSE-AVALONIA

Framework-neutral ViewModels

Use TreeDataGrid.Core for ViewModel-owned sources, columns, sorting, selection and expansion without an Avalonia dependency. New views should use the TreeDataGrid.Controls.Avalonia package; existing TreeDataGrid consumers remain supported. See migration and ownership.