UWP Sample: Context-Menu
Ein Contextmenü ist ein kleines PopupMenu, welches erscheint
wenn man mit der rechten Maustaste auf einen Inhalt klickt um mehr zu erfahren.
Unter Universal Windows Platform wird das Kontextmenü mit
PopupMenu() zur Laufzeit erstellt und kann dann angepasst werden.
|
var menu = new PopupMenu();
menu.Commands.Add(new UICommand("Open with", (command) =>
{..}
|
Die Command-Einträge werden direkt nach dem ertellen des
ContextMenu/PopupMenu programmiert, indem mit await auf die popupMenu.ShowForSelectionAsync(..) auswahl gewartet wird.
|
var chosenCommand = await menu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
|
1.Beispiel:
Hier das erste Beispiel das unter github UWP zu finden ist.
Es zeigt ein Contextmenu, das den Dialog Open with oder Save
Attachement anzeigt wenn man per rechter Maustaste auf des File-Datei-Symbol klickt.
Right-click or press-and-hold on the image to show a simple
context menu.
|
// Create a menu and add
commands specifying a callback delegate for each.
// Since command delegates
are unique, no need to specify command Ids.
var menu = new PopupMenu();
menu.Commands.Add(new UICommand("Open with", (command) =>
{
OutputTextBlock.Text = "'" + command.Label + "' selected";
}));
menu.Commands.Add(new UICommand("Save attachment", (command) =>
{
OutputTextBlock.Text = "'" + command.Label + "' selected";
}));
// We don't want
to obscure content, so pass in a rectangle representing the sender of the
context menu event.
// We registered command
callbacks; no need to handle the menu completion event
OutputTextBlock.Text = "Context menu shown";
var chosenCommand = await
menu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
if (chosenCommand == null) // The command is null if no command was invoked.
{
OutputTextBlock.Text = "Context menu dismissed";
}
|
2.Beispiel:
Das zweite Contextmenü Beispiel zeigt, wie man einen Text
selektieren kann und anschliessend copy, highlight oder lookup auswählen kann.
Select and right-click or tap on the selection in the below
text box to show a custom context menu for text.
Ablauf:
Dabei wird im ersten Schritt erst der Text markiert und als
Rechteck erfasst, indem per Rect=Textbox.GetRectFromCharacterIndex(..) die
markierten Textpositionen ermittelt werden.
|
// returns a rect for selected text
// if no text is selected,
returns caret location
// textbox should not be
empty
private Rect GetTextboxSelectionRect(TextBox textbox)
{
Rect rectFirst, rectLast;
if (textbox.SelectionStart ==
textbox.Text.Length)
{
rectFirst = textbox.GetRectFromCharacterIndex(textbox.SelectionStart -
1, true);
}
else
{
rectFirst = textbox.GetRectFromCharacterIndex(textbox.SelectionStart, false);
}
int lastIndex =
textbox.SelectionStart + textbox.SelectionLength;
if (lastIndex ==
textbox.Text.Length)
{
rectLast = textbox.GetRectFromCharacterIndex(lastIndex - 1, true);
}
else
{
rectLast =
textbox.GetRectFromCharacterIndex(lastIndex, false);
}
GeneralTransform buttonTransform =
textbox.TransformToVisual(null);
Point point =
buttonTransform.TransformPoint(new Point());
// Make sure that we return
a valid rect if selection is on multiple lines
// and end of the selection
is to the left of the start of the selection.
double x, y, dx, dy;
y = point.Y + rectFirst.Top;
dy = rectLast.Bottom - rectFirst.Top;
if (rectLast.Right >
rectFirst.Left)
{
x = point.X + rectFirst.Left;
dx = rectLast.Right - rectFirst.Left;
}
else
{
x = point.X + rectLast.Right;
dx = rectFirst.Left - rectLast.Right;
}
return new Rect(x, dx, y, dy);
}
|
Dann wird das PopupMenu aufgebaut
|
// Create a menu and add commands specifying an id
value for each instead of a delegate.
var menu = new PopupMenu();
menu.Commands.Add(new UICommand("Copy", null, 1));
menu.Commands.Add(new UICommandSeparator());
menu.Commands.Add(new UICommand("Highlight", null, 2));
menu.Commands.Add(new UICommand("Look up", null, 3));
// We don't want to obscure content, so pass in a
rectangle representing the selection area.
// NOTE: this code only handles textboxes with a
single line. If a textbox has multiple lines,
//
then the context menu should be placed at cursor/pointer location by
convention.
OutputTextBlock.Text = "Context menu shown";
Rect rect = GetTextboxSelectionRect(textbox);
var chosenCommand = await
menu.ShowForSelectionAsync(rect);
|
Referenz: man findet das Example unter
https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/ContextMenu
The sample demonstrates these two tasks:
Creating a context menu to show
for a file
Replacing the default commands
in the context menu that is shown for text
To learn about choosing commands and designing a context
menu, see Guidelines and checklist for context menus.
Additional APIs for this sample include:
UICommand class
UICommandSeparator class