Let NavigationViewItem respect CompactPane length for icon size

dev/NavigationView/NavigationView.cpp

@@ -24,6 +24,7 @@
 #include "NavigationViewAutomationPeer.h"
 #include "StackLayout.h"
 
+// General items
 static constexpr auto c_togglePaneButtonName = L"TogglePaneButton"sv;
 static constexpr auto c_paneTitleHolderFrameworkElement = L"PaneTitleHolder"sv;
 static constexpr auto c_paneTitleFrameworkElement = L"PaneTitleTextBlock"sv;
@@ -36,6 +37,7 @@ static constexpr auto c_paneContentGridName = L"PaneContentGrid"sv;
 static constexpr auto c_rootGridName = L"RootGrid"sv;
 static constexpr auto c_contentGridName = L"ContentGrid"sv;
 static constexpr auto c_searchButtonName = L"PaneAutoSuggestButton"sv;
+static constexpr auto c_paneToggleButtonGridName = L"PaneToggleButtonGrid"sv;
 static constexpr auto c_togglePaneTopPadding = L"TogglePaneTopPadding"sv;
 static constexpr auto c_contentPaneTopPadding = L"ContentPaneTopPadding"sv;
 static constexpr auto c_contentLeftPadding = L"ContentLeftPadding"sv;
@@ -45,6 +47,7 @@ static constexpr auto c_navViewCloseButton = L"NavigationViewCloseButton"sv;
 static constexpr auto c_navViewCloseButtonToolTip = L"NavigationViewCloseButtonToolTip"sv;
 static constexpr auto c_paneShadowReceiverCanvas = L"PaneShadowReceiver"sv;
 
+// DisplayMode Top specific items
 static constexpr auto c_topNavMenuItemsHost = L"TopNavMenuItemsHost"sv;
 static constexpr auto c_topNavOverflowButton = L"TopNavOverflowButton"sv;
 static constexpr auto c_topNavMenuItemsOverflowHost = L"TopNavMenuItemsOverflowHost"sv;
@@ -54,6 +57,7 @@ static constexpr auto c_leftNavPaneAutoSuggestBoxPresenter = L"PaneAutoSuggestBo
 static constexpr auto c_topNavPaneAutoSuggestBoxPresenter = L"TopPaneAutoSuggestBoxPresenter"sv;
 static constexpr auto c_paneTitlePresenter = L"PaneTitlePresenter"sv;
 
+// DisplayMode Left specific items
 static constexpr auto c_leftNavFooterContentBorder = L"FooterContentBorder"sv;
 static constexpr auto c_leftNavPaneHeaderContentBorder = L"PaneHeaderContentBorder"sv;
 static constexpr auto c_leftNavPaneCustomContentBorder = L"PaneCustomContentBorder"sv;
@@ -256,6 +260,7 @@ void NavigationView::OnApplyTemplate()
     m_paneTitleOnTopPane.set(GetTemplateChildT<winrt::ContentControl>(c_paneTitleOnTopPane, controlProtected));
     m_paneCustomContentOnTopPane.set(GetTemplateChildT<winrt::ContentControl>(c_paneCustomContentOnTopPane, controlProtected));
     m_paneFooterOnTopPane.set(GetTemplateChildT<winrt::ContentControl>(c_paneFooterOnTopPane, controlProtected));
+    m_paneToggleButtonGrid.set(GetTemplateChildT<winrt::Grid>(c_paneToggleButtonGridName, controlProtected));
 
     // Get a pointer to the root SplitView
     if (auto splitView = GetTemplateChildT<winrt::SplitView>(c_rootSplitViewName, controlProtected))
@@ -3026,6 +3031,15 @@ void NavigationView::OnPropertyChanged(const winrt::DependencyPropertyChangedEve
     {
         // Need to update receiver margins when CompactPaneLength changes
         UpdatePaneShadow();
+
+        // Update pane-button-grid width hwne pane is closed and we are not in minimal
+        if (!IsPaneOpen() && DisplayMode() != winrt::NavigationViewDisplayMode::Minimal)
+        {
+            if (auto paneButtonGrid = m_paneToggleButtonGrid.try_as<winrt::FrameworkElement>())
+            {
+                paneButtonGrid.Width(CompactPaneLength());
+            }
+        }
     }
     else if (property == s_IsTitleBarAutoPaddingEnabledProperty)
     {
@@ -3105,6 +3119,36 @@ void NavigationView::OnIsPaneOpenChanged()
             }
         }
     }
