TreeDataGrid does not work unless you are running FluentTheme

[KentSwan]

Describe the bug

TreeDataGrid will not display anything unless (1) you've set FluentThem in App.axaml AND (2) you must add a StyleInclude for its FluentTheme control styling file. For several reasons, I've found that FluentTheme (1) makes a lot of style design choices that have to be overridden or undone and (2) in some cases locks out the ability to style certain properties on some controls. In contrast, I've found that, for the most part, SimpleTheme works better as a less hostile application-based style set.

On Checking, I found that TreeDataGrid does not have a SimpleTheme selector and thus cannot display when using SimpleTheme as the application base theme.

While it is my personal opinion that every control should have intrinsic internal styling defaults that are sufficient to display and operate the control without a StyleInclue file, I am aware that, for complex composited controls like TreeDataGrid and DataGrid that is simply isn't a viable approach to styling the control. In these cases, the controls' default styling should be it's SimpleTheme.

I note in passing that DataGrid, which I also use, has both Fluent and Simple themes.

To Reproduce

Try to get TreeDataGrid to display with App.axaml set to SimpleTheme with and without a StyleInclude for TreeDataGrid.:

Expected behavior

I expected to be able to select a SimpleTheme for TreeDataGrid having simple basic styling, per my discussion above for the TreeDataGrid, and have it show up in the designer so that IntelliSense in my view.axaml file works.

Screenshots

n/A

Environment

Windows 10, Avalonia 11, MVVM, TreeDataGrid newget package

Additional context

N/A

[timunie]

That's not a bug then but a feature request for TreeDataGrid. Can you transfer it to it's repo? It has its own repo.

Thx.

[maxkatz6]

You can use it without FluentTheme, but you need to redefine colors, so it won't use Fluent resources. Something like this at a minimum:

    <ResourceDictionary>
      <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
          <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="Black" Opacity="0.1" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="Black" Opacity="0.1" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="Black" Opacity="0.6" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="Black" />
          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="Black" />
          <SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="Black" Opacity="0.4" />
        </ResourceDictionary>
        <ResourceDictionary x:Key="Dark">
          <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="White" Opacity="0.1" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="White" Opacity="0.1" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="White" Opacity="0.6" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
          <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="White" />
          <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="White" />
          <SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="White" Opacity="0.4" />
        </ResourceDictionary>
      </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>

[KentSwan]

Thanks, I'll install it in App.axaml and give it a try then report back.

Humm... If it works, why not just this Resource Dictionary either the Simple Theme pending creating a proper SimpleTheme?

[timunie]

@KentSwan we're on it rn.

[KentSwan]

Okay, here's the deal. For a TreeDataGrid app, the In App.axaml file below can switch between both Simple and Fluent Theme with both themes installed. It will also work with SimpleTheme with only SimpleTheme installed and FluentTheme not installed. It will not work if the StyleInclude is removed. If no theme is specified I get a transparent viewport so that doesn't work. Added are two screen captures showing that the styling switchover works BUT this is a truly ugly hidden agenda, guys.

App.axaml

<Application xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:AvaloniaTreeDataGridDragDrop" x:Class="AvaloniaTreeDataGridDragDrop.App" RequestedThemeVariant="Default">

<Application.DataTemplates>
    <local:ViewLocator/>
</Application.DataTemplates>

<Application.Styles>
    <FluentTheme/>
    <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml"/>
</Application.Styles>

<!--Create a resource dictionary for colors to use TreeDataGrid when not using Fluent Theme-->

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="Black" Opacity="0.1" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="Black" Opacity="0.1" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="Black" Opacity="0.6" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
                <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="Black" />
                <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="Black" />
                <SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="Black" Opacity="0.4" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Color="White" Opacity="0.1" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPointerOverBrush" Color="White" Opacity="0.1" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBackgroundPressedBrush" Color="White" Opacity="0.6" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPointerOverBrush" Color="Transparent" />
                <SolidColorBrush x:Key="TreeDataGridHeaderBorderBrushPressedBrush" Color="Transparent" />
                <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPointerOverBrush" Color="White" />
                <SolidColorBrush x:Key="TreeDataGridHeaderForegroundPressedBrush" Color="White" />
                <SolidColorBrush x:Key="TreeDataGridSelectedCellBackgroundBrush" Color="White" Opacity="0.4" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

[timunie]

@KentSwan see https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/pull/247

Will be available in 11.1 I believe, so your solution is a workaround for niw but will be improved soon. Thx for pointing out.

[maxkatz6]

Okay, here's the deal. For a TreeDataGrid app, the In App.axaml file below can switch between both Simple and Fluent Theme with both themes installed. It will also work with SimpleTheme with only SimpleTheme installed and FluentTheme not installed. It will not work if the StyleInclude is removed. If no theme is specified I get a transparent viewport so that doesn't work. Added are two screen captures showing that the styling switchover works BUT this is a truly ugly hidden agenda, guys.

You misunderstood.

In any way, you NEED to include your MAIN theme for the framework (FluentTheme, SimpleTheme or any third-party theme). As it includes styles for all base controls, including Window itself (that's why your window was transparent). And you NEED to include TreeDataGrid styles, as they are shipped independently from the main framework and main themes.

What problem is, it is less obvious on how to use TreeDataGrid with any other app theme, like with Simple one. I send a workaround before and pushed a PR on how to simplify it (i.e. by referencing Generic.axaml which provides base colors that can work anywhere).

Will be available in 11.1

TreeDataGrid updates are detached from the main framework. So, it could be released before 11.1.

[KentSwan]

Thanks. All this was tested with 11.05 and 11.06. Also DataGrid and TreeDataGrid are very complex composited controls. One of the things I've been grumbling about is trying to find out what are the various property names and, when they're which subcomponent are they associated with. This is both for styling properties but also for control properties such as selected items etc, For instance by deep diving and a lot of experimenting I finally found that I could get white lettering on a black background in a DataGrid header if I setu up some styles like the following

<UserControl.Styles>
    <Style Selector="DataGrid">
        <Setter Property="RowBackground" Value="White"/>
        <Setter Property="BorderThickness" Value="10"/>
    </Style>
    <Style Selector="DataGrid,DataGridColumnHeader">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="White"/>
    </Style>
</UserControl.Styles>

Soooo.... Guy's where can I find all of the selectors and examples that I can effectively use for both TreeDataGrid and DataGrid for styling and control.

For instance I want to style the line highlighter foreground and background that I can move up and down, the selected row(s) foregound and background, I found the background but where's the alternating row background. such documents, if it exists, seem to have been written on toilet paper... eg expendable.

[ClassyCircuit]

When will this be released? I want to use TreeDataGrid with FluentAvalonia theme, but I am getting this error: System.Collections.Generic.KeyNotFoundException: 'Static resource 'SystemListLowColor' not found.'

[KentSwan]

Sounds like you forgot to add the StyleInclude for TreeDataGrid in App.axaml file per the example snippet below. For reference, I'm running V11.06 with CommunityToolkit.Mvvm in VS2022 on Windows 10 Pro and I'm still waiting for a SimpleTheme for TreeDataGrid. Regular DataGrid has both Fluent and Simple.

<Application.Styles>
    <FluentTheme/>
    <StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml"/>
    <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml" />
</Application.Styles>