Flyout 的“轻微关闭”导致需要轻按 2 次才能打开下一个 Flyout

Question

我有两个按钮在单击时显示Flyouts。我以与XAML UI Basics sample 中演示的方式相同的方式显示它们：

private void ButtonTapped(object sender, TappedRoutedEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (element != null)
    {               
        FlyoutBase.ShowAttachedFlyout(element);
    }
}

我的问题是，如果按钮 1 的浮出控件打开，屏幕上的下一次点击会关闭浮出控件。这很好，但如果下一次点击恰好在按钮 2 上，我希望触发按钮的点击事件并打开其弹出按钮。相反，该按钮根本不注册点击并关闭按钮 1 的浮出控件。

这导致需要点击两次 - 一次关闭按钮 1 的弹出按钮，第二次显示按钮 2 的弹出按钮。

换句话说：

当前流程：

1. 点击按钮 1
2. 按钮 1 的弹出窗口已打开
3. 点击按钮 2
4. 按钮 1 的弹出按钮已关闭，（按钮 2，Page 也不注册点击）
5. 点击按钮 2
6. 现在按钮 2 的弹出按钮已打开

我在寻找什么：

1. 点击按钮 1
2. 按钮 1 的弹出窗口已打开
3. 点击按钮 2
4. 按钮 1 的弹出按钮关闭，按钮 2 的弹出按钮打开。

我该怎么做？我已经尝试拦截页面的 Tapped 事件，但是当弹出窗口打开时，它似乎拦截了 Tapped 事件，因此它可以用于 Flyout 的灯光关闭

覆盖 Flyout 的样式或 FlyoutPresenterStyle 对我有帮助吗？或者也许以更类似于 MVVM 的方式打开 Flyout，这样我可以更好地控制 Flyout 的打开/关闭方式？

我不知道如何解决这个问题！

Answer 1

这是我在 Microsoft 文档中找到的内容：

当通过点击关闭时，此手势通常会被吸收，而不是传递到下面的 UI。例如，如果在打开的浮出控件后面有一个可见的按钮，则用户第一次点击会关闭浮出控件，但不会激活此按钮。按下按钮需要再次点击。

您可以通过将按钮指定为浮出控件的输入传递元素来更改此行为。浮出控件将因上述轻度关闭操作而关闭，并且还将点击事件传递给其指定的 OverlayInputPassThroughElement。考虑采用这种行为来加快用户在功能相似的项目上的交互。如果您的应用有一个收藏夹集合，并且集合中的每个项目都包含一个附加的浮出控件，那么可以合理地预期用户可能希望快速连续地与多个浮出控件进行交互。

[!NOTE] 注意不要指定会导致破坏性操作的覆盖输入传递元素。用户已经习惯于谨慎的轻微关闭操作，这些操作不会激活主 UI。关闭、删除或类似的破坏性按钮不应在轻关闭时激活，以避免意外和破坏性行为。 在下面的示例中，FavoritesBar 中的所有三个按钮都将在第一次点击时被激活。

<Page>
<Page.Resources>
    <Flyout x:Name="TravelFlyout" x:Key="TravelFlyout"
            OverlayInputPassThroughElement="{x:Bind FavoritesBar}">
        <StackPanel>
            <HyperlinkButton Content="Washington Trails Association"/>
            <HyperlinkButton Content="Washington Cascades - Go Northwest! A Travel Guide"/>  
        </StackPanel>
    </Flyout>
</Page.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="FavoritesBar" Orientation="Horizontal">
        <HyperlinkButton x:Name="PageLinkBtn">Bing</HyperlinkButton>  
        <Button x:Name="Folder1" Content="Travel" Flyout="{StaticResource TravelFlyout}"/>
        <Button x:Name="Folder2" Content="Entertainment" Click="Folder2_Click"/>
    </StackPanel>
    <ScrollViewer Grid.Row="1">
        <WebView x:Name="WebContent"/>
    </ScrollViewer>
</Grid>

private void Folder2_Click(object sender, RoutedEventArgs e){
 Flyout flyout = new Flyout();
 flyout.OverlayInputPassThroughElement = FavoritesBar;

 flyout.ShowAt(sender as FrameworkElement);}