Show flyout above UI element at a specific position

问题

I have gridView, and it's items are quite simple, I have button on each gridViewItem. On this button click I want to show a flyout with the same content as the gridViewItem but also to show some more data. It is all easy but I want to position the flyout above the gridViewItem to have it's shown items exactly same position as the gridViewItem items.

This technique is used in Store app for Windows 10. When seen comments from users for apps. clicking more shows that popup.

回答1:

You can use Flyout.ShowAt show it ,but you should give a position.

Try use RightTapped="GridColection_OnRightTapped" in DataTemplate. Or you use the button click.

In the GridColection_OnRightTapped,You can use e.GetPosition to get the position.

If you want to get the position from UIElement,you can use the code to get the screen coords:

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

The UIElement is your GridViewItem.

In code :

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

See: How to get the absolute position of an element?

If you can read Chinese,please see the WebBlog and this.

来源：https://stackoverflow.com/questions/42864669/show-flyout-above-ui-element-at-a-specific-position

标签

xaml

gridview

popup

uwp