NavigationView: Fix content clipping regression (microsoft/microsoft-ui-xaml#2717)

Author: Kinnara

ModernWpf/Styles/NavigationView.xaml

@@ -41,7 +41,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>

test/NavigationView_TestUI/Common/NavigationViewPage.xaml

@@ -51,6 +51,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">
@@ -268,6 +274,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. 
 

test/NavigationView_TestUI/Common/NavigationViewPage.xaml.cs

@@ -729,5 +729,29 @@ private void ReadSettingsSelected_Click(object sender, RoutedEventArgs e)
 
             SettingsSelectedState.Text = (settings as NavigationViewItem).IsSelected.ToString();
         }
+
+        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.BringIntoView();
+            }
+        }
     }
 }

test/NavigationView_TestUI/Regression/NavigationViewRS4Page.xaml

@@ -35,6 +35,14 @@
                 PaneOpening="NavView_PaneOpening"
                 PaneOpened="NavView_PaneOpened"
                 BackRequested="NavView_BackRequested">
+            <!-- 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" />