Skip to content

Commit

Permalink
Add padding to the NavigationViewItem to avoid occluding expand/colla…
Browse files Browse the repository at this point in the history 
…pse 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
  • Loading branch information
@Felix-Dev
Felix-Dev authored Jun 18, 2020
1 parent a0f4581 commit 8811c96
Show file tree
Hide file tree
Showing 29 changed files with 387 additions and 344 deletions.
15 changes: 11 additions & 4 deletions dev/NavigationView/NavigationViewItem.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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());
}
Expand All @@ -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);
}
}
}

Expand Down
15 changes: 14 additions & 1 deletion dev/NavigationView/NavigationViewItemPresenter.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ void NavigationViewItemPresenter::UpdateMargin()
}
}


void NavigationViewItemPresenter::UpdateCompactPaneLength(double compactPaneLength, bool shouldUpdate)
{
m_compactPaneLengthValue = compactPaneLength;
Expand All @@ -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*/);
}
2 changes: 2 additions & 0 deletions dev/NavigationView/NavigationViewItemPresenter.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ class NavigationViewItemPresenter:

void UpdateCompactPaneLength(double compactPaneLength,bool shouldUpdate);

void UpdateClosedCompactVisualState(bool isTopLevelItem, bool isClosedCompact);

private:
NavigationViewItem * GetNavigationViewItem();
void UpdateMargin();
Expand Down
29 changes: 25 additions & 4 deletions dev/NavigationView/NavigationView_rs1_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,11 +248,14 @@
<Thickness x:Key="NavigationViewItemSeparatorMargin">16,10</Thickness>
<Thickness x:Key="NavigationViewCompactItemSeparatorMargin">16,10</Thickness>
<Thickness x:Key="TopNavigationViewItemSeparatorMargin">10,0</Thickness>
<Thickness x:Key="NavigationViewItemContentPresenterMargin">0,0,16,0</Thickness>
<Thickness x:Key="NavigationViewItemContentPresenterMargin">0,0,20,0</Thickness>
<Thickness x:Key="NavigationViewCompactItemContentPresenterMargin">0,0,16,0</Thickness>
<Thickness x:Key="TopNavigationViewItemContentPresenterMargin">8,0,16,0</Thickness>
<Thickness x:Key="NavigationViewItemExpandChevronMargin">-16,0,0,0</Thickness>
<Thickness x:Key="NavigationViewItemExpandChevronMargin">-20,0,6,0</Thickness>
<Thickness x:Key="TopNavigationViewItemExpandChevronMargin">-16,0,0,0</Thickness>
<Thickness x:Key="TopNavigationViewItemOnOverflowContentPresenterMargin">12,0,16,0</Thickness>
<Thickness x:Key="TopNavigationViewItemOnOverflowContentPresenterMargin">12,0,20,0</Thickness>
<Thickness x:Key="TopNavigationViewItemOnOverflowNoIconContentPresenterMargin">16,0,20,0</Thickness>
<Thickness x:Key="TopNavigationViewItemOnOverflowExpandChevronMargin">-4,0,6,0</Thickness>
<Thickness x:Key="TopNavigationViewItemOnOverflowExpandChevronPadding">12,0,12,0</Thickness>

