TreeViewItem template click/select/highlight issue

Question

I am new to WinUI 3 and I am currently building a TreeView (CommunityToolkit) where I can drag/drop TreeViewItems on top of each other. The TreeViewItem that I have consist of 3 parts, a group name, a display name and children items. The drag/drop part of the code works fine, however there is an issue whereby clicking on an item doesn’t always select/highlight it and I cannot seem to find the root issue as to why. See image below.

In the image above, the first item is "selected" as I would like it to be with the blue highlight to the left. But when I click on either of the other 2 items (Level 1 or Level 2), I have observed the following behaviours.

1. A click on "U" or "Level 1" does not select the item. There is some "pressed" style showing, but once the mouse button is released nothing happens. There is no highlight or selected style present
2. A click just above or below the red line selects the item as I expect it to.

See the XAML below

<Grid>
    <Border BorderThickness="2" BorderBrush="DimGray">
        <TreeView AllowDrop = "True" 
                  CanDragItems="True"
                  CanReorderItems = "False"
                  ItemsSource="{x:Bind Items}"
                  SelectedItem="{x:Bind SelectedDemoItem, Mode=TwoWay}">
            <TreeView.ItemTemplate>
                <DataTemplate x:DataType="local:DemoItem">
                    <TreeViewItem AllowDrop="True" 
                                  CanDrag="True"
                                  CollapsedGlyph=""
                                  ExpandedGlyph=""
                                  IsExpanded="True"
                                  ItemsSource="{x:Bind Children}"
                                  Padding="-10,0,0,0">
                        <TreeViewItem.Content>
                            <StackPanel AllowDrop="True" 
                                        BorderBrush="Red"
                                        BorderThickness="1"
                                        CanDrag="True"
                                        Orientation="Horizontal">
                                <TextBlock FontSize="14" 
                                           FontWeight="ExtraBold"
                                           IsColorFontEnabled="True"
                                           Margin="0,0,10,0"
                                           MinWidth="30"
                                           TextAlignment="Center" 
                                           Text="{x:Bind Group}" />
                                <TextBlock Text="{x:Bind DisplayName}" Margin="0,0,5,0"/>
                            </StackPanel>
                        </TreeViewItem.Content>
                    </TreeViewItem>
                </DataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Border>
</Grid>

And the code-behind

public sealed partial class TestUserControl : UserControl
{
    public TestUserControl()
    {
        InitializeComponent();
        FillData();
    }

    private void FillData()
    {
        var level0 = new DemoItem { DisplayName = "Level 0", Group = Groups.M };
        var level1 = new DemoItem { DisplayName = "Level 1", Group = Groups.U };
        var level2 = new DemoItem { DisplayName = "Level 2", Group = Groups.C };

        level1.Children.Add(level2);
        level0.Children.Add(level1);

        Items.Add(level0);
        Items.Add(level0);
    }

    public ObservableCollection<DemoItem> Items { get; } = new();

    public DemoItem SelectedDemoItem { get; set; }

}

public enum Groups
{
    S, M, U, C
}

public class DemoItem
{
    public string DisplayName { get; set; }
    public ObservableCollection<DemoItem> Children { get; } = new();
    public Groups Group { get; set; }
}

For the purpose of this test, I have removed all drag/drop code as they have no affect on the problem above. However, it may help to mention that I have seen this problem occur only when CanDrag is set to True within my item template.

Any help to fix this will be greatly appreciated.

Answer 1

Click events won't reach the TreeViewItem because of the TextBlocks. The easiest way is to disable IsHistTestVisible on both TextBlocks.

<TextBlock
    MinWidth="30"
    Margin="0,0,10,0"
    FontSize="14"
    FontWeight="ExtraBold"
    IsColorFontEnabled="True"
    IsHitTestVisible="False"
    Text="{x:Bind Group}"
    TextAlignment="Center" />
<TextBlock
    Margin="0,0,5,0"
    IsHitTestVisible="False"
    Text="{x:Bind DisplayName}" />