From 182bf8317622da231370fc0f5648d8cbdaf59f87 Mon Sep 17 00:00:00 2001
From: Anna Malchow-Perryman <amalchowperryman@devolutions.net>
Date: Thu, 8 May 2025 17:23:42 +0100
Subject: [PATCH 1/2] Install TreeDataGrid & add a demo page

---
 samples/SampleApp/App.axaml                   | 12 +++-
 .../DemoPages/TreeDataGridDemo.axaml          | 15 ++++
 .../DemoPages/TreeDataGridDemo.axaml.cs       | 11 +++
 samples/SampleApp/MainWindow.axaml            |  7 ++
 samples/SampleApp/SampleApp.csproj            |  1 +
 .../ViewModels/TreeDataGridViewModel.cs       | 68 +++++++++++++++++++
 ...evolutions.AvaloniaTheme.DevExpress.csproj |  1 +
 .../Devolutions.AvaloniaTheme.Linux.csproj    |  1 +
 .../Devolutions.AvaloniaTheme.MacOS.csproj    |  5 +-
 9 files changed, 117 insertions(+), 4 deletions(-)
 create mode 100644 samples/SampleApp/DemoPages/TreeDataGridDemo.axaml
 create mode 100644 samples/SampleApp/DemoPages/TreeDataGridDemo.axaml.cs
 create mode 100644 samples/SampleApp/ViewModels/TreeDataGridViewModel.cs

diff --git a/samples/SampleApp/App.axaml b/samples/SampleApp/App.axaml
index 9e45fa9..0414365 100644
--- a/samples/SampleApp/App.axaml
+++ b/samples/SampleApp/App.axaml
@@ -5,14 +5,20 @@
         <Styles x:Key="LinuxYaruStyles">
             <StyleInclude Source="avares://Devolutions.AvaloniaTheme.Linux/LinuxTheme.axaml" />
             <StyleInclude Source="/Styles.axaml" />
+            <!-- TODO: move into themes -->
+            <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
         </Styles>
         <Styles x:Key="DevExpressStyles">
             <StyleInclude Source="avares://Devolutions.AvaloniaTheme.DevExpress/DevExpressTheme.axaml" />
             <StyleInclude Source="/Styles.axaml" />
+            <!-- TODO: move into themes -->
+            <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
         </Styles>
         <Styles x:Key="MacOsStyles">
             <StyleInclude Source="avares://Devolutions.AvaloniaTheme.MacOS/MacOSTheme.axaml" />
             <StyleInclude Source="/Styles.axaml" />
+            <!-- TODO: move into themes -->
+            <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
         </Styles>
     </Application.Resources>
     
@@ -20,8 +26,10 @@
     <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" />
+        <!-- TODO: move into themes -->
+        <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
     </Application.Styles>
 </Application>
