UWP-PointerEntered / PointerExited在网格行上模拟鼠标悬停

Question

我已经检查了对uwp中的fontIcon模拟鼠标悬停效果 。 但是我面临着另一个“闪烁”的问题。

我在ScrollViewer内部有一个Grid，它是PivotItem控件的子级。 网格在开始时为空，然后以编程方式填充。

<PivotItem>
    <ScrollViewer x:Name="MyScrollBar" >
        <Grid Name="MyGrid">
            <Grid.RowDefinitions>
                 <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*"></ColumnDefinition>
                 <ColumnDefinition Width="*"></ColumnDefinition>
                 <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
         </Grid> 
    </ScrollViewer>
</PivotItem>

然后，这些列分别填充3个TextBlock。 我的目标是在悬停在一行（而不是单个TextBlock）上时显示具有更多详细信息的弹出窗口。 为此，我为每行定义一个附加的透明Rectangle，其ColumnSpan为3，并将其添加为每行的最后一个子级。 然后，我将其弹出，如下所示：

Rectangle rect = new Rectangle();
rect.Opacity = 0;
rect.SetValue(Grid.RowProperty, r);
rect.SetValue(Grid.ColumnSpanProperty, 3);
Flyout fl = new Flyout();
Grid flGrid = new Grid();
TextBlock flTb1 = new TextBlock();
flTb1.Text = details.Name;
flGrid.Children.Add(flTb1);
fl.Content = flGrid;
rect.SetValue(FlyoutBase.AttachedFlyoutProperty, fl);
rect.PointerEntered += Rect_PointerEntered;
rect.PointerExited += Rect_PointerExited;
rect.Margin = new Thickness(2);

这里的PointerEntered和PointerExited事件处理程序：

private void Rect_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    ((Flyout)(((Rectangle)sender).GetValue(FlyoutBase.AttachedFlyoutProperty))).ShowAt((Rectangle)sender);
}

private void Rect_PointerExited(object sender, PointerRoutedEventArgs e)
{
    ((Flyout)(((Rectangle)sender).GetValue(FlyoutBase.AttachedFlyoutProperty))).Hide();
}

当指针进入网格行的命中区域时，弹出按钮突然出现并消失。 因此，无论指针何时移动，即使在同一行上也是如此（我不希望将指针移动到同一行上时，Flyout消失）。 结果是闪烁的弹出。 在我看来，PointerEntered / PointerExited事件都在悬停的任何时刻都被触发。

我已经尝试过的：

1. 仅处理PointerEntered（我知道这不是最佳实践，但我尝试过）
2. 将PointerEntered.Handled设置为false（我认为网格中的其他控件可能正在影响行为）
3. 处理指针仅已移动
4. 存储“悬停”和“悬停”矩形以识别指针何时在同一行/另一行上方
5. 我什至不记得很多其他尝试……总是得到相同的闪烁结果。

有人能指出我正确的方向吗？ 先感谢您！

Answer 1

在我看来，PointerEntered / PointerExited事件都在悬停的任何时刻都被触发。

好像一旦Flyout出现在PointerExited会触发连鼠标都没有离开命中测试区域。 如果没有“ Flyout则Pointer事件可以按照您的想法进行工作，为此，您可以测试官方样本 。

仅处理PointerEntered（我知道这不是最佳实践，但我尝试过）

这样应该可以工作，因为没有PointerExited事件的Flyout将不会被隐藏。 我还测试了它，直到单击另一个空间， Flyout按钮都不会消失。 但是正如您所说，这可能不是一个好习惯。

 private void Rect_PointerEntered(object sender, PointerRoutedEventArgs e)
 {
    ((Flyout)(((Rectangle)sender).GetValue(FlyoutBase.AttachedFlyoutProperty))).ShowAt((Rectangle)sender);
 }

 private void Rect_PointerExited(object sender, PointerRoutedEventArgs e)
 {
     //((Flyout)(((Rectangle)sender).GetValue(FlyoutBase.AttachedFlyoutProperty))).Hide();
 }

您可以尝试使用ToolTip另一种方法。 您甚至不需要Pointer事件，当您将鼠标悬停在该行上时，它将显示，而当您移出该行时，它将消失。 它不会闪烁。 虽然一段时间后它会消失，但我认为足以显示细节。

 Rectangle rect = new Rectangle();
 rect.Opacity = 0.3;
 rect.SetValue(Grid.RowProperty, r);
 rect.SetValue(Grid.ColumnSpanProperty, 3);
 rect.Fill = new SolidColorBrush(Colors.Azure);  
 Grid flGrid = new Grid();
 TextBlock flTb1 = new TextBlock();
 flTb1.Text = "testname"+r;
 flGrid.Children.Add(flTb1); 
 rect.SetValue(ToolTipService.ToolTipProperty, flGrid); 
 rect.Margin = new Thickness(2);
 MyGrid.Children.Add(rect);

Answer 2

正如@Sunteen在上一个答案中指出的那样，弹出按钮将激活PointerExited事件。 您可以使用教学提示控件而不是弹出控件。 TeachingTip控件不会触发PointerExited，因此您可以获得悬停效果。 请注意，您可能需要添加“教学提示”控件。 请参阅为UWP App实施教学提示控件

<xmlns:controls="using:Microsoft.UI.Xaml.Controls">
<Image 
    Name="draggable_image"  
    PointerEntered="Draggable_image_PointerEntered"
    PointerExited="Draggable_image_PointerExited"/>       
<controls:TeachingTip 
    x:Name="IconTip"
    Target="{x:Bind draggable_image}"
    PreferredPlacement="Bottom"
    PlacementMargin="10"/>

 private void Draggable_image_PointerEntered(object sender, PointerRoutedEventArgs e) 
 {
     //IconTip.Title = set title 
     //IconTip.Subtitle = set sub title;
     IconTip.IsOpen = true;

 }

 private void Draggable_image_PointerExited(object sender, PointerRoutedEventArgs e)
 {
     IconTip.IsOpen = false;
 }