Use of Expander control in a Treeview control

[Seated1]

I have a TreeView control whose root nodes may go up to 3 nodes deep.

For the lowest child node, I would like an expander control; for all non-lowest-level child nodes to not use an expander control. To accomplish this it is my understanding that I can use a DataTemplate selector.

For the lowest-level child nodes that have an expander,

• I do not want a bounding box (a border). I have tried setting the thickness to 0 and brush to transparent but it still appears.
• Within each expander I have a stack panel (orientation = horizontal) with a checkbox followed by a textblock. Whenever I click anywhere within the expander, it opens. I would like to only open when the down arrow is clicked.

I have googled and tried a few things but none of them are working. Thank you in advance for your help.

[Matubil]

A couple of things that may help here.

First, Avalonia doesn't have a WPF-style DataTemplateSelector. If your lowest-level nodes are a different type, the cleanest solution is usually to give them their own DataTemplate / TreeDataTemplate. If they are the same type, you can implement IDataTemplate and choose the template based on the node data.

For the border, you can remove the default Expander styling with something like:

<Expander.Styles>
    <Style Selector="Expander">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Background" Value="Transparent"/>
    </Style>
</Expander.Styles>

If you're still seeing a border after that, it may actually be coming from the TreeViewItem or from another element in the template rather than the Expander itself.

The second part is a little different: an Expander normally toggles when its whole header is clicked, so simply putting a CheckBox and TextBlock in the header will still make that whole area interactive.

If you specifically want only the arrow to expand/collapse, I would probably avoid relying on the default Expander header behavior and instead make the arrow a separate ToggleButton, bind it to an IsExpanded property, and show/hide the content from that value.

Something conceptually like:

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <ToggleButton IsChecked="{Binding IsExpanded}">
            <TextBlock Text="▶"/>
        </ToggleButton>

        <CheckBox IsChecked="{Binding IsChecked}"/>
        <TextBlock Text="{Binding Name}"/>
    </StackPanel>

    <ContentControl
        Content="{Binding}"
        IsVisible="{Binding IsExpanded}" />
</StackPanel>

That way clicking the checkbox or text won't expand the node; only the toggle button will.

You could also re-template the Expander and work with its internal PART_toggle, but for this use case a small custom layout may be simpler and easier to maintain.