#

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="&#xE1A5;" Style="{StaticResource MenuFlyoutItemIconTemplate}"  />

            <MenuFlyoutItem Text="Print" Tag="&#xE2F6;" Style="{StaticResource MenuFlyoutItemIconTemplate}"  />

            <MenuFlyoutItem Text="Delete" Tag="&#xE10A;" 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

 

Mobile

.

yesmovies