UWP Sample:
XAML ContextMenu
In dem XAML Contextmenu Beispiel unter Universal Windows
Platform Samples wird ein Contextmenü gezeigt,
welches als XAML in den Page.Resources definiert wird.
Dabei wird ein Flyout komplett im Kopfbereich der Seite
gespeichert und zur Laufzeit mit Flyout.ShowAt(..) an gezeigt
Das UWP Sample..
This scenario shows how to hook up a context menu for mouse,
keyboard, and touch.
For keyboard users, Shift+F10 or the 'application' key
invokes the context menu.
For touch, press and hold to invoke the menu. For mouse, right click to invoke the menu.
When running on a desktop, MenuFlyout.ShowAt allows context
menus to show outside the application window, such as when right clicking near
the edges of your applicaiton.
Ablauf / Aufbau:
ContextMenü anzeigen
In der Methode ShowContextMenu wird aus den Resoucen das
MenuFlyout geholt
|
private void ShowContextMenu(SampleDataModel data, UIElement target, Point offset)
{
var MyFlyout = this.Resources["SampleContextMenu"] as MenuFlyout;
MyFlyout.ShowAt(target, offset);
}
|
Das Flyout Contextmenu ist in der Page zu Beginn in XAML
gelistet
Das Flyout Context-Menü In XAML ist als Page.Resource
eingebaut.
|
<Page.Resources>
..
<MenuFlyout x:Key="SampleContextMenu">
<MenuFlyoutItem Text="Open" Tag="" Style="{StaticResource MenuFlyoutItemIconTemplate}" />
<MenuFlyoutItem Text="Print" Tag="" Style="{StaticResource MenuFlyoutItemIconTemplate}" />
<MenuFlyoutItem Text="Delete" Tag="" Style="{StaticResource MenuFlyoutItemIconTemplate}" />
<MenuFlyoutSubItem Text="Other">
<MenuFlyoutItem Text="Sort by" />
<MenuFlyoutItem Text="Name" />
<MenuFlyoutItem Text="Date" />
<MenuFlyoutItem Text="Size" />
</MenuFlyoutSubItem>
</MenuFlyout>
..
|
Events
abfangen, Maus, Keyboard, Touch
Keyboard-Event
Im C# Code wird auf den OnKeyDown Event der Seite reagiert
und der event dann nach Shift und F10 abgefragt
|
protected override void OnKeyDown(KeyRoutedEventArgs e)
{
// Handle Shift+F10
// Handle MenuKey
if (e.Key == Windows.System.VirtualKey.Shift)
{
_IsShiftPressed = true;
}
// Shift+F10
else if (_IsShiftPressed
&& e.Key == Windows.System.VirtualKey.F10)
{
var FocusedElement = FocusManager.GetFocusedElement() as UIElement;
SampleDataModel MyObject = null;
if (FocusedElement is ContentControl)
{
MyObject = ((ContentControl)FocusedElement).Content as SampleDataModel;
}
ShowContextMenu(MyObject, FocusedElement, new Point(0, 0));
e.Handled = true;
}
|
Touch,
Finger-Eingabe:
Auf die Fingereingabe wird mit dem Event OnHolding reagiert
|
protected override void OnHolding(HoldingRoutedEventArgs e)
{
// Responding to
HoldingState.Started will show a context menu while your finger is still
down, while
//
HoldingState.Completed will wait until the user has removed their finger.
if (e.HoldingState ==
Windows.UI.Input.HoldingState.Completed)
{
var PointerPosition =
e.GetPosition(null);
var MyObject =
(e.OriginalSource as FrameworkElement).DataContext as SampleDataModel;
ShowContextMenu(MyObject, null, PointerPosition);
|
Maus-Event:
Und auf die rechte Maustaste wird mit OnRigthTapped reagiert
|
protected override void OnRightTapped(RightTappedRoutedEventArgs e)
{
if (_IsPointerPressed)
{
var MyObject =
(e.OriginalSource as FrameworkElement).DataContext as SampleDataModel;
ShowContextMenu(MyObject, null, e.GetPosition(null));
|
Für das Beispiel wird erst mal einen kleine SampleDate
Klasse erstellt, welche die Beispieldaten enthält
Im C# Code der Datei SampleData.cs
|
public class SampleDataModel
{
public string Title { get; private set; }
public string ImagePath { get; private set; }
public bool IsNew { get; private set; }
public bool IsFlagged { get; private set; }
public SampleDataModel(string title, string imagePath, bool isNew = false, bool isFlagged = false)
{
this.Title = title;
this.ImagePath = imagePath;
this.IsNew = isNew;
this.IsFlagged = isFlagged;
}
public override string ToString()
{
return this.Title;
}
static public ObservableCollection<SampleDataModel> GetSampleData()
{
var MyCollection = new ObservableCollection<SampleDataModel>();
MyCollection.Add(new SampleDataModel("Cliff", "Assets/cliff.jpg"));
MyCollection.Add(new SampleDataModel("Grapes", "ms-appx:///Assets/grapes.jpg"));
MyCollection.Add(new SampleDataModel("Rainier", "ms-appx:///Assets/Rainier.jpg", true));
MyCollection.Add(new SampleDataModel("Sunset", "ms-appx:///Assets/Sunset.jpg", true, true));
MyCollection.Add(new SampleDataModel("Treetops", "ms-appx:///Assets/Treetops.jpg", true));
MyCollection.Add(new SampleDataModel("Valley", "ms-appx:///Assets/Valley.jpg", false, true));
return MyCollection;
}
}
|
Referenz:
Man findet das Sample unter
https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlContextMenu
das Sample zeigt:
Specifically, this sample shows how to:
- Create desktop-style context menus: using
our new APIs, it is possible to control the placement as well as allow
menus to draw outside your application's window
- Nested/cascading menus: organize
your commands with nested menus
- Support for desktop and mobile: with
best practices for keyboard, mouse, and touch
- Icons: learn how to add support for icons