Flyout的“轻度解雇”需要2个点击才能打开下一个弹出窗口

Posted 2021-04-02

我有两个按钮，点击时显示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的打开/关闭方式？

我不确定如何解决这个问题！

答案

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

当使用水龙头解雇时，此手势通常被吸收而不会传递到下方的UI。例如，如果在打开的弹出窗口后面有一个按钮，则用户的第一次点击会解除弹出按钮，但不会激活此按钮。按下按钮需要再次点击。

您可以通过将按钮指定为弹出按钮的输入传递元素来更改此行为。由于上述轻度消除操作，弹出按钮将关闭，并且还会将点击事件传递给其指定的OverlayInputPassThroughElement。考虑采用此行为来加速用户在功能相似的项目上的交互。如果您的应用程序具有收藏夹集合并且集合中的每个项目都包含附加的弹出按钮，则可以合理地期望用户可能希望快速连续地与多个弹出窗口进行交互。

[！注意]注意不要指定叠加输入传递元素，这会导致破坏性操作。用户已习惯于不会激活主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);}