\ No newline at end of file
diff --git a/samples/SampleApp/DemoPages/TreeDataGridDemo.axaml b/samples/SampleApp/DemoPages/TreeDataGridDemo.axaml
new file mode 100644
index 0000000..5dd9b70
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/samples/SampleApp/DemoPages/TreeDataGridDemo.axaml.cs b/samples/SampleApp/DemoPages/TreeDataGridDemo.axaml.cs
new file mode 100644
index 0000000..7fcc187
--- /dev/null
+++ b/samples/SampleApp/DemoPages/TreeDataGridDemo.axaml.cs
@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace SampleApp.DemoPages;
+
+public partial class TreeDataGridDemo : UserControl
+{
+  public TreeDataGridDemo()
+  {
+    InitializeComponent();
+  }
+}
\ No newline at end of file
diff --git a/samples/SampleApp/MainWindow.axaml b/samples/SampleApp/MainWindow.axaml
index 3d6c648..e51249d 100644
--- a/samples/SampleApp/MainWindow.axaml
+++ b/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>
diff --git a/samples/SampleApp/SampleApp.csproj b/samples/SampleApp/SampleApp.csproj
index 90b8bd1..a86ede5 100644
--- a/samples/SampleApp/SampleApp.csproj
+++ b/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.-->
diff --git a/samples/SampleApp/ViewModels/TreeDataGridViewModel.cs b/samples/SampleApp/ViewModels/TreeDataGridViewModel.cs
new file mode 100644
index 0000000..b6c2888
--- /dev/null
+++ b/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; }
+}
\ No newline at end of file
diff --git a/src/Devolutions.AvaloniaTheme.DevExpress/Devolutions.AvaloniaTheme.DevExpress.csproj b/src/Devolutions.AvaloniaTheme.DevExpress/Devolutions.AvaloniaTheme.DevExpress.csproj
index dff1cd3..864a8fa 100644
--- a/src/Devolutions.AvaloniaTheme.DevExpress/Devolutions.AvaloniaTheme.DevExpress.csproj
+++ b/src/Devolutions.AvaloniaTheme.DevExpress/Devolutions.AvaloniaTheme.DevExpress.csproj
@@ -15,5 +15,6 @@
     <PackageReference Include="Avalonia" Version="[11.2.0,)" />
     <PackageReference Include="Avalonia.Themes.Fluent" Version="[11.2.0,)" />
     <PackageReference Include="Avalonia.Controls.DataGrid" Version="[11.2.0,)" />
+    <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/src/Devolutions.AvaloniaTheme.Linux/Devolutions.AvaloniaTheme.Linux.csproj b/src/Devolutions.AvaloniaTheme.Linux/Devolutions.AvaloniaTheme.Linux.csproj
index 5d4b9be..5352e8d 100644
--- a/src/Devolutions.AvaloniaTheme.Linux/Devolutions.AvaloniaTheme.Linux.csproj
+++ b/src/Devolutions.AvaloniaTheme.Linux/Devolutions.AvaloniaTheme.Linux.csproj
@@ -15,6 +15,7 @@
     <PackageReference Include="Avalonia" Version="[11.2.0,)" />
     <PackageReference Include="Avalonia.Themes.Fluent" Version="[11.2.0,)" />
     <PackageReference Include="Avalonia.Controls.DataGrid" Version="[11.2.0,)" />
+    <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
 
     <!-- 
       Avalonia.Svg.Skia 11.2.7.1 require at least 3.116, which is bugged atm on linux.
diff --git a/src/Devolutions.AvaloniaTheme.MacOS/Devolutions.AvaloniaTheme.MacOS.csproj b/src/Devolutions.AvaloniaTheme.MacOS/Devolutions.AvaloniaTheme.MacOS.csproj
index 416096a..360afa2 100644
--- a/src/Devolutions.AvaloniaTheme.MacOS/Devolutions.AvaloniaTheme.MacOS.csproj
+++ b/src/Devolutions.AvaloniaTheme.MacOS/Devolutions.AvaloniaTheme.MacOS.csproj
@@ -13,9 +13,10 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="[11.2.0,)"/>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="[11.2.0,)"/>
-        <PackageReference Include="Avalonia.Svg.Skia" Version="[11.2.0,)"/>
         <PackageReference Include="Avalonia.Themes.Fluent" Version="[11.2.0,)"/>
+        <PackageReference Include="Avalonia.Svg.Skia" Version="[11.2.0,)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="[11.2.0,)"/>
+        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
     </ItemGroup>
 
     <ItemGroup>

From 6d7b39ae3afa7a5015c66a650196f67344a8c969 Mon Sep 17 00:00:00 2001
From: Anna Malchow-Perryman <amalchowperryman@devolutions.net>
Date: Fri, 9 May 2025 12:00:46 +0100
Subject: [PATCH 2/2] [DevExpress] Add Fluent styles for TreeDataGrid

---
 samples/SampleApp/App.axaml                   |   8 -
 .../Accents/Styles.axaml                      |   9 +
 .../Controls/TreeDataGrid.axaml               | 332 ++++++++++++++++++
 .../Controls/_index.axaml                     |   1 +
 4 files changed, 342 insertions(+), 8 deletions(-)
 create mode 100644 src/Devolutions.AvaloniaTheme.DevExpress/Controls/TreeDataGrid.axaml

