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

我有gridView，它的项目非常简单，我在每个gridViewItem上都有按钮。 在此按钮上单击我想显示一个与gridViewItem具有相同内容的弹出按钮，但也显示更多数据。 这很容易，但我想将flyout定位在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)); } 

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

如果您能阅读中文，请参阅WebBlog和此 。