[DevExpress] Add TreeDataGrid

samples/SampleApp/App.axaml

@@ -20,8 +20,8 @@
     <Application.Styles>
         <!-- <FluentTheme /> -->
         <!-- <StyleInclude Source="avares://Devolutions.AvaloniaTheme.MacOS/MacOSTheme.axaml" /> -->
-        <!-- <StyleInclude Source="avares://Devolutions.AvaloniaTheme.DevExpress/DevExpressTheme.axaml" /> -->
-        <StyleInclude Source="avares://Devolutions.AvaloniaTheme.Linux/LinuxTheme.axaml" />
+        <StyleInclude Source="avares://Devolutions.AvaloniaTheme.DevExpress/DevExpressTheme.axaml" />
+        <!-- <StyleInclude Source="avares://Devolutions.AvaloniaTheme.Linux/LinuxTheme.axaml" /> -->
         <StyleInclude Source="/Styles.axaml" />
     </Application.Styles>
 </Application>

samples/SampleApp/DemoPages/TreeDataGridDemo.axaml

@@ -0,0 +1,15 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="using:SampleApp.ViewModels"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="SampleApp.DemoPages.TreeDataGridDemo"
+             x:DataType="vm:TreeDataGridViewModel">
+
+  <Design.DataContext>
+    <vm:TreeDataGridViewModel />
+  </Design.DataContext>
+
+  <TreeDataGrid Source="{Binding Source} " />
+</UserControl>

samples/SampleApp/DemoPages/TreeDataGridDemo.axaml.cs

@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace SampleApp.DemoPages;
+
+public partial class TreeDataGridDemo : UserControl
+{
+  public TreeDataGridDemo()
+  {
+    InitializeComponent();
+  }
+}

samples/SampleApp/MainWindow.axaml

@@ -65,6 +65,13 @@
       <TabItem Header="Toggle Switch [WIP]">
         <demoPages:ToggleSwitchDemo />
       </TabItem>
+      <TabItem Header="TreeDataGrid" IsSelected="True">
+        <demoPages:TreeDataGridDemo>
+          <demoPages:TreeDataGridDemo.DataContext>
+            <vm:TreeDataGridViewModel />
+          </demoPages:TreeDataGridDemo.DataContext>
+        </demoPages:TreeDataGridDemo>
+      </TabItem>
       <TabItem Header="TreeView">
         <demoPages:TreeViewDemo />
       </TabItem>

samples/SampleApp/SampleApp.csproj

@@ -11,6 +11,7 @@
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="11.2.8"/>
         <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.2.8"/>
+        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
         <PackageReference Include="Avalonia.Desktop" Version="11.2.8"/>
         <PackageReference Include="Avalonia.Fonts.Inter" Version="11.2.8"/>
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->

samples/SampleApp/ViewModels/TreeDataGridViewModel.cs

@@ -0,0 +1,68 @@
+using System.Collections.ObjectModel;
+using Avalonia.Controls;
+using Avalonia.Controls.Models.TreeDataGrid;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace SampleApp.ViewModels;
+
+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 TreeDataGridViewModel : ObservableObject
+{
+  private readonly ObservableCollection<Person> _people = new()
+  {
+    new Person
+    {
+      FirstName = "Eleanor",
+      LastName = "Pope",
+      Age = 32,
+      Children =
+      {
+        new Person { FirstName = "Marcel", LastName = "Gutierrez", Age = 4 }
+      }
+    },
+    new Person
+    {
+      FirstName = "Jeremy",
+      LastName = "Navarro",
+      Age = 74,
+      Children =
+      {
+        new Person
+        {
+          FirstName = "Jane",
+          LastName = "Navarro",
+          Age = 42,
+          Children =
+          {
+            new Person { FirstName = "Lailah ", LastName = "Velazquez", Age = 16 }
+          }
+        }
+      }
+    },
+    new Person { FirstName = "Jazmine", LastName = "Schroeder", Age = 52 }
+  };
+
+  public TreeDataGridViewModel()
+  {
+    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)
+      }
+    };
+  }
+
+  public HierarchicalTreeDataGridSource<Person> Source { get; }
+}

src/Devolutions.AvaloniaTheme.DevExpress/Accents/Styles.axaml

@@ -38,4 +38,13 @@
   <Style Selector="DataGridRow:nth-child(even)">
     <Setter Property="Background" Value="{DynamicResource DataGridRowAlternatingBackgroundBrush}" />
   </Style>
+
+  <Style Selector=":is(TreeDataGridCell)">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="MinHeight" Value="25" />
+  </Style>
+
+  <Style Selector=":is(TreeDataGridCell):selected">
+    <Setter Property="Background" Value="{DynamicResource TreeDataGridSelectedCellBackgroundBrush}" />
+  </Style>
 </Styles>