Customizing TreeView Layout to Draw Connection Lines Between Nodes

[klape1969]

Hi everyone,

I'm working on a project using Avalonia's TreeView, and I would like to customize its appearance to include connection lines between nodes, similar to the style shown in the image:

In particular, I want to:

1. Draw vertical and horizontal lines to visually connect parent and child nodes.
2. Maintain flexibility with the data binding (e.g., support dynamic nodes).

Does Avalonia's TreeView support this type of customization out of the box, or would I need to implement a custom control/template? If customization is required, could you recommend the best approach for implementing such a feature in a clean and reusable way?

Any advice or code examples would be greatly appreciated!

Thanks in advance for your help!

Best regards,
Klaus-Peter

[msneijders]

You will need a custom ControlTheme (or template) for TreeViewItem. I will share you this, what my ux designer made me do:

Based on a copy paste from avalonia's Fluent theme.

This is ofc specifically for my design, not intended to be the cleanest way, just tweaked until it worked, so just as an inspiration for yours:
Lines are done using the Rectangle named LineVert and the Border just before the togglebutton.

<ControlTheme x:Key="{x:Type TreeViewItem}" TargetType="TreeViewItem">
    <Setter Property="Padding" Value="4, 0, 4, 0" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="MinHeight" Value="32" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="ClipToBounds" Value="False" />

    <Setter Property="Template">
        <ControlTemplate>
            <Grid RowDefinitions="Auto, *">
                <Rectangle
                    x:Name="LineVert"
                    Grid.RowSpan="2"
                    Width="1"
                    Margin="{TemplateBinding Level,
                                             Mode=OneWay,
                                             Converter={StaticResource TreeViewItemLeftMarginConverter}}"
                    HorizontalAlignment="Left"
                    Fill="{DynamicResource TreeViewItem/Line/Color}"
                    RenderTransform="TranslateX(9px)"
                    ZIndex="99" />
                <Border
                    Name="PART_LayoutRoot"
                    MinHeight="{TemplateBinding MinHeight}"
                    Margin="4,2"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Classes="TreeViewItemLayoutRoot"
                    CornerRadius="{StaticResource ListBox/Item/CornerRadius}"
                    Focusable="True"
                    TemplatedControl.IsTemplateFocusTarget="True">
                    <Grid
                        Name="PART_Header"
                        Margin="{TemplateBinding Level,
                                                 Mode=OneWay,
                                                 Converter={StaticResource TreeViewItemLeftMarginConverter}}"
                        ColumnDefinitions="Auto, *">
                        <Panel Name="PART_ExpandCollapseChevronContainer" Width="36">
                            <StackPanel Orientation="Horizontal">
                                <Border
                                    Width="8"
                                    Height="16"
                                    Margin="0,0,4,0"
                                    VerticalAlignment="Top"
                                    BorderBrush="{DynamicResource TreeViewItem/Line/Color}"
                                    BorderThickness="1,0,0,1"
                                    CornerRadius="0, 0, 0, 8"
                                    IsVisible="True"
                                    RenderTransform="TranslateX(5px)" />
                                <ToggleButton
                                    x:Name="PART_ExpandCollapseChevron"
                                    Width="20"
                                    Height="20"
                                    Focusable="False"
                                    IsChecked="{TemplateBinding IsExpanded,
                                                                Mode=TwoWay}"
                                    Theme="{StaticResource ToggleButton/Theme/TreeExpander}" />
                            </StackPanel>
                        </Panel>

                        <ContentPresenter
                            Name="PART_HeaderPresenter"
                            Grid.Column="1"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Background="Transparent"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            Focusable="False" />
                    </Grid>
                </Border>
                <ItemsPresenter
                    Name="PART_ItemsPresenter"
                    Grid.Row="1"
                    IsVisible="{TemplateBinding IsExpanded}"
                    ItemsPanel="{TemplateBinding ItemsPanel}" />
            </Grid>
        </ControlTemplate>
    </Setter>

    <Style Selector="^[IsLastChild=true] /template/ Rectangle#LineVert">
        <Setter Property="Height" Value="8" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <!--<Setter Property="Fill" Value="Red" />-->
    </Style>

   <!-- rest of styles -->
