NavView OpenPaneLength Surpassing App Width Fix (#5800)

* add openpanewith member variable + templateSettings prop * assign min of openPaneLength / app width * update verification files * changes from comments * move openPaneWidth to preview
microsoft · Sep 2, 2021 · 991c831 · 991c831
1 parent 4be817e
commit 991c831
Show file tree

Hide file tree

Showing 22 changed files with 8,331 additions and 43 deletions.
diff --git a/dev/Generated/NavigationViewTemplateSettings.properties.cpp b/dev/Generated/NavigationViewTemplateSettings.properties.cpp
@@ -15,6 +15,7 @@ namespace winrt::Microsoft::UI::Xaml::Controls
 
 GlobalDependencyProperty NavigationViewTemplateSettingsProperties::s_BackButtonVisibilityProperty{ nullptr };
 GlobalDependencyProperty NavigationViewTemplateSettingsProperties::s_LeftPaneVisibilityProperty{ nullptr };
+GlobalDependencyProperty NavigationViewTemplateSettingsProperties::s_OpenPaneWidthProperty{ nullptr };
 GlobalDependencyProperty NavigationViewTemplateSettingsProperties::s_OverflowButtonVisibilityProperty{ nullptr };
 GlobalDependencyProperty NavigationViewTemplateSettingsProperties::s_PaneToggleButtonVisibilityProperty{ nullptr };
 GlobalDependencyProperty NavigationViewTemplateSettingsProperties::s_PaneToggleButtonWidthProperty{ nullptr };
@@ -52,6 +53,17 @@ void NavigationViewTemplateSettingsProperties::EnsureProperties()
                 ValueHelper<winrt::Visibility>::BoxValueIfNecessary(winrt::Visibility::Visible),
                 nullptr);
     }
