How best to handle double-tap events on MenuFlyoutItems?

Question

We are using Flyouts in our app to display context choices to our users. We are finding that if the user accidentally double-clicks on one of the MenuFlyoutItems, the first click is being processed by the menu, but the second click is being processed by whatever control sits under the MenuFlyoutItem, leading to all sorts of problems. We have tried to set the MenuFlyoutItems so that they will accept the DoubleTapped event (we can then process a double tap as a single tap), but we never get the DoubleTapped event.

            <MenuFlyout x:Name="MenuList">
               <MenuFlyoutItem x:Name="CS" Text="C #" Click="MenuFlyoutItem_Click_CS" DoubleTapped="MenuFlyoutItem_Click_DoubleTapped" IsDoubleTapEnabled="True"/>
                <MenuFlyoutItem x:Name="CPP" Text="C ++" Click="MenuFlyoutItem_Click_CPP" DoubleTapped="MenuFlyoutItem_Click_DoubleTapped" IsDoubleTapEnabled="True"/>
                <MenuFlyoutItem x:Name="C" Text="C" Click="MenuFlyoutItem_Click_C" DoubleTapped="MenuFlyoutItem_Click_DoubleTapped" IsDoubleTapEnabled="True"/>
                <MenuFlyoutItem x:Name="Java" Text="Java" Click="MenuFlyoutItem_Click_Java" DoubleTapped="MenuFlyoutItem_Click_DoubleTapped" IsDoubleTapEnabled="True"/>
            </MenuFlyout>

Is this a bug on MenuFlyoutItem? Or is there a recommended pattern for handling this situation? Our workaround thus far has been to set flags in our code when the Click event comes through and then have the code processing the second click (on the underlying control) check if the flag has been set. This is terrible programming practice but the best we've managed so far.

Answer 1

Hello,

Welcome to Microsoft Q&A!

Is this a bug on MenuFlyoutItem?

This is not a bug. I could reproduce this behavior on myside. When you double click on the MenuFlyoutItem quickly, the Item click event will be triggered and MenuFlyout will be closed first. Then the second click is actually handled by the host control. That's the reason for this behavior.

A simple way to handle this hehavior is to disable the tap feature of the host control for a short time. When the Menulist is opened, you could set the IsTapEnabled property of the host control to false. After the Menulist is closed for 2s, make the host control tap enabled again. You could decide the delay time depends on your real scenario.

Here is the code I used. The host control is a RectAngle.

private void MenuList_Opened(object sender, object e)
        {
            Debug.WriteLine("MenuList_Opened");
            MyRect.IsTapEnabled = false;
        }

        private async void MenuList_Closed(object sender, object e)
        {
            Debug.WriteLine("MenuList_Closed");
            await Task.Delay(2000);
            MyRect.IsTapEnabled = true;
        }

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.