Skip to content

Commit

Permalink
NavigationView: Adding close button in MinimalLeft display mode (#1016)
Browse files Browse the repository at this point in the history 
* Adding Close button to NavigationView's LeftMinimal PaneDisplayMode for Issue #563.

* Applying PR feedback.
  • Loading branch information
@RBrid
RBrid authored Jul 9, 2019
1 parent 6541430 commit 5bb8e98
Show file tree
Hide file tree
Showing 73 changed files with 287 additions and 226 deletions.
83 changes: 59 additions & 24 deletions dev/NavigationView/NavigationView.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -108,8 +110,6 @@ void NavigationView::UnhookEventsAndClearFields(bool isFromDestructor)

m_paneSearchButtonClickRevoker.revoke();
m_paneSearchButton.set(nullptr);

m_buttonHolderGrid.set(nullptr);
}

NavigationView::NavigationView()
Expand Down Expand Up @@ -337,6 +337,21 @@ void NavigationView::OnApplyTemplate()
backButtonToolTip.Content(box_value(navigationBackButtonToolTip));
}

if (auto closeButton = GetTemplateChildT<winrt::Button>(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<winrt::ToolTip>(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
Expand Down Expand Up @@ -370,7 +385,7 @@ void NavigationView::OnApplyTemplate()
UpdateHeaderVisibility();
UpdateTitleBarPadding();
UpdatePaneTabFocusNavigation();
UpdateBackButtonVisibility();
UpdateBackAndCloseButtonsVisibility();
UpdateSingleSelectionFollowsFocusTemplateSetting();
UpdateNavigationViewUseSystemVisual();
PropagateNavigationViewAsParent();
Expand Down Expand Up @@ -524,7 +539,7 @@ void NavigationView::OnSizeChanged(winrt::IInspectable const& /*sender*/, winrt:
auto width = args.NewSize().Width;
UpdateAdaptiveLayout(width);
UpdateTitleBarPadding();
UpdateBackButtonVisibility();
UpdateBackAndCloseButtonsVisibility();
UpdatePaneTitleMargins();
}

Expand Down Expand Up @@ -758,7 +773,7 @@ void NavigationView::UpdateIsClosedCompact()
}

UpdateTitleBarPadding();
UpdateBackButtonVisibility();
UpdateBackAndCloseButtonsVisibility();
UpdatePaneTitleMargins();
UpdatePaneToggleSize();
}
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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)
Expand All @@ -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<float>::max());
return static_cast<float>(width);
}
Expand Down Expand Up @@ -2605,7 +2636,7 @@ void NavigationView::OnPropertyChanged(const winrt::DependencyPropertyChangedEve
}
else if (property == s_IsBackButtonVisibleProperty)
{
UpdateBackButtonVisibility();
UpdateBackAndCloseButtonsVisibility();
UpdateAdaptiveLayout(ActualWidth());
if (IsTopNavigationView())
{
Expand Down Expand Up @@ -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()))
{
Expand All @@ -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);
Expand All @@ -3040,7 +3066,7 @@ void NavigationView::UpdatePaneToggleSize()
}
}

void NavigationView::UpdateBackButtonVisibility()
void NavigationView::UpdateBackAndCloseButtonsVisibility()
{
if (!m_appliedTemplate)
{
Expand All @@ -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<winrt::Grid>())
Expand All @@ -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;
}
Expand Down Expand Up @@ -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);
}
}
Expand Down
7 changes: 5 additions & 2 deletions dev/NavigationView/NavigationView.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -257,6 +257,8 @@ class NavigationView :
bool IsOverlay();
bool IsLightDismissible();
bool ShouldShowBackButton();
bool ShouldShowCloseButton();
bool ShouldShowBackOrCloseButton();

void UnhookEventsAndClearFields(bool isFromDestructor = false);

Expand All @@ -272,8 +274,8 @@ class NavigationView :
tracker_ref<winrt::UIElement> m_paneContentGrid{ this };
tracker_ref<winrt::Button> m_paneSearchButton{ this };
tracker_ref<winrt::Button> m_backButton{ this };
tracker_ref<winrt::Button> m_closeButton{ this };
tracker_ref<winrt::TextBlock> m_paneTitleTextBlock{ this };
tracker_ref<winrt::Grid> m_buttonHolderGrid{ this };
tracker_ref<winrt::ListView> m_leftNavListView{ this };
tracker_ref<winrt::ListView> m_topNavListView{ this };
tracker_ref<winrt::Button> m_topNavOverflowButton{ this };
Expand Down Expand Up @@ -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{};
Expand Down
8 changes: 8 additions & 0 deletions dev/NavigationView/NavigationView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,14 @@
<ToolTip x:Name="NavigationViewBackButtonToolTip"/>
</ToolTipService.ToolTip>
</Button>
<Button
x:Name="NavigationViewCloseButton"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top">
<ToolTipService.ToolTip>
<ToolTip x:Name="NavigationViewCloseButtonToolTip"/>
</ToolTipService.ToolTip>
</Button>
<Button
x:Name="TogglePaneButton"
Style="{TemplateBinding PaneToggleButtonStyle}"
Expand Down
Loading

0 comments on commit 5bb8e98

Please sign in to comment.