UWP position flyout at mouse cursor

Question

I have a grid with a load of textblocks inside and a flyout with various options attached to the grid.

<FlyoutBase.AttachedFlyout>
    <MenuFlyout>
        <MenuFlyoutItem x:Name="EditButton" Text="Edit" Click="EditButton_Click"/>
        <MenuFlyoutItem x:Name="DeleteButton" Text="Delete"/>
    </MenuFlyout>
</FlyoutBase.AttachedFlyout>

The problem is that the flyout will appear in the same fixed spot somewhere in the middle of the grid or I can set it programmatically to appear at an element. I want it to appear wherever the mouse was right clicked. Is this possible or am I going about this the wrong way?

Can you show us the code that is opening the flyout? – Marian Dolinský Nov 14 '16 at 14:47 — Marian Dolinský, Nov 14 '16 at 14:47

score 7 · Accepted Answer · answered Nov 14 '16 at 14:53

7

I don't know how are you showing the Flyout, but in my app, I use the RightTapped event of my ListView and following code in the RightTapped event handler to achieve the same thing as you want.

private void MyListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    var tappedItem     = (UIElement)e.OriginalSource;
    var attachedFlyout = (MenuFlyout)FlyoutBase.GetAttachedFlyout(MyListView);

    attachedFlyout.ShowAt(tappedItem, e.GetPosition(tappedItem));
}

answered Nov 14 '16 at 14:53

Marian Dolinský

3,312
3
15
29

MenuFlyout can show in special position but you cant show the Flyout in a particular position. – lindexi Jun 28 '17 at 01:17
Showing at a specified position breaks the Tapped event of child MenuFlyoutItems. Probably a bug in the latest UWP SDK. – The Pademelon Jul 04 '17 at 09:29
UPDATE: This can be worked around by calling ShowAt(tappedItem) first, then calling ShowAt(tappedItem, e.GetPosition(tappedItem)). – The Pademelon Jul 04 '17 at 09:35

UWP position flyout at mouse cursor

1 Answers1