NavigationView: Fix content clipping regression

dev/NavigationView/NavigationView_InteractionTests/CommonTests.cs

@@ -249,7 +249,7 @@ public void AddRemoveOriginalItemTest()
                     Log.Comment("Verify that original menu items can be removed");
                     removeButton.Invoke();
                     Wait.ForIdle();
-                    VerifyElement.NotFound("Integer", FindBy.Name);
+                    VerifyElement.NotFound("HasChildItem", FindBy.Name);
 
                     Log.Comment("Verify that menu items can be added after removing");
                     addButton.Invoke();
@@ -740,38 +740,36 @@ public void LeftNavigationWithAccessKeysTest()
         [TestMethod]
         public void MenuItemKeyboardInvokeTest()
         {
-            var testScenarios = RegressionTestScenario.BuildLeftNavRegressionTestScenarios();
-            foreach (var testScenario in testScenarios)
+            // On RS2 scrollviewer handles arrow keys and this causes an issue with the current setup of the "NavigationView Test" test page
+            // used for the left NavigationView test. So instead we now execute this test on the "NavigationView Regression Test" test page for
+            // left navigation.
+            using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", "NavigationView Regression Test" }))
             {
-                using (IDisposable page1 = new TestSetupHelper("NavigationView Tests"),
-                 page2 = new TestSetupHelper(testScenario.TestPageName))
-                {
-                    Log.Comment("Verify the first menu item has focus and is selected");
-                    UIObject firstItem = FindElement.ByName("Home");
-                    firstItem.SetFocus();
-                    Verify.IsTrue(firstItem.HasKeyboardFocus);
-                    Verify.IsTrue(Convert.ToBoolean(firstItem.GetProperty(UIProperty.Get("SelectionItem.IsSelected"))));
-
-                    Log.Comment("Move focus to the second menu item by pressing down arrow");
-                    KeyboardHelper.PressKey(Key.Down);
-                    Wait.ForIdle();
+                Log.Comment("Verify the first menu item has focus and is selected");
+                UIObject firstItem = FindElement.ByName("Home");
+                firstItem.SetFocus();
+                Verify.IsTrue(firstItem.HasKeyboardFocus);
+                Verify.IsTrue(Convert.ToBoolean(firstItem.GetProperty(UIProperty.Get("SelectionItem.IsSelected"))));
+
+                Log.Comment("Move focus to the second menu item by pressing down arrow");
+                KeyboardHelper.PressKey(Key.Down);
+                Wait.ForIdle();
 
-                    Log.Comment("Verify second menu item has focus but is not selected");
-                    UIObject secondItem = FindElement.ByName("Apps");
-                    Verify.IsTrue(secondItem.HasKeyboardFocus);
-                    Verify.IsFalse(Convert.ToBoolean(secondItem.GetProperty(UIProperty.Get("SelectionItem.IsSelected"))));
+                Log.Comment("Verify second menu item has focus but is not selected");
+                UIObject secondItem = FindElement.ByName("Apps");
+                Verify.IsTrue(secondItem.HasKeyboardFocus);
+                Verify.IsFalse(Convert.ToBoolean(secondItem.GetProperty(UIProperty.Get("SelectionItem.IsSelected"))));
 
-                    if (PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone4))
-                    {
-                        Log.Comment("Select the second item by pressing enter");
-                        KeyboardHelper.PressKey(Key.Enter);
-                        Wait.ForIdle();
-                        Verify.IsTrue(Convert.ToBoolean(secondItem.GetProperty(UIProperty.Get("SelectionItem.IsSelected"))));
-                    }
-                    else
-                    {
-                        Log.Warning("Full test is not executing due to lack of selection on keyboard selection behaviour in older versions of ListView");
-                    }
+                if (PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone4))
+                {
+                    Log.Comment("Select the second item by pressing enter");
+                    KeyboardHelper.PressKey(Key.Enter);
+                    Wait.ForIdle();
+                    Verify.IsTrue(Convert.ToBoolean(secondItem.GetProperty(UIProperty.Get("SelectionItem.IsSelected"))));
+                }
+                else
+                {
+                    Log.Warning("Full test is not executing due to lack of selection on keyboard selection behaviour in older versions of ListView");
                 }
             }
         }
@@ -1696,5 +1694,43 @@ public void VerifyNoCrashWhenNavViewInContentDialog()
                 Wait.ForIdle();
             }
         }