diff --git a/samples/SampleApp/App.axaml b/samples/SampleApp/App.axaml
index 0414365..8532e7c 100644
--- a/samples/SampleApp/App.axaml
+++ b/samples/SampleApp/App.axaml
@@ -5,20 +5,14 @@
         <Styles x:Key="LinuxYaruStyles">
             <StyleInclude Source="avares://Devolutions.AvaloniaTheme.Linux/LinuxTheme.axaml" />
             <StyleInclude Source="/Styles.axaml" />
-            <!-- TODO: move into themes -->
-            <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
         </Styles>
         <Styles x:Key="DevExpressStyles">
             <StyleInclude Source="avares://Devolutions.AvaloniaTheme.DevExpress/DevExpressTheme.axaml" />
             <StyleInclude Source="/Styles.axaml" />
-            <!-- TODO: move into themes -->
-            <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
         </Styles>
         <Styles x:Key="MacOsStyles">
             <StyleInclude Source="avares://Devolutions.AvaloniaTheme.MacOS/MacOSTheme.axaml" />
             <StyleInclude Source="/Styles.axaml" />
-            <!-- TODO: move into themes -->
-            <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
         </Styles>
     </Application.Resources>
     
@@ -29,7 +23,5 @@
         <StyleInclude Source="avares://Devolutions.AvaloniaTheme.DevExpress/DevExpressTheme.axaml" />
         <!-- <StyleInclude Source="avares://Devolutions.AvaloniaTheme.Linux/LinuxTheme.axaml" /> -->
         <StyleInclude Source="/Styles.axaml" />
-        <!-- TODO: move into themes -->
-        <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml" />
     </Application.Styles>
 </Application>