+    if (!s_OpenPaneWidthProperty)
+    {
+        s_OpenPaneWidthProperty =
+            InitializeDependencyProperty(
+                L"OpenPaneWidth",
+                winrt::name_of<double>(),
+                winrt::name_of<winrt::NavigationViewTemplateSettings>(),
+                false /* isAttached */,
+                ValueHelper<double>::BoxValueIfNecessary(320.0),
+                nullptr);
+    }
     if (!s_OverflowButtonVisibilityProperty)
     {
         s_OverflowButtonVisibilityProperty =
@@ -135,6 +147,7 @@ void NavigationViewTemplateSettingsProperties::ClearProperties()
 {
     s_BackButtonVisibilityProperty = nullptr;
     s_LeftPaneVisibilityProperty = nullptr;
+    s_OpenPaneWidthProperty = nullptr;
     s_OverflowButtonVisibilityProperty = nullptr;
     s_PaneToggleButtonVisibilityProperty = nullptr;
     s_PaneToggleButtonWidthProperty = nullptr;
@@ -170,6 +183,19 @@ winrt::Visibility NavigationViewTemplateSettingsProperties::LeftPaneVisibility()
     return ValueHelper<winrt::Visibility>::CastOrUnbox(static_cast<NavigationViewTemplateSettings*>(this)->GetValue(s_LeftPaneVisibilityProperty));
 }
 
+void NavigationViewTemplateSettingsProperties::OpenPaneWidth(double value)
+{
+    [[gsl::suppress(con)]]
+    {
+    static_cast<NavigationViewTemplateSettings*>(this)->SetValue(s_OpenPaneWidthProperty, ValueHelper<double>::BoxValueIfNecessary(value));
+    }
+}
+
+double NavigationViewTemplateSettingsProperties::OpenPaneWidth()
+{
+    return ValueHelper<double>::CastOrUnbox(static_cast<NavigationViewTemplateSettings*>(this)->GetValue(s_OpenPaneWidthProperty));
+}
+
 void NavigationViewTemplateSettingsProperties::OverflowButtonVisibility(winrt::Visibility const& value)
 {
     [[gsl::suppress(con)]]

diff --git a/dev/Generated/NavigationViewTemplateSettings.properties.h b/dev/Generated/NavigationViewTemplateSettings.properties.h
@@ -15,6 +15,9 @@ class NavigationViewTemplateSettingsProperties
     void LeftPaneVisibility(winrt::Visibility const& value);
     winrt::Visibility LeftPaneVisibility();
 
+    void OpenPaneWidth(double value);
+    double OpenPaneWidth();
+
     void OverflowButtonVisibility(winrt::Visibility const& value);
     winrt::Visibility OverflowButtonVisibility();
 
@@ -38,6 +41,7 @@ class NavigationViewTemplateSettingsProperties
 
     static winrt::DependencyProperty BackButtonVisibilityProperty() { return s_BackButtonVisibilityProperty; }
     static winrt::DependencyProperty LeftPaneVisibilityProperty() { return s_LeftPaneVisibilityProperty; }
+    static winrt::DependencyProperty OpenPaneWidthProperty() { return s_OpenPaneWidthProperty; }
     static winrt::DependencyProperty OverflowButtonVisibilityProperty() { return s_OverflowButtonVisibilityProperty; }
     static winrt::DependencyProperty PaneToggleButtonVisibilityProperty() { return s_PaneToggleButtonVisibilityProperty; }
     static winrt::DependencyProperty PaneToggleButtonWidthProperty() { return s_PaneToggleButtonWidthProperty; }
@@ -48,6 +52,7 @@ class NavigationViewTemplateSettingsProperties
 
     static GlobalDependencyProperty s_BackButtonVisibilityProperty;
     static GlobalDependencyProperty s_LeftPaneVisibilityProperty;
+    static GlobalDependencyProperty s_OpenPaneWidthProperty;
     static GlobalDependencyProperty s_OverflowButtonVisibilityProperty;
     static GlobalDependencyProperty s_PaneToggleButtonVisibilityProperty;
     static GlobalDependencyProperty s_PaneToggleButtonWidthProperty;

diff --git a/dev/NavigationView/NavigationView.cpp b/dev/NavigationView/NavigationView.cpp
@@ -1388,6 +1388,7 @@ void NavigationView::OnLayoutUpdated(const winrt::IInspectable& sender, const wi
 void NavigationView::OnSizeChanged(winrt::IInspectable const& /*sender*/, winrt::SizeChangedEventArgs const& args)
 {
     const auto width = args.NewSize().Width;
+    UpdateOpenPaneWidth(width);
     UpdateAdaptiveLayout(width);
     UpdateTitleBarPadding();
     UpdateBackAndCloseButtonsVisibility();
@@ -1399,6 +1400,17 @@ void NavigationView::OnItemsContainerSizeChanged(const winrt::IInspectable& send
     UpdatePaneLayout();
 }
 
+void NavigationView::UpdateOpenPaneWidth(double width)
+{
+    if (!IsTopNavigationView() && m_rootSplitView)
+    {
+        m_openPaneWidth = std::max(0.0, std::min(width, OpenPaneLength()));
+
+        const auto templateSettings = GetTemplateSettings();
+        templateSettings->OpenPaneWidth(m_openPaneWidth);
+    }
+}
+
 // forceSetDisplayMode: On first call to SetDisplayMode, force setting to initial values
 void NavigationView::UpdateAdaptiveLayout(double width, bool forceSetDisplayMode)
 {
@@ -4034,6 +4046,10 @@ void NavigationView::OnPropertyChanged(const winrt::DependencyPropertyChangedEve
     {
         UpdatePaneLayout();
     }
+    else if (property == s_OpenPaneLengthProperty)
+    {
+        UpdateOpenPaneWidth(ActualWidth());
+    }
 }
 
 void NavigationView::UpdateNavigationViewItemsFactory()
@@ -4392,13 +4408,13 @@ void NavigationView::UpdatePaneToggleSize()
             {
                 if (splitView.DisplayMode() == winrt::SplitViewDisplayMode::Overlay && IsPaneOpen())
                 {
-                    width = OpenPaneLength();
-                    togglePaneButtonWidth = OpenPaneLength() - ((ShouldShowBackButton() || ShouldShowCloseButton()) ? c_backButtonWidth : 0);
+                    width = m_openPaneWidth;
+                    togglePaneButtonWidth = m_openPaneWidth - ((ShouldShowBackButton() || ShouldShowCloseButton()) ? c_backButtonWidth : 0);
                 }
                 else if (!(splitView.DisplayMode() == winrt::SplitViewDisplayMode::Overlay && !IsPaneOpen()))
                 {
-                    width = OpenPaneLength();
-                    togglePaneButtonWidth = OpenPaneLength();
+                    width = m_openPaneWidth;
+                    togglePaneButtonWidth = m_openPaneWidth;
                 }
             }
 
@@ -4880,11 +4896,11 @@ void NavigationView::UpdatePaneShadow()
         // Ensure shadow is as wide as the pane when it is open
         if (DisplayMode() == winrt::NavigationViewDisplayMode::Compact)
         {
-            shadowReceiver.Width(OpenPaneLength());
+            shadowReceiver.Width(m_openPaneWidth);
         }
         else
         {
-            shadowReceiver.Width(OpenPaneLength() - shadowReceiverMargin.Right);
+            shadowReceiver.Width(m_openPaneWidth - shadowReceiverMargin.Right);
         }
         shadowReceiver.Margin(shadowReceiverMargin);
     }

diff --git a/dev/NavigationView/NavigationView.h b/dev/NavigationView/NavigationView.h
@@ -251,6 +251,7 @@ class NavigationView :
     void OnItemsContainerSizeChanged(const winrt::IInspectable& sender, const winrt::SizeChangedEventArgs& args);
     void OnLayoutUpdated(const winrt::IInspectable& sender, const winrt::IInspectable& e);
     void UpdateAdaptiveLayout(double width, bool forceSetDisplayMode = false);
+    void UpdateOpenPaneWidth(double width);
     void UpdatePaneLayout();
     void SetDisplayMode(const winrt::NavigationViewDisplayMode& displayMode, bool forceSetDisplayMode = false);
 
@@ -499,5 +500,7 @@ class NavigationView :
     bool m_TabKeyPrecedesFocusChange{ false };
 
     bool m_isLeftPaneTitleEmpty{ false };
+
+    double m_openPaneWidth{ 320.0 };
 };
 
diff --git a/dev/NavigationView/NavigationView.idl b/dev/NavigationView/NavigationView.idl
@@ -142,7 +142,7 @@ unsealed runtimeclass NavigationViewTemplateSettings : Windows.UI.Xaml.Dependenc
     Windows.UI.Xaml.Visibility LeftPaneVisibility { get; };
     Boolean SingleSelectionFollowsFocus { get; };
     Double PaneToggleButtonWidth{ get; };
-    Double SmallerPaneToggleButtonWidth{ get; };   
+    Double SmallerPaneToggleButtonWidth{ get; };    
 
     static Windows.UI.Xaml.DependencyProperty TopPaddingProperty { get; };
     static Windows.UI.Xaml.DependencyProperty OverflowButtonVisibilityProperty { get; };
@@ -153,6 +153,14 @@ unsealed runtimeclass NavigationViewTemplateSettings : Windows.UI.Xaml.Dependenc
     static Windows.UI.Xaml.DependencyProperty SingleSelectionFollowsFocusProperty { get; };
     static Windows.UI.Xaml.DependencyProperty PaneToggleButtonWidthProperty{ get; };
     static Windows.UI.Xaml.DependencyProperty SmallerPaneToggleButtonWidthProperty{ get; };
+
+    [MUX_PREVIEW]
+    {
+        [MUX_DEFAULT_VALUE("320.0")]
+        Double OpenPaneWidth{ get; };
+
+        static Windows.UI.Xaml.DependencyProperty OpenPaneWidthProperty{ get; };
+    }
 }
 
 [MUX_PUBLIC]

diff --git a/dev/NavigationView/NavigationView.xaml b/dev/NavigationView/NavigationView.xaml
@@ -469,7 +469,7 @@
                                 DisplayMode="Inline"
                                 IsPaneOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
                                 IsTabStop="False"
-                                OpenPaneLength="{TemplateBinding OpenPaneLength}"
+                                OpenPaneLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneWidth}"
                                 PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}"
                                 Grid.Row="1"
                                 contract7Present:CornerRadius="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}">