+    if (isPaneOpen || DisplayMode() == winrt::NavigationViewDisplayMode::Minimal)
+    {
+        // Opening pane, so we need to clear the button grid width to prevent clipping
+        if (auto paneButtonGrid = m_paneToggleButtonGrid.try_as<winrt::FrameworkElement>())
+        {
+            paneButtonGrid.Width(NAN);
+        }
+    }
+    else
+    {
+        // Closing pane, so we need to set width of button grid so they are centered
+        if (DisplayMode() != winrt::NavigationViewDisplayMode::Minimal)
+        {
+            // Update pane (toggle) button grid's width for button centering
+            if (auto paneButtonGrid = m_paneToggleButtonGrid.try_as<winrt::FrameworkElement>())
+            {
+                paneButtonGrid.Width(CompactPaneLength());
+            }
+        }
+    }
+
+    if (isPaneOpen)
+    {
+        winrt::VisualStateManager::GoToState(*this, L"PaneOpen", false /* usetransition */);
+    }
+    else
+    {
+        winrt::VisualStateManager::GoToState(*this, L"PaneClosed", false /* usetransition */);
+    }
+
     SetPaneToggleButtonAutomationName();
     UpdatePaneTabFocusNavigation();
     UpdateSettingsItemToolTip();
@@ -3155,7 +3199,15 @@ void NavigationView::UpdatePaneDisplayMode()
                 thisAsUIElement8.KeyTipTarget(paneToggleButton);
             }
         }
-
+
+        //if (DisplayMode() == winrt::NavigationViewDisplayMode::Compact)
+        //{
+        //    // Update pane (toggle) button grid's width for button centering
+        //    if (auto paneButtonGrid = m_paneToggleButtonGrid.try_as<winrt::FrameworkElement>())
+        //    {
+        //        paneButtonGrid.Width(CompactPaneLength());
+        //    }
+        //}
     }
     else
     {

dev/NavigationView/NavigationView.h

@@ -272,6 +272,7 @@ class NavigationView :
     tracker_ref<winrt::SplitView> m_rootSplitView{ this };
     tracker_ref<winrt::NavigationViewItem> m_settingsItem{ this };
     tracker_ref<winrt::UIElement> m_paneContentGrid{ this };
+    tracker_ref<winrt::FrameworkElement> m_paneToggleButtonGrid{ this };
     tracker_ref<winrt::FrameworkElement> m_paneTitleHolderFrameworkElement{ this };
     tracker_ref<winrt::FrameworkElement> m_paneTitleFrameworkElement{ this };
     tracker_ref<winrt::Button> m_paneSearchButton{ this };

dev/NavigationView/NavigationView.xaml

@@ -1,4 +1,4 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -75,6 +75,16 @@
                                 </VisualState>
                             </VisualStateGroup>
 
+                            <VisualStateGroup x:Name="PaneOpenStateGroup">
+                                <VisualState x:Name="PaneOpen" />
+
+                                <VisualState x:Name="PaneClosed">
+                                    <VisualState.Setters>
+                                        <Setter Target="ButtonHolderGrid.HorizontalAlignment" Value="Center"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+
                             <VisualStateGroup x:Name="PaneStateGroup">
                                 <VisualState x:Name="NotClosedCompact" />
                                 <VisualState x:Name="ClosedCompact">
@@ -140,6 +150,7 @@
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
 
+                        <!-- Button grid -->
                         <Grid
                             x:Name="PaneToggleButtonGrid"
                             Margin="0,0,0,8"
@@ -200,13 +211,15 @@
                                 </Grid>
                             </Grid>
                         </Grid>
-
+
+                        <!-- Content layouts -->
                         <Grid>
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto"/>
                                 <RowDefinition Height="*"/>
                             </Grid.RowDefinitions>
 
+                            <!-- DisplayMode top -->
                             <StackPanel
                                 x:Name="TopNavArea"
                                 Background="{ThemeResource NavigationViewTopPaneBackground}"
@@ -347,6 +360,7 @@
                                     Child="{TemplateBinding ContentOverlay}" />
                             </StackPanel>
 
+                            <!-- Displaymode (compact/minimal/normal) left -->
                             <SplitView
                                 x:Name="RootSplitView"
                                 Background="{TemplateBinding Background}"

dev/NavigationView/NavigationViewItem.cpp

@@ -89,6 +89,7 @@ void NavigationViewItem::UpdateCompactPaneLength()
     if (auto splitView = GetSplitView())
     {
         SetValue(s_CompactPaneLengthProperty, winrt::PropertyValue::CreateDouble(splitView.CompactPaneLength()));
+        GetPresenter()->UpdateCompactPaneLength(splitView.CompactPaneLength());
     }
 }
 

dev/NavigationView/NavigationViewItemPresenter.cpp

@@ -1,4 +1,4 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
+// Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License. See LICENSE in the project root for license information.
 
 #include "pch.h"
@@ -7,19 +7,25 @@
 #include "NavigationViewItem.h"
 #include "SharedHelpers.h"
 