<x:String x:Key="NavigationViewItemExpandedGlyph">&#xE70D;</x:String>
Expand Down Expand Up @@ -626,6 +629,15 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="PaneAndTopLevelItemStates">
<VisualState x:Name="NotClosedCompactAndTopLevelItem" />
<VisualState x:Name="ClosedCompactAndTopLevelItem">
<VisualState.Setters>
<Setter Target="ContentPresenter.Margin" Value="{ThemeResource NavigationViewCompactItemContentPresenterMargin}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Border
Expand Down Expand Up @@ -785,6 +797,14 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="PaneAndTopLevelItemStates">
<VisualState x:Name="NotClosedCompactAndTopLevelItem" />
<VisualState x:Name="ClosedCompactAndTopLevelItem">
<VisualState.Setters>
<Setter Target="ContentPresenter.Margin" Value="{ThemeResource NavigationViewCompactItemContentPresenterMargin}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Border
Expand Down Expand Up @@ -1408,7 +1428,7 @@
<VisualState x:Name="ContentOnly">
<VisualState.Setters>
<Setter Target="IconBox.Visibility" Value="Collapsed" />
<Setter Target="ContentPresenter.Margin" Value="16,0" />
<Setter Target="ContentPresenter.Margin" Value="{ThemeResource TopNavigationViewItemOnOverflowNoIconContentPresenterMargin}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down Expand Up @@ -1482,6 +1502,7 @@
Visibility="Collapsed"
HorizontalAlignment="Right"
Width="40"
Margin="{ThemeResource TopNavigationViewItemOnOverflowExpandChevronMargin}"
Padding="{ThemeResource TopNavigationViewItemOnOverflowExpandChevronPadding}"
Background="Transparent">
<TextBlock Foreground="{ThemeResource NavigationViewItemForeground}"
Expand Down
18 changes: 9 additions & 9 deletions test/MUXControlsTestApp/master/NavigationViewAuto-5.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1040,13 +1040,13 @@
BorderBrush=[NULL]
Background=[NULL]
Name=ContentPresenter
Margin=0,0,16,0
Margin=0,0,20,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#FF000000
Visibility=Visible
RenderSize=64,20
RenderSize=60,20
[Windows.UI.Xaml.Controls.TextBlock]
Padding=0,0,0,0
Foreground=#FF000000
Expand All @@ -1065,7 +1065,7 @@
Background=#00FFFFFF
Width=40
Name=ExpandCollapseChevron
Margin=-16,0,0,0
Margin=-20,0,6,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
Expand Down Expand Up @@ -1296,13 +1296,13 @@
BorderBrush=[NULL]
Background=[NULL]
Name=ContentPresenter
Margin=0,0,16,0
Margin=0,0,20,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#FF000000
Visibility=Visible
RenderSize=64,20
RenderSize=60,20
[Windows.UI.Xaml.Controls.TextBlock]
Padding=0,0,0,0
Foreground=#FF000000
Expand All @@ -1321,7 +1321,7 @@
Background=#00FFFFFF
Width=40
Name=ExpandCollapseChevron
Margin=-16,0,0,0
Margin=-20,0,6,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
Expand Down Expand Up @@ -1653,13 +1653,13 @@
BorderBrush=[NULL]
Background=[NULL]
Name=ContentPresenter
Margin=0,0,16,0
Margin=0,0,20,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#FF000000
Visibility=Visible
RenderSize=64,20
RenderSize=60,20
[Windows.UI.Xaml.Controls.TextBlock]
Padding=0,0,0,0
Foreground=#FF000000
Expand All @@ -1678,7 +1678,7 @@
Background=#00FFFFFF
Width=40
Name=ExpandCollapseChevron
Margin=-16,0,0,0
Margin=-20,0,6,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
Expand Down
18 changes: 9 additions & 9 deletions test/MUXControlsTestApp/master/NavigationViewAuto-6.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1040,13 +1040,13 @@
BorderBrush=[NULL]
Background=[NULL]
Name=ContentPresenter
Margin=0,0,16,0
Margin=0,0,20,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#FF000000
Visibility=Visible
RenderSize=64,20
RenderSize=60,20
[Windows.UI.Xaml.Controls.TextBlock]
Padding=0,0,0,0
Foreground=#FF000000
Expand All @@ -1065,7 +1065,7 @@
Background=#00FFFFFF
Width=40
Name=ExpandCollapseChevron
Margin=-16,0,0,0
Margin=-20,0,6,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
Expand Down Expand Up @@ -1296,13 +1296,13 @@
BorderBrush=[NULL]
Background=[NULL]
Name=ContentPresenter
Margin=0,0,16,0
Margin=0,0,20,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#FF000000
Visibility=Visible
RenderSize=64,20
RenderSize=60,20
[Windows.UI.Xaml.Controls.TextBlock]
Padding=0,0,0,0
Foreground=#FF000000
Expand All @@ -1321,7 +1321,7 @@
Background=#00FFFFFF
Width=40
Name=ExpandCollapseChevron
Margin=-16,0,0,0
Margin=-20,0,6,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
Expand Down Expand Up @@ -1653,13 +1653,13 @@
BorderBrush=[NULL]
Background=[NULL]
Name=ContentPresenter
Margin=0,0,16,0
Margin=0,0,20,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
FocusVisualPrimaryBrush=#FF000000
Visibility=Visible
RenderSize=64,20
RenderSize=60,20
[Windows.UI.Xaml.Controls.TextBlock]
Padding=0,0,0,0
Foreground=#FF000000
Expand All @@ -1678,7 +1678,7 @@
Background=#00FFFFFF
Width=40
Name=ExpandCollapseChevron
Margin=-16,0,0,0
Margin=-20,0,6,0
FocusVisualSecondaryThickness=1,1,1,1
FocusVisualSecondaryBrush=#99FFFFFF
FocusVisualPrimaryThickness=2,2,2,2
Expand Down
Loading

0 comments on commit 8811c96

Please sign in to comment.