Windows Dev Center

PopupMenu.ShowForSelectionAsync(Rect) | showForSelectionAsync(Rect) method

Shows the context menu above the specified selection.

Syntax


popupMenu.showForSelectionAsync(selection).done( /* Your success and error handlers */ );

Parameters

selection

Type: Rect

The coordinates (in DIPs) of the selected rectangle, relative to the window. The context menu is placed directly above and centered on this rectangle such that selection is not covered.

Note  For VB, C#, and C++, this window is the CoreWindow associated with the thread that is calling the context menu.

Return value

Type: IAsyncOperation<IUICommand>

A IUICommand object that represents the context menu command invoked by the user, after the ShowForSelectionAsync call completes.

If no command is invoked, ShowForSelectionAsync returns null.

Remarks

You can see complete code examples that demonstrate how to create and customize context menus in the Context menu sample on the Windows Store app sample home page.

Examples

Before you can show a context menu, you must add an event listener for the oncontextmenu event. For example, the Context menu sample listens for the event on specific HTML elements, and then calls the scenario1AttachmentHandler function.


document.getElementById("attachment").addEventListener("contextmenu", attachmentHandler, false);


The following example from the Context menu sample shows a context menu that has commands with ids.


// We don't want to obscure content, so pass in the position representing the selection area.
menu.showForSelectionAsync(clientToWinRTRect(document.selection.createRange().getBoundingClientRect())).then(function (invokedCommand) {
    if (invokedCommand !== null) {
        switch (invokedCommand.id) {
            case 1: // Copy
                var selectedText = window.getSelection();
                copyTextToClipboard(selectedText);
                var message = "'Copy' button clicked and '" + /*@static_cast(String)*/selectedText + "' copied to clipboard";
                WinJS.log && WinJS.log(message, "sample", "status");
                break;
            case 2: // Highlight
                // Add command handler code here.
                WinJS.log && WinJS.log("'Highlight' button clicked", "sample", "status");
                break;
            case 3: // Look up
                // Add command handler code here.
                WinJS.log && WinJS.log("'Look up' button clicked", "sample", "status");
                break;
            default:
                break;
        }
    } else {
        // The command is null if no command was invoked.
        WinJS.log && WinJS.log("Context menu dismissed", "sample", "status");
    }
});


In the example, the Context menu sample determines which command is invoked by performing lightweight comparisons using the UICommand.Id property.

Additionally, the Context menu sample uses two helper functions (getSelectionRect and getclientCoordinates) to set the coordinates for the selection rectangle.


// Converts from client to WinRT coordinates, which take scale factor into consideration.
function clientToWinRTRect(rect) {
    var zoomFactor = document.documentElement.msContentZoomFactor;
    return {
        x: (rect.left + document.documentElement.scrollLeft - window.pageXOffset) * zoomFactor,
        y: (rect.top + document.documentElement.scrollTop - window.pageYOffset) * zoomFactor,
        width: rect.width * zoomFactor,
        height: rect.height * zoomFactor
    };
}


Before you set the coordinates of the selection Rect, you must adjust the CSS coordinates that you retrieved from the document relative to the dpi of the user's screen. In the example, getclientCoordinates uses a simple formula to correct the coordinates, and those coordinates are used as the selectionRect.

Requirements (Windows 10 device family)

Device family

Universal

API contract

Windows.Foundation.UniversalApiContract, introduced version 1.0

Namespace

Windows.UI.Popups
Windows::UI::Popups [C++]

Metadata

Windows.Foundation.UniversalApiContract.winmd

Requirements (Windows 8.x and Windows Phone 8.x)

Minimum supported client

Windows 8

Minimum supported server

Windows Server 2012

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]

Namespace

Windows.UI.Popups
Windows::UI::Popups [C++]

Metadata

Windows.winmd

See also

Adding context menus
Context menu sample
Guidelines and checklist for context menus
Reference
IUICommand
oncontextmenu
PopupMenu
Rect
ShowForSelectionAsync(Rect, Placement)
UICommand

 

 

Show:
© 2015 Microsoft