UWP：为什么 FlyoutBase.ShowAttachedFlyout 对 Button 失败

问题描述

我在 XAML 中声明了一个 Button，其中包含一个 Button.Flyout 嵌套元素。我正在捕捉按钮单击，然后希望显示弹出窗口。但我收到一个错误：

ShowAttached was called on an element without an attached FlyoutBase.

这是 XAML：

      <Button ... Click="onMoreClicked">
        <Image Source="..." />
        <Button.Flyout > 
         ...
        </Button.Flyout>
      </Button>

而且，这是我的处理程序：

public void onMoreClicked (object sender,RoutedEventArgs e)
{
  Log.L("LP OnMoreClicked");
  Button element = sender as Button;
  FlyoutBase flyout = element.Flyout as FlyoutBase;
  FlyoutBase.ShowAttachedFlyout(element);
}

当单步调试器时，element 和 flyout 被定义，即不为空。然而，ShowAttachedFlyout 失败了。

编辑

为了清楚起见，使用@AryaDing-MSFT 的答案，这是我的工作解决方案：

<Button ... Click="onMoreClicked">
  <Image Source="..." />
  <FlyoutBase.AttachedFlyout> 
   ...
  </FlyoutBase.AttachedFlyout>
</Button>

处理程序：

public void onMoreClicked (object sender,RoutedEventArgs e)
{
  Button button = sender as Button;
  ... do stuff ...
  FlyoutBase.ShowAttachedFlyout(button);
}

解决方法

此问题是因为没有使用FlyoutBase.AttachedFlyout来附加属性，FlyoutBase.ShowAttachedFlyout和FlyoutBase.AttachedFlyout需要一起使用。

派生自 official document，如果控件没有弹出属性，您可以使用 FlyoutBase.AttachedFlyout 附加属性代替。执行此操作时，您还需要调用 FlyoutBase.ShowAttachedFlyout 方法来显示浮出控件。

所以你可以参考下面的代码。

XAML：

<Button Click="onMoreClicked">
    <FlyoutBase.AttachedFlyout>
          <Flyout>
             <TextBlock Text="This is a flyout!"/>
          </Flyout>
    </FlyoutBase.AttachedFlyout>             
</Button>

背后的代码：

private void onMoreClicked(object sender,RoutedEventArgs e)
    {
        FrameworkElement element = sender as FrameworkElement;
        FlyoutBase.ShowAttachedFlyout(element);
    }

因为按钮有flyout属性，你也可以像下面这样直接写。

<Button>
     <Button.Flyout >
         <Flyout>
            <TextBlock Text="This is a flyout!"/>
          </Flyout>
      </Button.Flyout>
</Button>