c# - 在特定位置显示 UI 元素上方的浮出控件

Question

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

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

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 .