在 UI 元素上方的特定位置显示弹出按钮

Question

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

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

Answer 1

你可以使用Flyout.ShowAtshow it，但你应该给出一个位置。

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

在GridCollection_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));
}

请参阅：如何获取元素的绝对位置？

如果你能阅读中文，请参阅网络博客和这个。