+
+        [TestMethod]
+        public void VerifyNavigationViewItemContentPresenterMargin()
+        {
+            using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", "NavigationView Test" }))
+            {
+                var getTopLevelContentPresenterMarginButton = FindElement.ById<Button>("GetTopLevelNavViewItemContentPresenterMarginButton");
+                var getChildContentPresenterMarginButton = FindElement.ById<Button>("GetChildNavViewItemContentPresenterMarginButton");
+                var contentPresenterMarginTextBlock = new TextBlock(FindElement.ByName("NavViewItemContentPresenterMarginTextBlock"));
+
+                // Switch the NavigationView to closed compact mode
+                Log.Comment("Switch NavigationView to closed compact mode");
+                SetNavViewWidth(ControlWidth.Medium);
+                Wait.ForIdle();
+
+                // Verify that top-level items use the correct content margin
+                getTopLevelContentPresenterMarginButton.InvokeAndWait();
+                Verify.AreEqual("0,0,0,0", contentPresenterMarginTextBlock.DocumentText);
+
+                // Child items in closed compact mode are shown in a flyout. Verify that they are using the correct margin 
+                Log.Comment("Expand item with children");
+                UIObject hasChildItem = FindElement.ByName("HasChildItem");
+                InputHelper.LeftClick(hasChildItem);
+                Wait.ForIdle();
+
+                getChildContentPresenterMarginButton.InvokeAndWait();
+                Verify.AreEqual("0,0,20,0", contentPresenterMarginTextBlock.DocumentText);
+
+                // Switch the NavigationView to expanded mode
+                Log.Comment("Switch NavigationView to expanded mode");
+                SetNavViewWidth(ControlWidth.Wide);
+                Wait.ForIdle();
+
+                // Verify that top-level items use the correct content margin
+                getTopLevelContentPresenterMarginButton.InvokeAndWait();
+                Verify.AreEqual("0,0,20,0", contentPresenterMarginTextBlock.DocumentText);
+            }
+        }
     }
 }

dev/NavigationView/NavigationView_InteractionTests/EventTests.cs

@@ -282,6 +282,13 @@ public void MenuItemInvokedTest()
                     header = new TextBlock(FindElement.ByName("Music as header"));
                     Verify.AreEqual("Music as header", header.DocumentText);
 
+                    if (testScenario.IsLeftNavTest)
+                    {
+                        Log.Comment("Bring Settings into view.");
+                        FindElement.ByName<Button>("BringSettingsIntoViewButton").Invoke();
+                        Wait.ForIdle();
+                    }
+
                     Log.Comment("Click settings item");
                     menuItem = FindElement.ByName("Settings");
                     InputHelper.LeftClick(menuItem);