+static constexpr auto c_iconBoxColumnDefinitionName = L"IconColumn"sv;
+
 NavigationViewItemPresenter::NavigationViewItemPresenter()
 {
     SetDefaultStyleKey(this);
 }
 
 void NavigationViewItemPresenter::OnApplyTemplate()
 {
+    winrt::IControlProtected controlProtected = *this;
+
     // Retrieve pointers to stable controls 
     m_helper.Init(*this);
     if (auto navigationViewItem = GetNavigationViewItem())
     {
         navigationViewItem->UpdateVisualStateNoTransition();
     }
+
+    m_iconBoxColumnDefinition.set(GetTemplateChildT<winrt::ColumnDefinition>(c_iconBoxColumnDefinitionName, controlProtected));
 }
 
 winrt::UIElement NavigationViewItemPresenter::GetSelectionIndicator()
@@ -54,4 +60,14 @@ NavigationViewItem* NavigationViewItemPresenter::GetNavigationViewItem()
         navigationViewItem = winrt::get_self<NavigationViewItem>(item);
     }
     return navigationViewItem;
-}
+}
+
+void NavigationViewItemPresenter::UpdateCompactPaneLength(double compactPaneLength)
+{
+    if (auto iconGridColumn = m_iconBoxColumnDefinition.try_as<winrt::ColumnDefinition>())
+    {
+        auto gridLength = iconGridColumn.Width();
+        gridLength.Value = compactPaneLength;
+        iconGridColumn.Width(gridLength);
+    }
+}

dev/NavigationView/NavigationViewItemPresenter.h

@@ -23,8 +23,12 @@ class NavigationViewItemPresenter:
 
     winrt::UIElement GetSelectionIndicator();
 
+    void UpdateCompactPaneLength(double compactPaneLength);
+
 private:
     NavigationViewItem * GetNavigationViewItem();
 
+    tracker_ref<winrt::ColumnDefinition> m_iconBoxColumnDefinition{ this };
+
     NavigationViewItemHelper<NavigationViewItemPresenter> m_helper{ this };
 };

dev/NavigationView/NavigationView_InteractionTests/NavigationViewTests.cs

@@ -4179,6 +4179,29 @@ public void VerifyEventsReturnExpectedDataTypesMenuItemsSource()
             }
         }
 
+        [TestMethod]
+        [TestProperty("TestSuide","D")]
+        public void VerifyIconsRespectCompactPaneLength()
+        {
+            using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", "NavigationView compact pane length test" }))
+            {
+                var checkMenuItemsButton = FindElement.ByName("CheckMenuItemsOffset");
+                var compactpaneCheckbox = new ComboBox(FindElement.ByName("CompactPaneLenghtComboBox"));
+                var currentStatus = new CheckBox(FindElement.ByName("MenuItemsCorrectOffset"));
+
+                checkMenuItemsButton.Click();
+                Wait.ForIdle();
+                Verify.IsTrue(currentStatus.ToggleState == ToggleState.On);
+
+                compactpaneCheckbox.SelectItemByName("96");
+                Wait.ForIdle();
+
+                checkMenuItemsButton.Click();
+                Wait.ForIdle();
+                Verify.IsTrue(currentStatus.ToggleState == ToggleState.On);
+            }
+        }
+
         private void EnsurePaneHeaderCanBeModifiedHelper(RegressionTestType navviewMode)
         {
             if (!PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone2))

dev/NavigationView/TestUI/NavigationViewCaseBundle.xaml

@@ -23,6 +23,7 @@
         <StackPanel>
             <TextBlock Text="Common tests"/>
             <Button x:Name="NavigationViewPage" AutomationProperties.Name="NavigationView Test" Margin="2" HorizontalAlignment="Stretch">NavigationView Test</Button>
+            <Button x:Name="NavigationViewCompactPaneLengthTestPage" AutomationProperties.Name="NavigationView compact pane length test" Margin="2" HorizontalAlignment="Stretch">NavigationView compact pane length test</Button>
             <Button x:Name="NavigationViewPageDataContext" AutomationProperties.Name="NavigationViewPageDataContext" Margin="2" HorizontalAlignment="Stretch">NavigationView DataContext</Button>
             <Button x:Name="NavigateToSelectedItemEdgeCasePage" AutomationProperties.Name="SelectedItem edge case test" Margin="2" HorizontalAlignment="Stretch">SelectedItem edge Case Test</Button>
             <Button x:Name="NavigateToInitPage" AutomationProperties.Name="NavigationView Init Test" Margin="2" HorizontalAlignment="Stretch">NavigationView Init Test</Button>

dev/NavigationView/TestUI/NavigationViewCaseBundle.xaml.cs

@@ -19,6 +19,7 @@ public NavigationViewCaseBundle()
         {
             this.InitializeComponent();
             NavigationViewPage.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewPage), 0); };
+            NavigationViewCompactPaneLengthTestPage.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewCompactPaneLengthTestPage), 0); };
             NavigationViewRS4Page.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewRS4Page), 0); };
             NavigationViewPageDataContext.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewPageDataContext), 0); };
             NavigationViewTopNavPage.Click += delegate { Frame.NavigateWithoutAnimation(typeof(NavigationViewTopNavPage), 0); };