Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NavView: Fix CornerRadius for overflow menu and NavViewItem children flyout menu #3082

Merged
merged 12 commits into from
Nov 7, 2020
Merged

NavView: Fix CornerRadius for overflow menu and NavViewItem children flyout menu #3082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
48ef691
Fix corner radius for the overflow menu and the children flyout menu.
Felix-Dev Aug 8, 2020
44b5450
Add two interaction tests.
Felix-Dev Aug 8, 2020
11ccea7
Small comment improvements.
Felix-Dev Aug 8, 2020
b9d5ae1
Small comment improvement.
Felix-Dev Aug 8, 2020
e81d4a0
Move top NavigationView specific overflow button tests from CommonTes…
Felix-Dev Aug 11, 2020
e931176
Merge branch 'master' into user/Felix-Dev/navview-flyouts-cornerradius
Felix-Dev Aug 17, 2020
5ed3d60
Merge branch 'master' into user/Felix-Dev/navview-flyouts-cornerradius
Felix-Dev Aug 18, 2020
803e0ed
fix merge conflicts
Felix-Dev Sep 3, 2020
ea4b4c3
Merge branch 'master' into user/Felix-Dev/navview-flyouts-cornerradius
Felix-Dev Sep 3, 2020
c4a4388
Fix merge conflicts.
Felix-Dev Nov 2, 2020
ed7c947
Now close opened flyout in API test before finishing.
Felix-Dev Nov 2, 2020
3a1b374
Rename FindElementOfTypeInParentTree -> FindVisualParentByType
Felix-Dev Nov 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions dev/NavigationView/NavigationView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,40 @@
<Setter Property="Padding" Value="{ThemeResource TopNavigationViewOverflowMenuPadding}" />
<!-- Set negative top margin to make the flyout align exactly with the button -->
<Setter Property="Margin" Value="0,-4,0,0" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" /> [](start = 56, length = 95)

Do we need the contract7NotPresent setter?

Copy link
Contributor Author

@Felix-Dev Felix-Dev Aug 10, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need it here because there is nothing really to set it to. The important contract7NotPresent setter is this one:

microsoft-ui-xaml/dev/NavigationView/NavigationView.xaml

Line 317 in b9d5ae1

contract7NotPresent:CornerRadius="{ThemeResource OverlayCornerRadius}"/>

The FlyoutPresenter.CornerRadius API is only available since 1809 so to get rounded corners on earlier Windows 10 versions, we use the contract7NotPresent setter above.

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<ScrollViewer
x:Name="ScrollViewer"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
ranjeshj marked this conversation as resolved.
Show resolved Hide resolved
AutomationProperties.AccessibilityView="Raw">
<ContentPresenter
x:Name="ContentPresenter"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
contract7NotPresent:CornerRadius="{ThemeResource OverlayCornerRadius}"/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
ranjeshj marked this conversation as resolved.
Show resolved Hide resolved
</Style>
</Flyout.FlyoutPresenterStyle>
<local:ItemsRepeaterScrollHost>
Expand Down Expand Up @@ -606,6 +640,40 @@
<Setter Property="Padding" Value="{ThemeResource NavigationViewItemChildrenMenuFlyoutPadding}" />
<!-- Set negative top margin to make the flyout align exactly with the button -->
<Setter Property="Margin" Value="0,-4,0,0" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<ScrollViewer
x:Name="ScrollViewer"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
AutomationProperties.AccessibilityView="Raw">
<ContentPresenter
x:Name="ContentPresenter"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
contract7NotPresent:CornerRadius="{ThemeResource OverlayCornerRadius}"/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Flyout.FlyoutPresenterStyle>
<Grid x:Name="FlyoutRootGrid">
Expand Down
64 changes: 50 additions & 14 deletions dev/NavigationView/NavigationView_InteractionTests/CommonTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1499,20 +1499,6 @@ public void VerifyShouldPreserveNavigationViewRS3Behavior()
}
}

[TestMethod]
public void VerifyMoreButtonIsOnlyReadOnce()
{
using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", "Top NavigationView Test" }))
{
UIObject moreButton = FindElement.ById("TopNavOverflowButton");
moreButton.SetFocus();
Wait.ForIdle();

AutomationElement ae = AutomationElement.FocusedElement;
Verify.AreEqual("More", ae.GetCurrentPropertyValue(AutomationElement.NameProperty).ToString());
}
}