@@ -304,6 +311,13 @@ public void SettingsItemClickTest()
             {
                 using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", testScenario.TestPageName }))
                 {
+                    if (testScenario.IsLeftNavTest)
+                    {
+                        Log.Comment("Bring Settings into view.");
+                        FindElement.ByName<Button>("BringSettingsIntoViewButton").Invoke();
+                        Wait.ForIdle();
+                    }
+
                     UIObject settingsItem = FindElement.ByName("Settings");
 
                     settingsItem.SetFocus();

dev/NavigationView/NavigationView_InteractionTests/FocusBehaviorTests.cs

@@ -46,6 +46,10 @@ public void EnsureTopSettingsRetainsFocusAfterOrientationChanges()
                 var readSettingsSelectedButton = new Button(FindElement.ByName("ReadSettingsSelected"));
                 var SettingsSelectionStateTextBlock = new TextBlock(FindElement.ByName("SettingsSelectedState"));
 
+                Log.Comment("Bring Settings into view.");
+                FindElement.ByName<Button>("BringSettingsIntoViewButton").Invoke();
+                Wait.ForIdle();
+
                 var leftSettingsItem = new Button(FindElement.ByName("Settings"));
                 leftSettingsItem.Click();
 
@@ -156,7 +160,7 @@ public void HomeEndNavigationTest()
 
                     UIObject firstItem = FindElement.ByName("Home");
                     UIObject appsItem = FindElement.ByName("Apps");
-                    UIObject lastItem = FindElement.ByName("Integer");
+                    UIObject lastItem = FindElement.ByName("HasChildItem");
 
                     Log.Comment("Make sure something inside the ListView other than the first item has input focus");
                     appsItem.SetFocus();

dev/NavigationView/NavigationView_InteractionTests/PaneBehaviorTests.cs

@@ -821,6 +821,10 @@ public void VerifySettingsWidthOnLeftNavMediumMode()
                 SetNavViewWidth(ControlWidth.Wide);
                 Wait.ForIdle();
 
+                Log.Comment("Bring Settings into view.");
+                FindElement.ByName<Button>("BringSettingsIntoViewButton").Invoke();
+                Wait.ForIdle();
+
                 Button navButton = new Button(FindElement.ById("SettingsItem"));
                 Log.Comment("Verify that the SettingsItem size in Expanded mode and actual width is " + navButton.BoundingRectangle.Width);
 

dev/NavigationView/NavigationView_InteractionTests/SelectionTests.cs

@@ -102,9 +102,9 @@ public void SuppressSelectionItemInvokeTest()
         [TestMethod]
         public void SelectionFollowFocusTest()
         {
-            if (!PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone2))
+            if (!PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone3))
             {
-                Log.Warning("Test is disabled on RS1 and earlier because SingleSelectionFollowFocus on RS2.");
+                Log.Warning("Test is disabled on RS2 and earlier because SingleSelectionFollowFocus isn't on RS1 and scrollviewer handles arrow keys on RS2.");
                 return;
             }
             var testScenarios = RegressionTestScenario.BuildTopNavRegressionTestScenarios();
@@ -152,10 +152,15 @@ public void SelectionFollowFocusTest()
         [TestMethod]
         public void MenuItemAutomationSelectionTest()
         {
-            var testScenarios = RegressionTestScenario.BuildAllRegressionTestScenarios();
+            // On RS2 scrollviewer handles arrow keys and this causes an issue with the current setup of the "NavigationView Test" test page
+            // used for the left NavigationView test. So instead we now execute this test on the "NavigationView Regression Test" test page for
+            // left navigation.
+            (string testPageName, bool isLeftNavTest)[] testScenarios = new (string, bool)[] 
+                { ("NavigationView Regression Test", true), ("NavigationView TopNav Test", false) };
+
             foreach (var testScenario in testScenarios)
             {
-                using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", testScenario.TestPageName }))
+                using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", testScenario.testPageName }))
                 {
                     UIObject firstItem = FindElement.ByName("Home");
                     UIObject secondItem = FindElement.ByName("Apps");
@@ -170,7 +175,7 @@ public void MenuItemAutomationSelectionTest()
 
                     Log.Comment("Move focus to the second item by pressing down(left nav)/right(right nav) arrow once");
                     var key = Key.Right;
-                    if (testScenario.IsLeftNavTest)
+                    if (testScenario.isLeftNavTest)
                     {
                         key = Key.Down;
                     }
@@ -212,6 +217,10 @@ public void SettingsCanBeUnselected()
                 var readSettingsSelectedButton = new Button(FindElement.ByName("ReadSettingsSelected"));
                 var SettingsSelectionStateTextBlock = new TextBlock(FindElement.ByName("SettingsSelectedState"));
 
+                Log.Comment("Bring Settings into view.");
+                FindElement.ByName<Button>("BringSettingsIntoViewButton").Invoke();
+                Wait.ForIdle();
+
                 var settings = new Button(FindElement.ByName("Settings"));
                 settings.Click();
                 Wait.ForIdle();

dev/NavigationView/NavigationView_rs1_themeresources.xaml

@@ -256,7 +256,7 @@
     <Thickness x:Key="TopNavigationViewItemSeparatorMargin">10,0</Thickness>
     <Thickness x:Key="TopNavigationViewOverflowButtonMargin">0</Thickness>
     <Thickness x:Key="NavigationViewItemContentPresenterMargin">0,0,20,0</Thickness>
-    <Thickness x:Key="NavigationViewCompactItemContentPresenterMargin">0,0,16,0</Thickness>
+    <Thickness x:Key="NavigationViewCompactItemContentPresenterMargin">0,0,0,0</Thickness>
     <Thickness x:Key="TopNavigationViewItemContentPresenterMargin">8,0,16,0</Thickness>
     <Thickness x:Key="TopNavigationViewItemContentOnlyContentPresenterMargin">12,0</Thickness>
     <Thickness x:Key="NavigationViewItemExpandChevronMargin">-20,0,6,0</Thickness>

dev/NavigationView/TestUI/Common/NavigationViewPage.xaml

@@ -52,6 +52,12 @@
                     </muxcontrols:NavigationViewItem.Content>
                 </muxcontrols:NavigationViewItem>
                 <muxcontrols:NavigationViewItem x:Name="IntegerItem" AutomationProperties.Name="Integer" Icon="Accept"/>
+                <muxcontrols:NavigationViewItemSeparator />
+                <muxcontrols:NavigationViewItem x:Name="HasChildItem" AutomationProperties.Name="HasChildItem" Content="Item with child">
+                    <muxcontrols:NavigationViewItem.MenuItems>
+                        <muxcontrols:NavigationViewItem x:Name="ChildItem" AutomationProperties.Name="ChildItem" Content="Child Item Content" Icon="Document" />
+                    </muxcontrols:NavigationViewItem.MenuItems>
+                </muxcontrols:NavigationViewItem>
             </muxcontrols:NavigationView.MenuItems>
 
             <ScrollViewer Margin="8,0,0,0">
@@ -272,6 +278,20 @@
                         </StackPanel>
                     </StackPanel>
 
+                    <StackPanel Orientation="Horizontal" Margin="0 5">
+                        <Button x:Name="BringSettingsIntoViewButton" AutomationProperties.Name="BringSettingsIntoViewButton" Click="BringSettingsIntoViewButton_Click"
+                                Content="Bring Settings into view"/>
+                    </StackPanel>
+
+                    <StackPanel Orientation="Horizontal" Margin="0 5">
+                        <Button x:Name="GetTopLevelNavViewItemContentPresenterMarginButton" AutomationProperties.Name="GetTopLevelNavViewItemContentPresenterMarginButton"
+                                Content="GetTopLevelNavViewItemContentPresenterMargin" Margin="0,0,5,0" Click="GetTopLevelNavViewItemContentPresenterMarginButton_Click"/>
+                        <Button x:Name="GetChildNavViewItemContentPresenterMarginButton" AutomationProperties.Name="GetChildNavViewItemContentPresenterMarginButton"
+                                Content="GetChildNavViewItemContentPresenterMargin" Margin="0,0,2,0" Click="GetChildNavViewItemContentPresenterMarginButton_Click" />
+                        <TextBlock Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">NavViewItemContentPresenter.Margin:</TextBlock>
+                        <TextBlock x:Name="NavViewItemContentPresenterMarginTextBlock" AutomationProperties.Name="NavViewItemContentPresenterMarginTextBlock" VerticalAlignment="Center"/>
+                    </StackPanel>
+
                     <TextBlock TextWrapping="Wrap" Grid.Row="1" Margin="5">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus quam id sem porta posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sodales suscipit justo quis consequat. Vestibulum lectus magna, mattis id eleifend sed, congue eget lectus. Nam et sem pellentesque, dignissim erat eu, tincidunt lacus. Ut porttitor tincidunt ullamcorper. Vestibulum sodales neque purus, vitae eleifend metus convallis in. Etiam non metus nec ligula pharetra molestie. Donec dignissim dapibus blandit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 

dev/NavigationView/TestUI/Common/NavigationViewPage.xaml.cs

@@ -23,6 +23,7 @@
 using MaterialHelperTestApi = Microsoft.UI.Private.Media.MaterialHelperTestApi;
 using NavigationViewSelectionFollowsFocus = Microsoft.UI.Xaml.Controls.NavigationViewSelectionFollowsFocus;
 using Microsoft.UI.Xaml.Controls;
+using MUXControlsTestApp.Utilities;
 
 namespace MUXControlsTestApp
 {
@@ -735,10 +736,35 @@ private void ReadSettingsSelected_Click(object sender, RoutedEventArgs e)
 
             SettingsSelectedState.Text = (settings as NavigationViewItem).IsSelected.ToString();
         }
+
         private async void ContentDialogNavViewButton_Click(object sender, RoutedEventArgs e)
         {
             DialogWithNavView dialog = new DialogWithNavView();
             await dialog.ShowAsync();
         }
+
+        private void GetTopLevelNavViewItemContentPresenterMarginButton_Click(object sender, RoutedEventArgs e)
+        {         
+            if (FindVisualChildByName(HomeItem, "ContentPresenter") is ContentPresenter presenter)
+            {
+                NavViewItemContentPresenterMarginTextBlock.Text = presenter.Margin.ToString();
+            }
+        }
+
+        private void GetChildNavViewItemContentPresenterMarginButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (FindVisualChildByName(ChildItem, "ContentPresenter") is ContentPresenter presenter)
+            {
+                NavViewItemContentPresenterMarginTextBlock.Text = presenter.Margin.ToString();
+            }
+        }
+
+        private void BringSettingsIntoViewButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (NavView.SettingsItem is NavigationViewItem settingsItem)
+            {
+                settingsItem.StartBringIntoView();
+            }
+        }
     }
 }

dev/NavigationView/TestUI/Regression/NavigationViewRS4Page.xaml

@@ -36,6 +36,14 @@
                 PaneOpened="NavView_PaneOpened"
                 BackRequested="NavView_BackRequested"
                 AccessKey="H">
+            <!-- Note: Adding more NavViewItems here will cause the following tests to fail on RS2 and below:
+                 - CommonTests.MenuItemKeyboardInvokeTest()
+                 - SelectionTests.MenuItemAutomationSelectionTest()
+
+                 The reason is that on RS2, the ScollViewer handles arrow keys and thus scrolls the NavigationView pane instead of moving focus.
+                 This is not an issue with the current page setup as all NavView items fit the page without the need to scroll it. Adding more items,
+                 however, will push these items off-screen leading the ScrollViewer to scroll the pane instead of moving focus. As a result, the above
+                 mentioned tests will fail. -->
             <muxcontrols:NavigationView.MenuItems>
                 <muxcontrols:NavigationViewItem x:Name="HomeItem" Content="Home" Icon="Home"/>
                 <muxcontrols:NavigationViewItem x:Name="AppsItem" Content="Apps" Icon="Shop" />