From 5bb8e98123ba0a55cfd826f001cb45b3874bb8c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Brid?= <36547063+RBrid@users.noreply.github.com> Date: Mon, 8 Jul 2019 23:43:22 -0700 Subject: [PATCH] NavigationView: Adding close button in MinimalLeft display mode (#1016) * Adding Close button to NavigationView's LeftMinimal PaneDisplayMode for Issue #563. * Applying PR feedback. --- dev/NavigationView/NavigationView.cpp | 83 ++++-- dev/NavigationView/NavigationView.h | 7 +- dev/NavigationView/NavigationView.xaml | 8 + .../NavigationViewTests.cs | 269 +++++++++--------- .../Strings/af-ZA/Resources.resw | 2 +- .../Strings/am-ET/Resources.resw | 2 +- .../Strings/ar-SA/Resources.resw | 2 +- .../Strings/az-Latn-AZ/Resources.resw | 2 +- .../Strings/be-BY/Resources.resw | 2 +- .../Strings/bg-BG/Resources.resw | 2 +- .../Strings/bn-BD/Resources.resw | 2 +- .../Strings/bs-Latn-BA/Resources.resw | 2 +- .../Strings/ca-ES/Resources.resw | 2 +- .../Strings/cs-CZ/Resources.resw | 2 +- .../Strings/da-DK/Resources.resw | 2 +- .../Strings/de-DE/Resources.resw | 2 +- .../Strings/el-GR/Resources.resw | 2 +- .../Strings/en-GB/Resources.resw | 2 +- .../Strings/en-us/Resources.resw | 6 +- .../Strings/es-ES/Resources.resw | 2 +- .../Strings/es-MX/Resources.resw | 2 +- .../Strings/et-EE/Resources.resw | 2 +- .../Strings/eu-ES/Resources.resw | 2 +- .../Strings/fa-IR/Resources.resw | 2 +- .../Strings/fi-FI/Resources.resw | 2 +- .../Strings/fil-PH/Resources.resw | 2 +- .../Strings/fr-CA/Resources.resw | 2 +- .../Strings/fr-FR/Resources.resw | 2 +- .../Strings/gl-ES/Resources.resw | 2 +- .../Strings/he-IL/Resources.resw | 2 +- .../Strings/hi-IN/Resources.resw | 2 +- .../Strings/hr-HR/Resources.resw | 2 +- .../Strings/hu-HU/Resources.resw | 2 +- .../Strings/id-ID/Resources.resw | 2 +- .../Strings/is-IS/Resources.resw | 2 +- .../Strings/it-IT/Resources.resw | 2 +- .../Strings/ja-JP/Resources.resw | 2 +- .../Strings/ka-GE/Resources.resw | 2 +- .../Strings/kk-KZ/Resources.resw | 2 +- .../Strings/km-KH/Resources.resw | 2 +- .../Strings/kn-IN/Resources.resw | 2 +- .../Strings/ko-KR/Resources.resw | 2 +- .../Strings/lo-LA/Resources.resw | 2 +- .../Strings/lt-LT/Resources.resw | 2 +- .../Strings/lv-LV/Resources.resw | 2 +- .../Strings/mk-MK/Resources.resw | 2 +- .../Strings/ml-IN/Resources.resw | 2 +- .../Strings/ms-MY/Resources.resw | 2 +- .../Strings/nb-NO/Resources.resw | 2 +- .../Strings/nl-NL/Resources.resw | 2 +- .../Strings/nn-NO/Resources.resw | 2 +- .../Strings/pl-PL/Resources.resw | 2 +- .../Strings/pt-BR/Resources.resw | 2 +- .../Strings/pt-PT/Resources.resw | 2 +- .../Strings/ro-RO/Resources.resw | 2 +- .../Strings/ru-RU/Resources.resw | 2 +- .../Strings/sk-SK/Resources.resw | 2 +- .../Strings/sl-SI/Resources.resw | 2 +- .../Strings/sq-AL/Resources.resw | 2 +- .../Strings/sr-Latn-RS/Resources.resw | 2 +- .../Strings/sv-SE/Resources.resw | 2 +- .../Strings/sw-KE/Resources.resw | 2 +- .../Strings/ta-IN/Resources.resw | 2 +- .../Strings/te-IN/Resources.resw | 2 +- .../Strings/th-TH/Resources.resw | 2 +- .../Strings/tr-TR/Resources.resw | 2 +- .../Strings/uk-UA/Resources.resw | 2 +- .../Strings/uz-Latn-UZ/Resources.resw | 2 +- .../Strings/vi-VN/Resources.resw | 2 +- .../Strings/zh-CN/Resources.resw | 2 +- .../Strings/zh-TW/Resources.resw | 2 +- .../TestUI/NavigationViewPage.xaml.cs | 7 +- dev/ResourceHelper/ResourceAccessor.h | 1 + 73 files changed, 287 insertions(+), 226 deletions(-) diff --git a/dev/NavigationView/NavigationView.cpp b/dev/NavigationView/NavigationView.cpp index b2a43dde48..fc68a5b689 100644 --- a/dev/NavigationView/NavigationView.cpp +++ b/dev/NavigationView/NavigationView.cpp @@ -36,6 +36,8 @@ static constexpr auto c_contentPaneTopPadding = L"ContentPaneTopPadding"sv; static constexpr auto c_headerContent = L"HeaderContent"sv; static constexpr auto c_navViewBackButton = L"NavigationViewBackButton"sv; static constexpr auto c_navViewBackButtonToolTip = L"NavigationViewBackButtonToolTip"sv; +static constexpr auto c_navViewCloseButton = L"NavigationViewCloseButton"sv; +static constexpr auto c_navViewCloseButtonToolTip = L"NavigationViewCloseButtonToolTip"sv; static constexpr auto c_buttonHolderGrid = L"ButtonHolderGrid"sv; static constexpr auto c_paneShadowReceiverCanvas = L"PaneShadowReceiver"sv; @@ -108,8 +110,6 @@ void NavigationView::UnhookEventsAndClearFields(bool isFromDestructor) m_paneSearchButtonClickRevoker.revoke(); m_paneSearchButton.set(nullptr); - - m_buttonHolderGrid.set(nullptr); } NavigationView::NavigationView() @@ -337,6 +337,21 @@ void NavigationView::OnApplyTemplate() backButtonToolTip.Content(box_value(navigationBackButtonToolTip)); } + if (auto closeButton = GetTemplateChildT(c_navViewCloseButton, controlProtected)) + { + m_closeButton.set(closeButton); + m_closeButtonClickedRevoker = closeButton.Click(winrt::auto_revoke, { this, &NavigationView::OnPaneToggleButtonClick }); + + winrt::hstring navigationName = ResourceAccessor::GetLocalizedStringResource(SR_NavigationCloseButtonName); + winrt::AutomationProperties::SetName(closeButton, navigationName); + } + + if (auto closeButtonToolTip = GetTemplateChildT(c_navViewCloseButtonToolTip, controlProtected)) + { + winrt::hstring navigationCloseButtonToolTip = ResourceAccessor::GetLocalizedStringResource(SR_NavigationButtonOpenName); + closeButtonToolTip.Content(box_value(navigationCloseButtonToolTip)); + } + if (SharedHelpers::IsRS2OrHigher()) { // Get hold of the outermost grid and enable XYKeyboardNavigationMode @@ -370,7 +385,7 @@ void NavigationView::OnApplyTemplate() UpdateHeaderVisibility(); UpdateTitleBarPadding(); UpdatePaneTabFocusNavigation(); - UpdateBackButtonVisibility(); + UpdateBackAndCloseButtonsVisibility(); UpdateSingleSelectionFollowsFocusTemplateSetting(); UpdateNavigationViewUseSystemVisual(); PropagateNavigationViewAsParent(); @@ -524,7 +539,7 @@ void NavigationView::OnSizeChanged(winrt::IInspectable const& /*sender*/, winrt: auto width = args.NewSize().Width; UpdateAdaptiveLayout(width); UpdateTitleBarPadding(); - UpdateBackButtonVisibility(); + UpdateBackAndCloseButtonsVisibility(); UpdatePaneTitleMargins(); } @@ -758,7 +773,7 @@ void NavigationView::UpdateIsClosedCompact() } UpdateTitleBarPadding(); - UpdateBackButtonVisibility(); + UpdateBackAndCloseButtonsVisibility(); UpdatePaneTitleMargins(); UpdatePaneToggleSize(); } @@ -803,13 +818,33 @@ bool NavigationView::ShouldShowBackButton() return false; } - auto visibility = IsBackButtonVisible(); - return (visibility == winrt::NavigationViewBackButtonVisible::Visible || (visibility == winrt::NavigationViewBackButtonVisible::Auto && !SharedHelpers::IsOnXbox())); + return ShouldShowBackOrCloseButton(); + } + + return false; +} + +bool NavigationView::ShouldShowCloseButton() +{ + if (m_backButton && !ShouldPreserveNavigationViewRS3Behavior() && m_closeButton) + { + if (PaneDisplayMode() != winrt::NavigationViewPaneDisplayMode::LeftMinimal || !IsPaneOpen()) + { + return false; + } + + return ShouldShowBackOrCloseButton(); } return false; } +bool NavigationView::ShouldShowBackOrCloseButton() +{ + auto visibility = IsBackButtonVisible(); + return (visibility == winrt::NavigationViewBackButtonVisible::Visible || (visibility == winrt::NavigationViewBackButtonVisible::Auto && !SharedHelpers::IsOnXbox())); +} + // The automation name and tooltip for the pane toggle button changes depending on whether it is open or closed // put the logic here as it will be called in a couple places void NavigationView::SetPaneToggleButtonAutomationName() @@ -1439,7 +1474,8 @@ NavigationViewVisualStateDisplayMode NavigationView::GetVisualStateDisplayMode(c // In minimal mode, when the NavView is closed, the HeaderContent doesn't have // its own dedicated space, and must 'share' the top of the NavView with the // pane toggle button ('hamburger' button) and the back button. - if (ShouldShowBackButton()) + // When the NavView is open, the close button is taking space instead of the back button. + if (ShouldShowBackButton() || ShouldShowCloseButton()) { return NavigationViewVisualStateDisplayMode::MinimalWithBackButton; } @@ -2119,10 +2155,7 @@ void NavigationView::InvalidateTopNavPrimaryLayout() float NavigationView::MeasureTopNavigationViewDesiredWidth(winrt::Size const& availableSize) { - float width = 0.0; - width += LayoutUtils::MeasureAndGetDesiredWidthFor(m_buttonHolderGrid.get(), availableSize); - width += LayoutUtils::MeasureAndGetDesiredWidthFor(m_topNavGrid.get(), availableSize); - return width; + return LayoutUtils::MeasureAndGetDesiredWidthFor(m_topNavGrid.get(), availableSize); } float NavigationView::MeasureTopNavMenuItemsHostDesiredWidth(winrt::Size const& availableSize) @@ -2132,9 +2165,7 @@ float NavigationView::MeasureTopNavMenuItemsHostDesiredWidth(winrt::Size const& float NavigationView::GetTopNavigationViewActualWidth() { - double width = 0.0; - width += LayoutUtils::GetActualWidthFor(m_buttonHolderGrid.get()); - width += LayoutUtils::GetActualWidthFor(m_topNavGrid.get()); + double width = LayoutUtils::GetActualWidthFor(m_topNavGrid.get()); MUX_ASSERT(width < std::numeric_limits::max()); return static_cast(width); } @@ -2605,7 +2636,7 @@ void NavigationView::OnPropertyChanged(const winrt::DependencyPropertyChangedEve } else if (property == s_IsBackButtonVisibleProperty) { - UpdateBackButtonVisibility(); + UpdateBackAndCloseButtonsVisibility(); UpdateAdaptiveLayout(ActualWidth()); if (IsTopNavigationView()) { @@ -3018,7 +3049,7 @@ void NavigationView::UpdatePaneToggleSize() if (splitView.DisplayMode() == winrt::SplitViewDisplayMode::Overlay && IsPaneOpen()) { width = OpenPaneLength(); - togglePaneButtonWidth = OpenPaneLength() - (ShouldShowBackButton() ? c_backButtonWidth : 0); + togglePaneButtonWidth = OpenPaneLength() - ((ShouldShowBackButton() || ShouldShowCloseButton()) ? c_backButtonWidth : 0); } else if (!(splitView.DisplayMode() == winrt::SplitViewDisplayMode::Overlay && !IsPaneOpen())) { @@ -3027,11 +3058,6 @@ void NavigationView::UpdatePaneToggleSize() } } - if (auto buttonHolderGrid = m_buttonHolderGrid.get()) - { - buttonHolderGrid.Width(width); - } - if (auto toggleButton = m_paneToggleButton.get()) { toggleButton.Width(togglePaneButtonWidth); @@ -3040,7 +3066,7 @@ void NavigationView::UpdatePaneToggleSize() } } -void NavigationView::UpdateBackButtonVisibility() +void NavigationView::UpdateBackAndCloseButtonsVisibility() { if (!m_appliedTemplate) { @@ -3056,6 +3082,11 @@ void NavigationView::UpdateBackButtonVisibility() backButton.Visibility(visibility); } + if (auto closeButton = m_closeButton.get()) + { + closeButton.Visibility(Util::VisibilityFromBool(ShouldShowCloseButton())); + } + if (auto paneContentGridAsUIE = m_paneContentGrid.get()) { if (auto paneContentGrid = paneContentGridAsUIE.try_as()) @@ -3064,7 +3095,7 @@ void NavigationView::UpdateBackButtonVisibility() auto rowDef = rowDefs.GetAt(c_backButtonRowDefinition); int backButtonRowHeight = 0; - if (!IsOverlay() && ShouldShowBackButton()) + if (!IsOverlay() && shouldShowBackButton) { backButtonRowHeight = c_backButtonHeight; } @@ -3323,6 +3354,10 @@ void NavigationView::UpdateTitleBarPadding() thickness = winrt::ThicknessHelper::FromLengths(0, c_backButtonHeight, 0, 0); } } + else if (ShouldShowCloseButton() && IsOverlay()) + { + thickness = winrt::ThicknessHelper::FromLengths(c_backButtonWidth, 0, 0, 0); + } paneButton.Margin(thickness); } } diff --git a/dev/NavigationView/NavigationView.h b/dev/NavigationView/NavigationView.h index 4dff2707c4..3c658e140a 100644 --- a/dev/NavigationView/NavigationView.h +++ b/dev/NavigationView/NavigationView.h @@ -153,7 +153,7 @@ class NavigationView : void UpdateSelectedItem(); void UpdatePaneTabFocusNavigation(); void UpdatePaneToggleSize(); - void UpdateBackButtonVisibility(); + void UpdateBackAndCloseButtonsVisibility(); void UpdatePaneTitleMargins(); void UpdateLeftNavListViewItemSource(const winrt::IInspectable& items); void UpdateTopNavListViewItemSource(const winrt::IInspectable& items); @@ -257,6 +257,8 @@ class NavigationView : bool IsOverlay(); bool IsLightDismissible(); bool ShouldShowBackButton(); + bool ShouldShowCloseButton(); + bool ShouldShowBackOrCloseButton(); void UnhookEventsAndClearFields(bool isFromDestructor = false); @@ -272,8 +274,8 @@ class NavigationView : tracker_ref m_paneContentGrid{ this }; tracker_ref m_paneSearchButton{ this }; tracker_ref m_backButton{ this }; + tracker_ref m_closeButton{ this }; tracker_ref m_paneTitleTextBlock{ this }; - tracker_ref m_buttonHolderGrid{ this }; tracker_ref m_leftNavListView{ this }; tracker_ref m_topNavListView{ this }; tracker_ref m_topNavOverflowButton{ this }; @@ -315,6 +317,7 @@ class NavigationView : winrt::CoreApplicationViewTitleBar::LayoutMetricsChanged_revoker m_titleBarMetricsChangedRevoker{}; winrt::CoreApplicationViewTitleBar::IsVisibleChanged_revoker m_titleBarIsVisibleChangedRevoker{}; winrt::Button::Click_revoker m_backButtonClickedRevoker{}; + winrt::Button::Click_revoker m_closeButtonClickedRevoker{}; winrt::ListView::ItemClick_revoker m_leftNavListViewItemClickRevoker{}; winrt::ListView::Loaded_revoker m_leftNavListViewLoadedRevoker{}; winrt::ListView::SelectionChanged_revoker m_leftNavListViewSelectionChangedRevoker{}; diff --git a/dev/NavigationView/NavigationView.xaml b/dev/NavigationView/NavigationView.xaml index ea959c0d6b..5fd4df9ca0 100644 --- a/dev/NavigationView/NavigationView.xaml +++ b/dev/NavigationView/NavigationView.xaml @@ -172,6 +172,14 @@ +