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