[TestMethod]
public void EnsurePaneHeaderCanBeModifiedForLeftNav()
{
Expand Down Expand Up @@ -1732,5 +1718,55 @@ public void VerifyNavigationViewItemContentPresenterMargin()
Verify.AreEqual("0,0,20,0", contentPresenterMarginTextBlock.DocumentText);
}
}

[TestMethod]
public void VerifyNavigationViewItemChildrenFlyoutMenuCornerRadius()
{
using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", "HierarchicalNavigationView Markup Test" }))
{
Log.Comment("Set PaneDisplayMode to LeftCompact.");
var panelDisplayModeComboBox = new ComboBox(FindElement.ByName("PaneDisplayModeCombobox"));
panelDisplayModeComboBox.SelectItemByName("LeftCompact");
Wait.ForIdle();

VerifyChildrenFlyoutMenuCornerRadius();

// Refresh the cache to make sure that the flyout object we are going to be searching for
// does not return as a false positive due to the caching mechanism.
ElementCache.Clear();

Log.Comment("Set PaneDisplayMode to Top.");
panelDisplayModeComboBox.SelectItemByName("Top");
Wait.ForIdle();

VerifyChildrenFlyoutMenuCornerRadius();

void VerifyChildrenFlyoutMenuCornerRadius()
{
Log.Comment("Verify that the children menu flyout used in this test is closed.");
var childItem = FindElement.ByName("Menu Item 2");
Verify.IsNull(childItem, "Menu Item 1's children menu flyout should have been closed.");

Log.Comment("Select Menu Item 1 which should open children flyout.");
var item = FindElement.ByName("Menu Item 1");
InputHelper.LeftClick(item);
Wait.ForIdle();

childItem = FindElement.ByName("Menu Item 2");
Verify.IsNotNull(childItem, "Menu Item 1's children menu flyout should have been open.");

Log.Comment("Get CornerRadius of Menu Item 1's children menu flyout.");
FindElement.ByName<Button>("GetMenuItem1ChildrenFlyoutCornerRadiusButton").Invoke();

// A CornerRadius of (4,4,4,4) is the current default value for flyouts.
TextBlock menuItem1ChildrenFlyoutCornerRadiusTextBlock = new TextBlock(FindElement.ByName("MenuItem1ChildrenFlyoutCornerRadiusTextBlock"));
Verify.AreEqual("4,4,4,4", menuItem1ChildrenFlyoutCornerRadiusTextBlock.DocumentText);

// Close flyout
InputHelper.LeftClick(item);
Wait.ForIdle();
}
}
}
}
}
58 changes: 58 additions & 0 deletions dev/NavigationView/NavigationView_InteractionTests/TopModeTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,64 @@ public void TopNavigationOverflowButtonTest()
}
}

[TestMethod]
public void VerifyMoreButtonIsOnlyReadOnce()
{
using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", "Top NavigationView Test" }))
{
UIObject moreButton = FindElement.ById("TopNavOverflowButton");
moreButton.SetFocus();
Wait.ForIdle();

AutomationElement ae = AutomationElement.FocusedElement;
Verify.AreEqual("More", ae.GetCurrentPropertyValue(AutomationElement.NameProperty).ToString());
}
}

[TestMethod]
public void VerifyOverflowMenuCornerRadius()
{
using (var setup = new TestSetupHelper(new[] { "NavigationView Tests", "NavigationView TopNav Test" }))
{
Log.Comment("Verify that the overflow menu is closed.");
var overflowItemsHost = TryFindElement.ById("TopNavMenuItemsOverflowHost");
Verify.IsNull(overflowItemsHost, "Overflow menu should have been closed.");

Log.Comment("Open the overflow menu.");
GetOverflowButton().Click();
Wait.ForIdle();

Log.Comment("Verify that the overflow menu is open.");
overflowItemsHost = TryFindElement.ById("TopNavMenuItemsOverflowHost");
Verify.IsNotNull(overflowItemsHost, "Overflow menu should have been open.");

Log.Comment("Get CornerRadius of the overflow menu.");
FindElement.ByName<Button>("GetOverflowMenuCornerRadiusButton").Invoke();

// A CornerRadius of (4,4,4,4) is the current default value for flyouts.
TextBlock overflowMenuCornerRadiusTextBlock = new TextBlock(FindElement.ByName("OverflowMenuCornerRadiusTextBlock"));
Verify.AreEqual("4,4,4,4", overflowMenuCornerRadiusTextBlock.DocumentText);

UIObject GetOverflowButton()
{
Log.Comment("Add items until the overflow button shows up.");
var addItemButton = new Button(FindElement.ById("AddItemButton"));

UIObject overflowButton1 = TryFindElement.ById("TopNavOverflowButton");
while (overflowButton1 == null)
{
addItemButton.Click();
Log.Comment("Item added.");
Wait.ForIdle();

overflowButton1 = TryFindElement.ById("TopNavOverflowButton");
}

return overflowButton1;
}
}
}