@@ -683,7 +683,7 @@
                             <Grid
                                 x:Name="ShadowCaster"
                                 Grid.RowSpan="2"
-                                Width="{TemplateBinding OpenPaneLength}"
+                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneWidth}"
                                 HorizontalAlignment="Left">
                                 <Grid.RenderTransform>
                                     <CompositeTransform x:Name="ShadowCasterTransform" />

diff --git a/test/MUXControlsTestApp/verification/NavigationViewAuto-8.xml b/test/MUXControlsTestApp/verification/NavigationViewAuto-8.xml
@@ -2056,9 +2056,9 @@
                     FocusVisualSecondaryThickness=1,1,1,1
                     Margin=0,-32,-32,-32
                     Name=PaneShadowReceiver
-                    RenderSize=152,663
+                    RenderSize=352,663
                     Visibility=Visible
-                    Width=152
+                    Width=352
             [Windows.UI.Xaml.Shapes.Rectangle]
                 FocusVisualPrimaryBrush=#E4000000
                 FocusVisualPrimaryThickness=2,2,2,2

diff --git a/test/MUXControlsTestApp/verification/NavigationViewLeftCompact-4.xml b/test/MUXControlsTestApp/verification/NavigationViewLeftCompact-4.xml
@@ -678,7 +678,7 @@
                       Margin=0,0,0,0
                       Name=PaneHeaderContentBorder
                       Padding=0,0,0,0
