浮出控件的“轻度关闭”导致需要 2 次点击才能打开下一个浮出控件

本文关键字：控件 下一个 轻度关闭 | 更新日期: 2023-09-27 18:33:02

我有两个按钮，单击时会显示浮出控件。我的显示方式与 XAML UI 基础知识示例中演示的方式相同： 

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. 按钮
  4. 1 的浮出控件已关闭(按钮 2，Page 也不会注册点击(
  5. 点按按钮 2
  6. 现在，按钮 2 的浮出控件已打开

我在寻找什么：

  1. 点按按钮 1
  2. 按钮 1 的浮出控件已打开
  3. 点按按钮 2
    4. 按钮 1 的浮出控件
  4. 关闭，按钮 2 的浮出控件打开。

我该怎么做？我尝试拦截页面的点击事件，但是当浮出控件打开时，它似乎拦截了点击事件，因此它可以用于浮出控件的轻度关闭

在此处重写浮出控件或浮出控件演示器样式的样式是否对我有帮助？或者，也许以更像 MVVM 的方式打开浮出控件，这将允许我更好地控制浮出控件的打开/关闭方式？

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

浮出控件的“轻度关闭”导致需要 2 次点击才能打开下一个浮出控件

这是我

在Microsoft文档中发现的内容：

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

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

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

<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);}
相关文章：