在特定位置的UI元素上方显示弹出窗口

Question

我有gridView，它的项目非常简单，我在每个gridViewItem上都有按钮。在此按钮上单击我想显示一个与gridViewItem具有相同内容的弹出按钮，但也显示更多数据。这很容易，但我想将弹出按钮放在gridViewItem上方，让它显示的项目与gridViewItem项目的位置完全相同。

此技术用于Windows 10的Store应用程序。当看到用户对应用程序的评论时。点击更多会显示该弹出窗口。

Answer 1

您可以使用Flyout.ShowAt展示它，但您应该给出一个位置。

尝试在DataTemplate中使用RightTapped="GridColection_OnRightTapped"。或者您使用按钮单击。

在GridColection_OnRightTapped中，您可以使用e.GetPosition来获取该位置。

如果你想从UIElement获得位置，你可以使用代码来获得屏幕坐标：

        var t = UIElement.TransformToVisual(Window.Current.Content);
        Point screenCoords = t.TransformPoint(new Point(0, 0));

UIElement是你的GridViewItem。

在代码中：

 private void GridColection_OnRightTapped(object sender,     RightTappedRoutedEventArgs e)
{
    MenuFlyout myFlyout = new MenuFlyout();
    MenuFlyoutItem firstItem = new MenuFlyoutItem { Text = "OneIt" };
    MenuFlyoutItem secondItem = new MenuFlyoutItem { Text = "TwoIt" };
    myFlyout.Items.Add(firstItem);
    myFlyout.Items.Add(secondItem);

    //if you only want to show in left or buttom 
    //myFlyout.Placement = FlyoutPlacementMode.Left;

    FrameworkElement senderElement = sender as FrameworkElement;
    //the code can show the flyout in your mouse click 
    myFlyout.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement));
}

请参阅：How to get the absolute position of an element?

如果您可以阅读中文，请参阅WebBlog和this。