feat(Menu): add toggle for enabling popup scrolling in menu showcase

controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Localization/en_US.cs

@@ -70,6 +70,7 @@ internal partial class en_US
     public const string P2HeaderDisabled = "Disabled";
     public const string P2HeaderMenu = "_Menu";
     public const string P2HeaderMenuItem = "Menu Item";
+    public const string P2TextEnablePopupScroll = "Enable popup scrolling";
     public const string P2TextRightClickToShowContextMenu = "Right Click to show Context Menu";
     public const string P2TitleNormal = "Normal";
     public const string P2TextRightClickToShowContextFlyout = "Right Click to show Context Flyout";

controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Localization/zh_CN.cs

@@ -70,6 +70,7 @@ internal partial class zh_CN
     public const string P2HeaderDisabled = "禁用";
     public const string P2HeaderMenu = "_菜单";
     public const string P2HeaderMenuItem = "菜单项";
+    public const string P2TextEnablePopupScroll = "开启弹层滚动";
     public const string P2TextRightClickToShowContextMenu = "右键显示上下文菜单";
     public const string P2TitleNormal = "普通";
     public const string P2TextRightClickToShowContextFlyout = "右键显示上下文浮出层";

controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Localization/zh_TW.cs

@@ -70,6 +70,7 @@ internal partial class zh_TW
     public const string P2HeaderDisabled = "禁用";
     public const string P2HeaderMenu = "_菜單";
     public const string P2HeaderMenuItem = "菜單項";
+    public const string P2TextEnablePopupScroll = "開啟彈層滾動";
     public const string P2TextRightClickToShowContextMenu = "右鍵顯示上下文菜單";
     public const string P2TitleNormal = "普通";
     public const string P2TextRightClickToShowContextFlyout = "右鍵顯示上下文浮出層";

controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/ViewModels/MenuViewModel.cs

@@ -53,6 +53,14 @@ public class MenuViewModel : ReactiveObject, IRoutableViewModel, IActivatableVie
         set => this.RaiseAndSetIfChanged(ref _isDark, value);
     }
 
+    private bool _isPopupScrollEnabled = true;
+
+    public bool IsPopupScrollEnabled
+    {
+        get => _isPopupScrollEnabled;
+        set => this.RaiseAndSetIfChanged(ref _isPopupScrollEnabled, value);
+    }
+
     private NavMenuMode _mode = NavMenuMode.Inline;
 
     public NavMenuMode Mode

controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Views/MenuShowCase.axaml

@@ -119,46 +119,29 @@
         IsDeferredContentEnabled="True">
         <gallery:ShowCaseItem.DeferredContentTemplate>
             <DataTemplate x:DataType="viewModels:MenuViewModel">
-        <atom:Menu>
-            <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenu}">
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
-            </atom:MenuItem>
-        </atom:Menu>
+        <StackPanel Spacing="12">
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <atom:ToggleSwitch IsChecked="{Binding IsPopupScrollEnabled}" />
+                <atom:TextBlock VerticalAlignment="Center"
+                                Text="{gallery:MenuShowCaseLangResource P2TextEnablePopupScroll}" />
+            </StackPanel>
+            <atom:Menu IsScrollEnabled="{Binding IsPopupScrollEnabled}">
+                <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenu}">
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                    <atom:MenuItem Header="{gallery:MenuShowCaseLangResource P2HeaderMenuItem}" />
+                </atom:MenuItem>
+            </atom:Menu>
+        </StackPanel>
             </DataTemplate>
         </gallery:ShowCaseItem.DeferredContentTemplate>
     </gallery:ShowCaseItem>

tests/AtomUIGallery.Tests/ShowCases/MenuShowCaseExamples.snapshot

@@ -1,2 +1,2 @@
 count: 16
-sha256: a173e1bc38a221b03d379f69d49b35174135a72dc9272ea5b1b926c7f3b0d719
+sha256: dcb660af0fb4c2075469b494a7cf8f6131c081bf6520be9870d19720a4107f8d

tests/AtomUIGallery.Tests/ShowCases/MenuShowCasePageTests.cs

@@ -121,6 +121,32 @@ public class MenuShowCasePageTests
         viewModel.LastCommandKey.ShouldBe("customer-overview");
     }
 
+    [Fact]
+    public void Menu_ShowCase_Scrollable_Menu_Can_Toggle_Popup_Scrolling()
+    {
+        var pageSource      = ReadRepoFile("controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Views/MenuShowCase.axaml");
+        var viewModelSource = ReadRepoFile("controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/ViewModels/MenuViewModel.cs");
+        var zhCN            = ReadRepoFile("controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Localization/zh_CN.cs");
+        var zhTW            = ReadRepoFile("controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Localization/zh_TW.cs");
+        var enUS            = ReadRepoFile("controlgallery/AtomUIGallery/ShowCases/Navigation/Menu/Localization/en_US.cs");
+        var scrollableShowCaseSource = ExtractShowCaseItem(pageSource, "ScrollableTitle");
+
+        scrollableShowCaseSource.ShouldContain("MenuShowCaseLangResource ScrollableTitle");
+        scrollableShowCaseSource.ShouldContain("MenuShowCaseLangResource P2TextEnablePopupScroll");
+        scrollableShowCaseSource.ShouldContain("IsChecked=\"{Binding IsPopupScrollEnabled}\"");
+        scrollableShowCaseSource.ShouldContain("IsScrollEnabled=\"{Binding IsPopupScrollEnabled}\"");
+        scrollableShowCaseSource.ShouldNotContain("IsCheckedChanged=\"");
+        CountOccurrences(scrollableShowCaseSource, "Header=\"{gallery:MenuShowCaseLangResource P2HeaderMenuItem}\"")
+            .ShouldBe(12);
+
+        viewModelSource.ShouldContain("private bool _isPopupScrollEnabled = true;");
+        viewModelSource.ShouldContain("public bool IsPopupScrollEnabled");
+
+        zhCN.ShouldContain("public const string P2TextEnablePopupScroll = \"开启弹层滚动\";");
+        zhTW.ShouldContain("public const string P2TextEnablePopupScroll = \"開啟彈層滾動\";");
+        enUS.ShouldContain("public const string P2TextEnablePopupScroll = \"Enable popup scrolling\";");
+    }
+
     [Fact]
     public void Menu_ShowCase_Examples_Match_Approved_Control_Demo_Content()
     {
@@ -161,10 +187,15 @@ public class MenuShowCasePageTests
     }
 
     private static string ExtractNavMenuNodeCommandShowCaseItem(string source)
+    {
+        return ExtractShowCaseItem(source, "NavMenuNodeCommandTitle");
+    }
+
+    private static string ExtractShowCaseItem(string source, string titleResourceName)
     {
         var match = Regex.Match(
             source,
-            @"<gallery:ShowCaseItem\s+Title=""\{gallery:MenuShowCaseLangResource NavMenuNodeCommandTitle\}"".*?</gallery:ShowCaseItem>",
+            $@"<gallery:ShowCaseItem\s+Title=""\{{gallery:MenuShowCaseLangResource {titleResourceName}\}}"".*?</gallery:ShowCaseItem>",
             RegexOptions.CultureInvariant | RegexOptions.Singleline);
 
         match.Success.ShouldBeTrue();