防止打开的 CommandBar 吞下 Pointer 事件

Question

我有一个带有命令栏的网格。我只想在指针悬停在 Grid 或任何子组件上时才显示 CommandBar。

我通过在 PointerEntered 事件中将 IsOpen 设置为 true 来显示 CommandBar。不幸的是，打开的 CommandBar 正在吞噬 PointerExited 事件，我无法关闭 CommandBar。

我发现的东西：

• 如果我将 IsEnabled 设置为 true，则 CommandBar 运行良好...除了我的按钮被禁用 ;)
• 如果我设置 ClosedDisplayMode 而不是 IsOpen，它也可以工作 - 但隐藏和打开之间没有很好的过渡

是什么吞噬了我的指针事件，我该如何防止呢？或者您对我的问题有不同的解决方案？

这里是一个简化的例子：

<!-- Some content -->
            
<!-- Grid with command bar -->
<Grid Height="300" Width="700" PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited" BorderBrush="Black" BorderThickness="1">
  <!-- Template just set Visibility of "MoreButton" to Collapsed (hiding it because it is not needed if you have hover ability) -->
  <CommandBar VerticalAlignment="Bottom" Canvas.ZIndex="1" x:Name="uxCommandBar" Template="{StaticResource CommandBarControlTemplate1}">
    <!-- Buttons -->                  
  </CommandBar>
  
  <!-- Other content stuff - here a Canvas for providing a hoverable area -->
  <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red"></Canvas>
</Grid>

Answer 1

我想到了两件事：

1. 默认情况下，命令栏的 IsSticky 为 false，这意味着它会在轻关闭时自动将 IsOpen 设置为 false（即，如果您单击命令栏元素之外的任何位置）。它通过在打开时将命令栏和透明网格显示为弹出窗口来实现此目的。透明网格是吃指针事件的东西。将 IsSticky 设置为 true 以防止这种行为。
2. 可以直接在页面上设置命令栏（通过 TopAppBar/BottomAppBar 属性），也可以像任何其他元素一样将其作为子元素放在可视树中的任何位置。您可能需要将命令栏设置为网格中某处的子元素，而不是直接在页面上设置，否则一旦您将鼠标移到命令栏上，就会触发 PointerExited 事件。

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited">
            <CommandBar x:Name="bar" IsSticky="True" VerticalAlignment="Bottom">
                <AppBarButton Icon="Accept" Label="Done"/>
            </CommandBar>
        </Grid>
    </Grid>
</Page>

private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    bar.IsOpen = true;
}

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