c# - Flyout 的 "Light Dismissal"导致需要点击 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);}