UWP：突出显示 ListBoxItem - 与突出显示一致的事件

Question

我有一个 ListBox 绑定到定义类型的项目集合。我的要求是，每次将鼠标悬停在模板化 ListBoxItem 的区域上时，都会在 ListBoxItem 旁边打开第二个 ListBox，显示 Word 类型的子项。

（我基本上是在使用两个 ListBox 实现类似于 TreeView 的东西。这是针对早期版本的，因此不能选择使用 TreeView 控件。）

这是数据结构...

public class Word
{
    public string Name { get; set; }                
}

public class Definition 
{
    public string Name { get; set }
    public ObservableCollection<Word> Words;
}

public class Dictionary
{
    public string Name { get; set }
    public ObservableCollection<Definition> Definitions;
}

这里是 XAML 视图...

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>  
    <Button Grid.Row="0"
        Height="0">
        <Button.Flyout>
            <Flyout x:Name="DefinitionFlyout"/>
                <ListBox x:Name="WordsListBox"                                                                                                                                                                                                                       HorizontalAlignment="Stretch">
                    <ListBox.ItemTemplate>
                        <DataTemp late x:DataType="local:Word">
                            <TextBox TextWrapping="NoWrap"                                                                                                                                                                                                                                                         
                                Height="Auto" 
                                BorderThickness="0"
                                HorizontalAlignment="Stretch"
                                Text="{x:Bind Name}"
                                TextAlignment="Left"/>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>              
            </Flyout>
        </Button.Flyout>
    </Button>
    <ListBox x:Name="DefinitionsListBox" 
        Grid.Row="1"                                                     
                SelectionMode="Single"                                                      
                HorizontalAlignment="Stretch">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>                                                        
                                </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate x:DataType="local:Definition">                                                        
                            <TextBox TextWrapping="NoWrap"                                                                     
                                    Height="Auto"                                                                  
                                        BorderThickness="0"                                                                      
                                        HorizontalAlignment="Stretch"                                                                 
                                        Text="{x:Bind Name, Mode=TwoWay}">                                                                
                                </TextBox>                                                        
                        </DataTemplate>
                </ListBox.ItemTemplate>
        </ListBox>
</Grid>

当鼠标指针悬停在定义列表框中的定义项上时，单词列表框应该飞出并显示该定义的单词。当指针退出该定义并悬停在新定义上时，我希望 WordsListBox 反映该更改。

很遗憾，我找不到可以帮助我完成此任务的活动。

我认为在定义的 TextBox 中定义 PointerEntered 和 PointerExited 可以解决问题，但它们不会，因为 PointerExited 在 PointerEntered 之后立即触发，几乎同时触发，而不是在鼠标退出 TextBox 区域时触发。并且 ListBox 的 SelectionChanged 不会触发。

第一个事件应该在 ListBoxItem 突出显示开始时触发，第二个事件应该在突出显示结束时触发。

请问您对此有何建议？

Answer 1

我认为在定义的 TextBox 中定义 PointerEntered 和 PointerExited 可以解决问题，但它们不会，因为 PointerExited 在 PointerEntered 之后立即触发，几乎同时发生。

问题是当Flyout在按钮上显示时，窗口上有一个遮罩层覆盖。这将防止定义TextBox 的基本输入事件。看起来PointerExited 在PointerEntered 之后立即触发，几乎同时发生。

为了解决这个问题，您可以为 Flyout 设置 OverlayInputPassThroughElement 属性，使 ListBox 的区域可以在 Flyout 打开时响应 PointerEntered PointerExited 事件。更多内容请参考以下代码。

 <Flyout x:Name="DefinitionFlyout" OverlayInputPassThroughElement="{x:Bind DefinitionsListBox}">