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

Question

我已经查过了Simulating a mousehover effect on a fontIcon in uwp .但我面临着一个不同的“闪烁”问题。

我在 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)上时显示带有其他详细信息的 Flyout。为此，我为每一行定义了一个 ColumnSpan 为 3 的附加透明 Rectangle，并将其添加为每一行的最后一个子项。然后我给它一个 Flyout 如下:

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. 仅处理 PointerMoved
4. 存储“悬停”和“悬停”矩形以识别指针何时位于同一行/另一行上方
5. 还有很多我什至不记得的其他尝试...总是得到相同的闪烁结果。

谁能指出我正确的方向？提前致谢!

Answer 1

It seemes to me that the PointerEntered/PointerExited events are both fired at any point hovered.

似乎一旦 Flyout 出现，即使鼠标没有离开 HitTest 区域，PointerExited 也会触发。如果没有 Flyout，Pointer 事件可以像您想象的那样工作，为此您可以测试 official sample .

Handle the PointerEntered only (I know this is not best practice, but I tried)

这种方式应该能够工作，因为如果没有 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);