</ControlTheme>

[klape1969]

Hello,
first of all, thank you very much for the quick response. Unfortunately, I don't quite understand the concept yet. I tried to implement your suggestion. So, I first thought about the TreeViewItemLeftMarginConverter.

namespace AvaloniaCheck.Converter;

public class TreeViewItemLeftMarginConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, System.Globalization.CultureInfo culture)
    {
        if (value is int level)
        {
            return new Avalonia.Thickness(level * 16, 0, 0, 0);
        }
        return new Avalonia.Thickness(0);
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Then I wrote a small TreeNode class:

namespace AvaloniaCheck.Models;

public partial class TreeNode : ObservableObject
{
    [ObservableProperty]
    private string _name;

    [ObservableProperty]
    private ObservableCollection<TreeNode>? _children;

    [ObservableProperty]
    private bool _isExpanded;

    [ObservableProperty]
    private bool _isSelected;

    public TreeNode(string name, ObservableCollection<TreeNode>? children = null)
    {
        Name = name;
        Children = children;
    }
}

After that, I made the necessary preparations in the MainViewModel:

public partial class MainWindowViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<TreeNode> _nodes;

    public MainWindowViewModel()
    {
        Nodes = new ObservableCollection<TreeNode>
        {
            new TreeNode("Element 1", new ObservableCollection<TreeNode>
            {
                new TreeNode("Sub element 1.1"),
                new TreeNode("Sub element 1.2")
            }),
            new TreeNode("Element 2")
        };
    }
}

After that, I added this

<StackPanel>
  <TreeView>
	  <TreeView.Styles>
		  <Style Selector="TreeViewItem" BasedOn="{StaticResource MITreeView}" />
	  </TreeView.Styles>
	    <TreeViewItem Header="Element 1">
		    <TreeViewItem Header="Sub element 1.1" />
		    <TreeViewItem Header="Sub element 1.2" />
	    </TreeViewItem>
	  <TreeViewItem Header="Element 2" />
  </TreeView>
</StackPanel>

to the MainWindow.axaml. In the App.xaml, I added this

<Application.Resources>
  <ControlTheme x:Key="MITreeView" TargetType="TreeViewItem">
	  <Setter Property="Padding" Value="4, 0, 4, 0" />
	  ....
  </ControlTheme>
  <converter:TreeViewItemLeftMarginConverter x:Key="TreeViewItemLeftMarginConverter" />
</Application.Resources>

Unfortunately, I get this error:

Unable to resolve suitable regular or attached property BasedOn on type Avalonia.Base:Avalonia.Styling.Style Line 21, position 6.

This happens at

<Style Selector="TreeViewItem" BasedOn="{StaticResource MITreeView}" />

in MainWindow.axaml. I’m stuck here—do you have any further tips for me?

Thank you very much for your effort.

Cheers,
Klaus-Peter

[msneijders]

Get your styling working without the viewmodels, that is only making it a bit more complicated, and not needed for making and testing your styling -- do viewmodels later.

You can write up your own TreeViewItemLeftMarginConverter as you did, but an implementation already comes with Avalonia: Avalonia.Controls.Converters.MarginMultiplierConverter, which the default ControlTheme of TreeView also uses.

About your error: Style does not have a BasedOn, it's a property of ControlTheme.

<Style Selector="TreeViewItem">
   <Setter Property="Theme" Value="{StaticResource MITreeView}" />
</Style>

And the BasedOn like this:

<ControlTheme x:Key="MITreeView" TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
   <Setter Property="Template">
       <!-- your template -->
   </Setter>
</ControlTheme>

<TreeView>
   <TreeViewItem Theme="{StaticResource MyOwnTreeViewItemTheme}" />
</TreeView>

But my best advice is, when you are just starting out with doing custom styling and controlthemes, read the documentation about it to get the principles, and perhaps start with something smaller like a Button.