XAML TreeViewItem模板点击/选择/突出显示问题

vu8f3i0k  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(173)

我是WinUI 3的新手,目前正在构建TreeView(CommunityToolkit),我可以在其中拖放TreeViewItem。我拥有的TreeViewItem由3部分组成,一个组名,一个显示名和子项。代码的拖放部分工作正常,然而,有一个问题,点击一个项目并不总是选择/突出显示它,我似乎找不到根本问题的原因。

在上图中,第一个项目是“选中”的,正如我所希望的那样,左边用蓝色高亮显示。但当我单击其他两个项目(级别1或级别2)时,我观察到以下行为。
1.单击“U”或“级别1”不会选择该项目。会显示一些“按下”样式,但一旦松开鼠标按钮,什么也不会发生。不存在突出显示或选择的样式
1.单击红线的正上方或正下方会按预期选择项目。
请参见下面的XAML

<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>

而代码隐藏

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; }
}

出于测试的目的,我删除了所有拖放代码,因为它们对上述问题没有影响。但是,需要说明的是,我只在项目模板中将CanDrag设置为True时才遇到此问题。
任何帮助解决这个问题将不胜感激。

uyhoqukh

uyhoqukh1#

由于TextBlocks的原因,单击事件不会到达TreeViewItem。最简单的方法是在两个TextBlocks上禁用IsHistTestVisible

<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}" />

相关问题