\ No newline at end of file
diff --git a/src/Devolutions.AvaloniaTheme.DevExpress/Accents/Styles.axaml b/src/Devolutions.AvaloniaTheme.DevExpress/Accents/Styles.axaml
index 632f054..06bff48 100644
--- a/src/Devolutions.AvaloniaTheme.DevExpress/Accents/Styles.axaml
+++ b/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>
\ No newline at end of file
diff --git a/src/Devolutions.AvaloniaTheme.DevExpress/Controls/TreeDataGrid.axaml b/src/Devolutions.AvaloniaTheme.DevExpress/Controls/TreeDataGrid.axaml
new file mode 100644
index 0000000..55021f7
--- /dev/null
+++ b/src/Devolutions.AvaloniaTheme.DevExpress/Controls/TreeDataGrid.axaml
@@ -0,0 +1,332 @@
+<!-- Based on https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/blob/master/src/Avalonia.Controls.TreeDataGrid/Themes/Generic.axaml 
+     and https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/blob/master/src/Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml  -->
+
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:conv="using:Avalonia.Controls.Converters">
+
+        <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+          <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="{StaticResource SystemListLowColor}" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" Opacity="0.1" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="{StaticResource SystemBaseMediumLowColor}" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="{StaticResource SystemBaseHighColor}" />
+          <SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="{StaticResource SystemAccentColor}" Opacity="0.4" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+          <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="{StaticResource SystemListLowColor}" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" Opacity="0.1" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="{StaticResource SystemBaseMediumLowColor}" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="{StaticResource SystemBaseHighColor}" />
+          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="{StaticResource SystemBaseHighColor}" />
+          <SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="{StaticResource SystemAccentColor}" Opacity="0.4" />
+        </ResourceDictionary>
+      </ResourceDictionary.ThemeDictionaries>
+
+      <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">M1875 1011l-787 787v-1798h-128v1798l-787 -787l-90 90l941 941l941 -941z</StreamGeometry>
+      <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">M1965 947l-941 -941l-941 941l90 90l787 -787v1798h128v-1798l787 787z</StreamGeometry>
+      <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">M 1,0 10,10 l -9,10 -1,-1 L 8,10 -0,1 Z</StreamGeometry>
+      <StreamGeometry x:Key="TreeDataGridItemExpandedChevronPathData">M0,1 L10,10 20,1 19,0 10,8 1,0 Z</StreamGeometry>
+
+      <ControlTheme x:Key="{x:Type TreeDataGrid}" TargetType="TreeDataGrid">
+        <Setter Property="Template">
+          <ControlTemplate>
+            <Border x:Name="RootBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+              <DockPanel>
+                <ScrollViewer Name="PART_HeaderScrollViewer"
+                              DockPanel.Dock="Top"
+                              IsVisible="{TemplateBinding ShowColumnHeaders}"
+                              HorizontalScrollBarVisibility="Hidden"
+                              VerticalScrollBarVisibility="Disabled"
+                              BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
+                  <Border x:Name="ColumnHeadersPresenterBorder">
+                    <TreeDataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter"
+                                                        ElementFactory="{TemplateBinding ElementFactory}"
+                                                        Items="{TemplateBinding Columns}" />
+                  </Border>
+                </ScrollViewer>
+                <ScrollViewer Name="PART_ScrollViewer"
+                              HorizontalScrollBarVisibility="Auto"
+                              BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
+                  <TreeDataGridRowsPresenter Name="PART_RowsPresenter"
+                                             Columns="{TemplateBinding Columns}"
+                                             ElementFactory="{TemplateBinding ElementFactory}"
+                                             Items="{TemplateBinding Rows}" />
+                </ScrollViewer>
+              </DockPanel>
+            </Border>
+          </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^/template/ Border#ColumnHeadersPresenterBorder">
+          <Setter Property="BorderThickness" Value="0 0 0 1" />
+          <Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridGridLinesBrush}" />
+        </Style>
+
+      </ControlTheme>
+
+      <ControlTheme x:Key="{x:Type TreeDataGridColumnHeader}" TargetType="TreeDataGridColumnHeader">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="MinHeight" Value="25" />
+        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Template">
+          <ControlTemplate>
+            <Border Name="DataGridBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+              <DockPanel VerticalAlignment="Stretch">
+                <Panel DockPanel.Dock="Right"
+                       TabIndex="2">
+                  <Rectangle Fill="{DynamicResource TreeDataGridGridLinesBrush}"
+                             HorizontalAlignment="Right"
+                             Width="1" />
+                  <Thumb Name="PART_Resizer"
+                         DockPanel.Dock="Right"
+                         Background="Transparent"
+                         Cursor="SizeWestEast"
+                         IsVisible="{TemplateBinding CanUserResize}"
+                         Width="5">
+                    <Thumb.Template>
+                      <ControlTemplate>
+                        <Border Background="{TemplateBinding Background}"
+                                VerticalAlignment="Stretch" />
+                      </ControlTemplate>
+                    </Thumb.Template>
+                  </Thumb>
+                </Panel>
+                <Path Name="SortIcon"
+                      DockPanel.Dock="Right"
+                      Fill="{TemplateBinding Foreground}"
+                      HorizontalAlignment="Center"
+                      VerticalAlignment="Center"
+                      Stretch="Uniform"
+                      Height="12"
+                      TabIndex="1" />
+                <ContentPresenter Name="PART_ContentPresenter"
+                                  Content="{TemplateBinding Header}"
+                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                  Padding="{TemplateBinding Padding}"
+                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                  TabIndex="0">
+                  <ContentPresenter.DataTemplates>
+                    <DataTemplate DataType="x:String">
+                      <TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis" />
+                    </DataTemplate>
+                  </ContentPresenter.DataTemplates>
+                </ContentPresenter>
+              </DockPanel>
+            </Border>
+          </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ Border#DataGridBorder">
+          <Setter Property="Background" Value="{DynamicResource TreeDataGridHeaderBackgroundPointerOverBrush}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridHeaderBorderBrushPointerOverBrush}" />
+          <Setter Property="TextBlock.Foreground"
+                  Value="{DynamicResource TreeDataGridHeaderForegroundPointerOverBrush}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ Border#DataGridBorder">
+          <Setter Property="Background" Value="{DynamicResource TreeDataGridHeaderBackgroundPressedBrush}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource TreeDataGridHeaderBorderBrushPressedBrush}" />
+          <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeDataGridHeaderForegroundPressedBrush}" />
+        </Style>
+
+        <Style Selector="^[SortDirection=Ascending] /template/ Path#SortIcon">
+          <Setter Property="IsVisible" Value="True" />
+          <Setter Property="Data" Value="{DynamicResource TreeDataGridSortIconAscendingPath}" />
+        </Style>
+
+        <Style Selector="^[SortDirection=Descending] /template/ Path#SortIcon">
+          <Setter Property="IsVisible" Value="True" />
+          <Setter Property="Data" Value="{DynamicResource TreeDataGridSortIconDescendingPath}" />
+        </Style>
+
+      </ControlTheme>
+
+      <ControlTheme x:Key="{x:Type TreeDataGridRow}" TargetType="TreeDataGridRow">
+        <Setter Property="Template">
+          <ControlTemplate>
+            <Border x:Name="RowBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+              <TreeDataGridCellsPresenter Name="PART_CellsPresenter"
+                                          ElementFactory="{TemplateBinding ElementFactory}"
+                                          Items="{TemplateBinding Columns}"
+                                          Rows="{TemplateBinding Rows}" />
+            </Border>
+          </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:selected /template/ TreeDataGridCellsPresenter#PART_CellsPresenter">
+          <Setter Property="Background" Value="{DynamicResource TreeDataGridSelectedCellBackgroundBrush}" />
+        </Style>
+
+      </ControlTheme>
+
+      <ControlTheme x:Key="{x:Type TreeDataGridCheckBoxCell}" TargetType="TreeDataGridCheckBoxCell">
+        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="Template">
+          <ControlTemplate>
+            <Border x:Name="CellBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Padding="{TemplateBinding Padding}">
+              <CheckBox IsChecked="{TemplateBinding Value, Mode=TwoWay}"
+                        IsEnabled="{Binding !IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
+                        IsThreeState="{TemplateBinding IsThreeState}" />
+            </Border>
+          </ControlTemplate>
+        </Setter>
+      </ControlTheme>
+
+      <ControlTheme x:Key="TreeDataGridExpandCollapseChevron" TargetType="ToggleButton">
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="Width" Value="12" />
+        <Setter Property="Height" Value="12" />
+        <Setter Property="Template">
+          <ControlTemplate>
+            <Border Background="Transparent"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center">
+              <Path x:Name="ChevronPath"
+                    Data="{StaticResource TreeDataGridItemCollapsedChevronPathData}"
+                    Fill="{TemplateBinding Foreground}"
+                    Stretch="Uniform"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center" />
+            </Border>
+          </ControlTemplate>
+        </Setter>
+        <Style Selector="^:checked /template/ Path#ChevronPath">
+          <Setter Property="Data" Value="{StaticResource TreeDataGridItemExpandedChevronPathData}" />
+        </Style>
+      </ControlTheme>
+
+      <ControlTheme x:Key="{x:Type TreeDataGridExpanderCell}" TargetType="TreeDataGridExpanderCell">
+        <Setter Property="Template">
+          <ControlTemplate>
+            <Border x:Name="CellBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Padding="{TemplateBinding Indent, Converter={x:Static conv:IndentConverter.Instance}}">
+              <DockPanel>
+                <Border DockPanel.Dock="Left"
+                        Margin="4 0"
+                        Width="12" Height="12">
+                  <ToggleButton Theme="{StaticResource TreeDataGridExpandCollapseChevron}"
+                                Focusable="False"
+                                IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
+                                IsVisible="{TemplateBinding ShowExpander}" />
+                </Border>
+                <Decorator Name="PART_Content" />
+              </DockPanel>
+            </Border>
+          </ControlTemplate>
+        </Setter>
+      </ControlTheme>
+
+      <ControlTheme x:Key="{x:Type TreeDataGridTextCell}" TargetType="TreeDataGridTextCell">
+        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="Template">
+          <ControlTemplate>
+            <Border x:Name="CellBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Padding="{TemplateBinding Padding}">
+              <TextBlock Text="{TemplateBinding Value}"
+                         TextTrimming="{TemplateBinding TextTrimming}"
+                         TextWrapping="{TemplateBinding TextWrapping}"
+                         TextAlignment="{TemplateBinding TextAlignment}"
+                         VerticalAlignment="Center" />
+            </Border>
+          </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:editing">
+          <Setter Property="Padding" Value="4 2" />
+          <Setter Property="Template">
+            <ControlTemplate>
+              <Border x:Name="CellBorder"
+                      Background="{TemplateBinding Background}"
+                      BorderBrush="{TemplateBinding BorderBrush}"
+                      BorderThickness="{TemplateBinding BorderThickness}"
+                      CornerRadius="{TemplateBinding CornerRadius}"
+                      Padding="{TemplateBinding Padding}">
+                <TextBox Name="PART_Edit"
+                         Text="{TemplateBinding Value, Mode=TwoWay}" />
+              </Border>
+            </ControlTemplate>
+          </Setter>
+        </Style>
+
+        <Style Selector="^:editing /template/ TextBox#PART_Edit">
+          <Setter Property="Background" Value="Transparent" />
+          <Setter Property="MinHeight" Value="25" />
+          <Setter Property="Padding" Value="10,3,6,3" />
+          <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+
+        <Style Selector="^:editing /template/ TextBox#PART_Edit DataValidationErrors">
+          <Setter Property="Template" Value="{DynamicResource TooltipDataValidationContentTemplate}" />
+          <Setter Property="ErrorTemplate" Value="{DynamicResource TooltipDataValidationErrorTemplate}" />
+        </Style>
+
+      </ControlTheme>
+
+      <ControlTheme x:Key="{x:Type TreeDataGridTemplateCell}" TargetType="TreeDataGridTemplateCell">
+        <Setter Property="Template">
+          <ControlTemplate>
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Background="{TemplateBinding Background}"
+                              BorderBrush="{TemplateBinding BorderBrush}"
+                              BorderThickness="{TemplateBinding BorderThickness}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              CornerRadius="{TemplateBinding CornerRadius}"
+                              Content="{TemplateBinding Content}"
+                              Padding="{TemplateBinding Padding}" />
+          </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:editing">
+          <Setter Property="Padding" Value="4 2" />
+          <Setter Property="Template">
+            <ControlTemplate>
+              <ContentPresenter Name="PART_EditingContentPresenter"
+                                Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                ContentTemplate="{TemplateBinding EditingTemplate}"
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                Content="{TemplateBinding Content}"
+                                Padding="{TemplateBinding Padding}" />
+            </ControlTemplate>
+          </Setter>
+        </Style>
+      </ControlTheme>
+    </ResourceDictionary>
+
+<!-- Additional styling in Accents/Styles.axaml -->
\ No newline at end of file
diff --git a/src/Devolutions.AvaloniaTheme.DevExpress/Controls/_index.axaml b/src/Devolutions.AvaloniaTheme.DevExpress/Controls/_index.axaml
index cc2996d..6821f69 100644
--- a/src/Devolutions.AvaloniaTheme.DevExpress/Controls/_index.axaml
+++ b/src/Devolutions.AvaloniaTheme.DevExpress/Controls/_index.axaml
@@ -14,6 +14,7 @@
     <MergeResourceInclude Source="TabControl.axaml" />
     <MergeResourceInclude Source="TabItem.axaml" />
     <MergeResourceInclude Source="TextBox.axaml" />
+    <MergeResourceInclude Source="TreeDataGrid.axaml" />
     <MergeResourceInclude Source="ContextMenu.axaml" />
     <MergeResourceInclude Source="Window.axaml" />
   </ResourceDictionary.MergedDictionaries>