Update Sample to include MenuFlyout Invocation at Cursor Position (#6835

) * update test page with cursor positioned menu flyout * changes from comments
microsoft · Apr 8, 2022 · 84e30d9 · 84e30d9
1 parent 86bd437
commit 84e30d9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/dev/CommonStyles/TestUI/MenuFlyoutPage.xaml b/dev/CommonStyles/TestUI/MenuFlyoutPage.xaml
@@ -9,7 +9,25 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid Margin="12">
+    <local:TestPage.Resources>
+        <MenuFlyout x:Key="SampleContextMenu">
+            <MenuFlyoutItem Text="MenuFlyoutItem"/>
+            <MenuFlyoutSubItem Text="MenuFlyoutSubItem">
+                <MenuFlyoutItem Text="MenuFlyoutItem" />
+                <ToggleMenuFlyoutItem Text="ToggleMenuFlyoutItem" />
+                <MenuFlyoutSubItem Text="MenuFlyoutSubItem">
+                    <MenuFlyoutItem Text="MenuFlyoutItem" />
+                    <MenuFlyoutSeparator/>
+                    <MenuFlyoutItem Text="MenuFlyoutItem" />
+                </MenuFlyoutSubItem>
+            </MenuFlyoutSubItem>
+            <MenuFlyoutSeparator/>
+            <MenuFlyoutItem Text="MenuFlyoutItem"/>
+        </MenuFlyout>
+    </local:TestPage.Resources>
+
+    <Grid Margin="12" ContextRequested="Grid_ContextRequested">
+
         <Grid.Background>
             <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                 <GradientStop Color="Red" Offset="0.000" />
@@ -35,6 +53,8 @@
         </Grid.RowDefinitions>
 
         <StackPanel Grid.RowSpan="2">
+            <TextBlock Text="Right-click grid to invoke MenuFlyout from cursor position" Margin="0,0,0,12"/>
+
             <Button Content="Short Text MenuFlyout" x:Name="TestMenuFlyoutButton" AutomationProperties.Name="TestMenuFlyoutButton" Margin="0,0,0,12">
                 <Button.Flyout>
                     <MenuFlyout>

diff --git a/dev/CommonStyles/TestUI/MenuFlyoutPage.xaml.cs b/dev/CommonStyles/TestUI/MenuFlyoutPage.xaml.cs
@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License. See LICENSE in the project root for license information.
 
+using Windows.Foundation;
 using Windows.Foundation.Metadata;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
@@ -12,15 +13,32 @@ namespace MUXControlsTestApp
     [TopLevelTestPage(Name = "MenuFlyout", Icon = "MenuFlyout.png")]
     public sealed partial class MenuFlyoutPage : TestPage
     {
+        private MenuFlyout sharedFlyout;
         public MenuFlyoutPage()
         {
             this.InitializeComponent();
+
+            sharedFlyout = (MenuFlyout)Resources["SampleContextMenu"];
         }
 
         private void TestMenuFlyoutItemClick(object sender, object e)
         {
             TestMenuFlyoutItemHeightTextBlock.Text = $"{TestMenuFlyoutItem.ActualHeight}";
             TestMenuFlyoutItemWidthTextBlock.Text = $"{TestMenuFlyoutItem.ActualWidth}";
         }
+
+        private void Grid_ContextRequested(UIElement sender, ContextRequestedEventArgs args)
+        {
+            var requestedElement = sender as FrameworkElement;
+
+            if (args.TryGetPosition(requestedElement, out Point point))
+            {
+                sharedFlyout.ShowAt(requestedElement, point);
+            }
+            else
+            {
+                sharedFlyout.ShowAt(requestedElement);
+            }
+        }
     }
 }