From 8811c96721b560fb585b020a73170b7c2fed658e Mon Sep 17 00:00:00 2001 From: Felix-Dev Date: Thu, 18 Jun 2020 23:56:32 +0200 Subject: [PATCH] Add padding to the NavigationViewItem to avoid occluding expand/collapse chevron (#2342) * Add chevron padding of 6 px * Add long navviewitem text * Add alignment padding to content presenter * Remove long NavViewItem test content * Update visual tree masters * More updated paddings. * Restored original ContentPresenter margin for top-level items when the pane is in compact mode * Paddings have been updated to prevent the expand/collapse chevron from being partly occluded by the expanded scrollbar when in Top PaneDisplayMode for items displayed in flyouts (overflow menu and child items) * Update visual tree master. * Simplify implementation --- dev/NavigationView/NavigationViewItem.cpp | 15 ++-- .../NavigationViewItemPresenter.cpp | 15 +++- .../NavigationViewItemPresenter.h | 2 + .../NavigationView_rs1_themeresources.xaml | 29 ++++++-- .../master/NavigationViewAuto-5.xml | 18 ++--- .../master/NavigationViewAuto-6.xml | 18 ++--- .../master/NavigationViewAuto-7.xml | 18 ++--- .../master/NavigationViewAuto-8.xml | 18 ++--- .../master/NavigationViewAuto.xml | 18 ++--- .../master/NavigationViewLeftCompact-5.xml | 8 +-- .../master/NavigationViewLeftCompact-6.xml | 8 +-- .../master/NavigationViewLeftCompact-7.xml | 8 +-- .../master/NavigationViewLeftCompact-8.xml | 8 +-- .../master/NavigationViewLeftCompact.xml | 8 +-- .../master/NavigationViewLeftMinimal-5.xml | 18 ++--- .../master/NavigationViewLeftMinimal-6.xml | 18 ++--- .../master/NavigationViewLeftMinimal-7.xml | 18 ++--- .../master/NavigationViewLeftMinimal-8.xml | 18 ++--- .../master/NavigationViewLeftMinimal.xml | 18 ++--- .../NavigationViewLeftPaneContent-5.xml | 18 ++--- .../NavigationViewLeftPaneContent-6.xml | 18 ++--- .../NavigationViewLeftPaneContent-7.xml | 18 ++--- .../NavigationViewLeftPaneContent-8.xml | 18 ++--- .../master/NavigationViewLeftPaneContent.xml | 18 ++--- .../master/NavigationViewScrolling-5.xml | 72 +++++++++---------- .../master/NavigationViewScrolling-6.xml | 72 +++++++++---------- .../master/NavigationViewScrolling-7.xml | 72 +++++++++---------- .../master/NavigationViewScrolling-8.xml | 72 +++++++++---------- .../master/NavigationViewScrolling.xml | 72 +++++++++---------- 29 files changed, 387 insertions(+), 344 deletions(-) diff --git a/dev/NavigationView/NavigationViewItem.cpp b/dev/NavigationView/NavigationViewItem.cpp index c929f3d918..fcd804b8fa 100644 --- a/dev/NavigationView/NavigationViewItem.cpp +++ b/dev/NavigationView/NavigationViewItem.cpp @@ -174,12 +174,12 @@ void NavigationViewItem::OnSplitViewPropertyChanged(const winrt::DependencyObjec void NavigationViewItem::UpdateCompactPaneLength() { - if (auto splitView = GetSplitView()) + if (const auto splitView = GetSplitView()) { SetValue(s_CompactPaneLengthProperty, winrt::PropertyValue::CreateDouble(splitView.CompactPaneLength())); // Only update when on left - if (auto presenter = GetPresenter()) + if (const auto presenter = GetPresenter()) { presenter->UpdateCompactPaneLength(splitView.CompactPaneLength(), IsOnLeftNav()); } @@ -188,11 +188,18 @@ void NavigationViewItem::UpdateCompactPaneLength() void NavigationViewItem::UpdateIsClosedCompact() { - if (auto splitView = GetSplitView()) + if (const auto splitView = GetSplitView()) { // Check if the pane is closed and if the splitview is in either compact mode. - m_isClosedCompact = !splitView.IsPaneOpen() && (splitView.DisplayMode() == winrt::SplitViewDisplayMode::CompactOverlay || splitView.DisplayMode() == winrt::SplitViewDisplayMode::CompactInline); + m_isClosedCompact = !splitView.IsPaneOpen() + && (splitView.DisplayMode() == winrt::SplitViewDisplayMode::CompactOverlay || splitView.DisplayMode() == winrt::SplitViewDisplayMode::CompactInline); + UpdateVisualState(true /*useTransitions*/); + + if (const auto presenter = GetPresenter()) + { + presenter->UpdateClosedCompactVisualState(IsTopLevelItem(), m_isClosedCompact); + } } } diff --git a/dev/NavigationView/NavigationViewItemPresenter.cpp b/dev/NavigationView/NavigationViewItemPresenter.cpp index 3b8decf961..2e58455914 100644 --- a/dev/NavigationView/NavigationViewItemPresenter.cpp +++ b/dev/NavigationView/NavigationViewItemPresenter.cpp @@ -124,7 +124,6 @@ void NavigationViewItemPresenter::UpdateMargin() } } - void NavigationViewItemPresenter::UpdateCompactPaneLength(double compactPaneLength, bool shouldUpdate) { m_compactPaneLengthValue = compactPaneLength; @@ -138,3 +137,17 @@ void NavigationViewItemPresenter::UpdateCompactPaneLength(double compactPaneLeng } } } + +void NavigationViewItemPresenter::UpdateClosedCompactVisualState(bool isTopLevelItem, bool isClosedCompact) +{ + // We increased the ContentPresenter margin to align it visually with the expand/collapse chevron. This updated margin is even applied when the + // NavigationView is in a visual state where no expand/collapse chevrons are shown, leading to more content being cut off than necessary. + // This is the case for top-level items when the NavigationView is in a compact mode and the NavigationView pane is closed. To keep the original + // cutoff visual experience intact, we restore the original ContentPresenter margin for such top-level items only (children shown in a flyout + // will use the updated margin). + const auto stateName = isClosedCompact && isTopLevelItem + ? L"ClosedCompactAndTopLevelItem" + : L"NotClosedCompactAndTopLevelItem"; + + winrt::VisualStateManager::GoToState(*this, stateName, false /*useTransitions*/); +} diff --git a/dev/NavigationView/NavigationViewItemPresenter.h b/dev/NavigationView/NavigationViewItemPresenter.h index 0a55cb0930..df8a3fdc6d 100644 --- a/dev/NavigationView/NavigationViewItemPresenter.h +++ b/dev/NavigationView/NavigationViewItemPresenter.h @@ -29,6 +29,8 @@ class NavigationViewItemPresenter: void UpdateCompactPaneLength(double compactPaneLength,bool shouldUpdate); + void UpdateClosedCompactVisualState(bool isTopLevelItem, bool isClosedCompact); + private: NavigationViewItem * GetNavigationViewItem(); void UpdateMargin(); diff --git a/dev/NavigationView/NavigationView_rs1_themeresources.xaml b/dev/NavigationView/NavigationView_rs1_themeresources.xaml index 71168d4e5e..d54921f1a6 100644 --- a/dev/NavigationView/NavigationView_rs1_themeresources.xaml +++ b/dev/NavigationView/NavigationView_rs1_themeresources.xaml @@ -248,11 +248,14 @@ 16,10 16,10 10,0 - 0,0,16,0 + 0,0,20,0 + 0,0,16,0 8,0,16,0 - -16,0,0,0 + -20,0,6,0 -16,0,0,0 - 12,0,16,0 + 12,0,20,0 + 16,0,20,0 + -4,0,6,0 12,0,12,0 @@ -626,6 +629,15 @@ + + + + + + + + + + + + + + + + + - + @@ -1482,6 +1502,7 @@ Visibility="Collapsed" HorizontalAlignment="Right" Width="40" + Margin="{ThemeResource TopNavigationViewItemOnOverflowExpandChevronMargin}" Padding="{ThemeResource TopNavigationViewItemOnOverflowExpandChevronPadding}" Background="Transparent">