Show flyout above UI element at a specific position

Question

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

Answer 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.