如何在UWP中的StackPanel中使用ContextFlyout？

Question

在GridView中，我试图在用户右键单击一个项目时显示上下文菜单。

我尝试过：

 <GridView.ItemTemplate>
    <DataTemplate>
       <StackPanel Orientation="Vertical" Width="120" Background="LightBlue">
       <StackPanel.ContextFlyout>
             <MenuFlyout>
                  <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
             </MenuFlyout>
...

但是StackPanel.ContextFlyout会抛出一个错误。我漏掉了什么？

更新

错误显示为：The attachable property 'ContextFlyout' was not found in type 'StackPanel'

ContextFlyout是UIElement的属性，而StackPanel从UIElement继承而来。

- kokokok

---

哪个错误？你有它的一些信息吗？请发布它。 - M. Pipal

Answer 1

ContextFlyout是UIElement的一个属性，而StackPanel是从UIElement派生出来的。

是的，你说得对，但要注意这个ContextFlyout属性只在引入版本3.0、版本10.0.14393.0以后才可用。你需要检查API合同版本和设备系列版本。

对于API合同版本1.0/2.0，就像@Igor Damiani建议的那样，您可以使用FlyoutBase.AttachedFlyout，在StackPanel的RightTapped事件中，例如，您可以获取DataContext:

private void StackPanel_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout(sender as StackPanel);
    var datacontext = ((FrameworkElement)e.OriginalSource).DataContext;
}

但是我注意到您的 MenuFlyoutItem 可以更改颜色，您需要访问 StackPanel 内部的UIElement或者这个 StackPanel 本身。如果是这样的话，最好将颜色绑定到实现了 INotifyPropertyChanged 接口的属性上。

- Grace Feng

---

当在UserControl中使用此功能并添加MenuFlyoutSubItem时，子菜单似乎会在窗口外部被截断。 - Arlo

@Arlo，据我所知，在 UWP 应用程序中，所有 UI 元素都应该包含在框架内，如果你想要在另一个窗口中显示对话框，你可以参考我在这个问题中的回答：make a content Dialog movable like the one in the Groove app。 - Grace Feng

实际上，我通过让上下文菜单显示在指针下方而不是元素位置来解决了它。 - Arlo

Answer 2

试试这个：

   <DataTemplate>
      <StackPanel Orientation="Vertical" Width="120" Background="LightBlue">
         <FlyoutBase.AttachedFlyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
            </MenuFlyout>
         </FlyoutBase.AttachedFlyout>
      </StackPanel>
   </DataTemplate>

你需要在一些代码后端的帮助下手动管理MenuFlyout。

- Igor Damiani

---

尽管不直观，但这是正确的语法。 - Arlo