[TestMethod]
public void TopNavigationSelectionTest()
{
Expand Down
19 changes: 15 additions & 4 deletions dev/NavigationView/TestUI/Hierarchical/HierarchicalNavigationViewMarkup.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,12 +115,23 @@
<TextBlock Grid.Column="3" x:Name="TextblockCollapsedItemAndContainerMatch" AutomationProperties.Name="TextblockCollapsedItemAndContainerMatch" Text="N/A"/>
</Grid>
</StackPanel>

<!-- NavigationViewItem children flyout corner radius test components -->
<StackPanel Margin="0,10,0,10">
<StackPanel Orientation="Horizontal">
<Button x:Name="GetMenuItem1ChildrenFlyoutCornerRadiusButton" AutomationProperties.Name="GetMenuItem1ChildrenFlyoutCornerRadiusButton" Content="GetMenuItem1ChildrenFlyoutCornerRadius"
Click="GetMenuItem1ChildrenFlyoutCornerRadiusButton_Click"/>
<TextBlock Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">CornerRadius:</TextBlock>
<TextBlock x:Name="MenuItem1ChildrenFlyoutCornerRadiusTextBlock" AutomationProperties.Name="MenuItem1ChildrenFlyoutCornerRadiusTextBlock" HorizontalAlignment="Center" VerticalAlignment="Center">-</TextBlock>
</StackPanel>
</StackPanel>

<!-- Combobox used to switch pane display modes -->
<ComboBox x:Name="PaneDisplayModeCombobox"
AutomationProperties.Name="PaneDisplayModeCombobox"
Header="PaneDisplayMode"
SelectionChanged="PaneDisplayModeCombobox_SelectionChanged"
Margin="5">
AutomationProperties.Name="PaneDisplayModeCombobox"
Header="PaneDisplayMode"
SelectionChanged="PaneDisplayModeCombobox_SelectionChanged"
Margin="5">
<ComboBoxItem Content="Auto" Tag="Auto"/>
<ComboBoxItem Content="Left" Tag="Left"/>
<ComboBoxItem Content="Top" Tag="Top"/>
Expand Down
11 changes: 11 additions & 0 deletions dev/NavigationView/TestUI/Hierarchical/HierarchicalNavigationViewMarkup.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
using NavigationViewItemExpandingEventArgs = Microsoft.UI.Xaml.Controls.NavigationViewItemExpandingEventArgs;
using NavigationViewItemCollapsedEventArgs = Microsoft.UI.Xaml.Controls.NavigationViewItemCollapsedEventArgs;
using NavigationViewPaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode;
using MUXControlsTestApp.Utilities;

namespace MUXControlsTestApp
{
Expand Down Expand Up @@ -121,5 +122,15 @@ private void PaneDisplayModeCombobox_SelectionChanged(object sender, SelectionCh
var mode = (NavigationViewPaneDisplayMode)Enum.Parse(typeof(NavigationViewPaneDisplayMode), tag);
navview.PaneDisplayMode = mode;
}

private void GetMenuItem1ChildrenFlyoutCornerRadiusButton_Click(object sender, RoutedEventArgs e)
{
var parent = MI2.FindVisualParentByType<FlyoutPresenter>();
if (parent is FlyoutPresenter flyoutPresenter)
{
var contentPresenter = flyoutPresenter.FindVisualChildByName("ContentPresenter") as ContentPresenter;
MenuItem1ChildrenFlyoutCornerRadiusTextBlock.Text = contentPresenter?.CornerRadius.ToString() ?? "Internal ContentPresenter not found";
}
}
}
}
Loading