-                      RenderSize=80,40
+                      RenderSize=280,40
                       Visibility=Collapsed
                     [Windows.UI.Xaml.Controls.ContentPresenter]
                         Background=[NULL]
@@ -692,7 +692,7 @@
                         Foreground=#E4000000
                         Margin=0,0,0,0
                         Padding=0,0,0,0
-                        RenderSize=80,40
+                        RenderSize=280,40
                         Visibility=Visible
                 [Windows.UI.Xaml.Controls.Grid]
                     Background=[NULL]

diff --git a/test/MUXControlsTestApp/verification/NavigationViewLeftCompact-8.xml b/test/MUXControlsTestApp/verification/NavigationViewLeftCompact-8.xml
@@ -2057,9 +2057,9 @@
                     FocusVisualSecondaryThickness=1,1,1,1
                     Margin=0,-32,-32,-32
                     Name=PaneShadowReceiver
-                    RenderSize=152,663
+                    RenderSize=352,663
                     Visibility=Visible
-                    Width=152
+                    Width=352
             [Windows.UI.Xaml.Shapes.Rectangle]
                 FocusVisualPrimaryBrush=#E4000000
                 FocusVisualPrimaryThickness=2,2,2,2

diff --git a/test/MUXControlsTestApp/verification/NavigationViewLeftMinimal-8.xml b/test/MUXControlsTestApp/verification/NavigationViewLeftMinimal-8.xml
@@ -2045,9 +2045,9 @@
                     FocusVisualSecondaryThickness=1,1,1,1
                     Margin=0,-32,-32,-32
                     Name=PaneShadowReceiver
-                    RenderSize=152,663
+                    RenderSize=352,663
                     Visibility=Visible
-                    Width=152
+                    Width=352
             [Windows.UI.Xaml.Shapes.Rectangle]
                 FocusVisualPrimaryBrush=#E4000000
                 FocusVisualPrimaryThickness=2,2,2,2

diff --git a/test/MUXControlsTestApp/verification/NavigationViewLeftPaneContent-8.xml b/test/MUXControlsTestApp/verification/NavigationViewLeftPaneContent-8.xml
@@ -2578,9 +2578,9 @@
                     FocusVisualSecondaryThickness=1,1,1,1
                     Margin=0,-32,-32,-32
                     Name=PaneShadowReceiver
-                    RenderSize=332,663
+                    RenderSize=352,663
                     Visibility=Visible
-                    Width=332
+                    Width=352
             [Windows.UI.Xaml.Shapes.Rectangle]
                 FocusVisualPrimaryBrush=#E4000000
                 FocusVisualPrimaryThickness=2,2,2,2

diff --git a/test/MUXControlsTestApp/verification/NavigationViewScrolling-8.xml b/test/MUXControlsTestApp/verification/NavigationViewScrolling-8.xml
@@ -5155,9 +5155,9 @@
                     FocusVisualSecondaryThickness=1,1,1,1
                     Margin=0,-32,-32,-32
                     Name=PaneShadowReceiver
-                    RenderSize=152,263
+                    RenderSize=352,263
                     Visibility=Visible
-                    Width=152
+                    Width=352
             [Windows.UI.Xaml.Shapes.Rectangle]
                 FocusVisualPrimaryBrush=#E4000000
                 FocusVisualPrimaryThickness=2,2,2,2

diff --git a/test/MUXControlsTestApp/verification/NavigationViewTop-4.xml b/test/MUXControlsTestApp/verification/NavigationViewTop-4.xml
@@ -1450,7 +1450,7 @@
               Padding=0,0,0,0
               RenderSize=0,0
               Visibility=Collapsed
-              Width=120
+              Width=320
             [Windows.UI.Xaml.Controls.Border]
                 Background=[NULL]
                 BorderBrush=[NULL]
@@ -1812,6 +1812,6 @@
           Margin=0,0,0,0
           Name=ShadowCaster
           Padding=0,0,0,0
-          RenderSize=120,600
+          RenderSize=320,600
           Visibility=Visible
-          Width=120
+          Width=320