[Windows] Fix unwanted corner radius in Shell flyout items#31937
[Windows] Fix unwanted corner radius in Shell flyout items#31937PureWeen merged 3 commits intodotnet:inflight/currentfrom
Conversation
|
Hey there @@Shalini-Ashokan! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
| // It causes the content to not be flush up against the title bar | ||
| PaneContentGrid.Margin = new WThickness(0, 0, 0, 0); | ||
| UpdateMenuItemsContainerHeight(); | ||
| RootSplitView.CornerRadius = new UI.Xaml.CornerRadius(0); |
There was a problem hiding this comment.
Could be possible to apply the fix in the NavigationView Resources?
In that way, developers that would like to keep the previous behavior or override it, can do easily just creating single resources and not require to override classes.
There was a problem hiding this comment.
@jsuarezruiz, Thank you for the suggestion! After investigating WinUI's NavigationView template, I found that RootSplitView uses the OverlayCornerRadius resource key directly, and changing this global key would affect all overlay scenarios. Since there's no specific resource key for NavigationView's RootSplitView CornerRadius, the C# approach ensures we only target our specific NavigationView instance without impacting other UI elements.
There was a problem hiding this comment.
Pull Request Overview
This PR fixes an issue where Shell flyout items on Windows displayed unwanted corner radius styling when no explicit styling was applied. The root cause was NavigationView's RootSplitView container having a default corner radius in the WinUI control template.
- Explicitly sets corner radius to zero for both RootSplitView and the NavigationView itself
- Adds UI test infrastructure to validate the fix
- Ensures visual consistency across platforms for Shell flyout items
Reviewed Changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/Core/src/Platform/Windows/MauiNavigationView.cs | Sets corner radius to zero for RootSplitView and NavigationView in OnApplyTemplate method |
| src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue17414.cs | Adds NUnit test to verify flyout content has no default corner radius |
| src/Controls/tests/TestCases.HostApp/Issues/Issue17414.cs | Creates test Shell with flyout behavior to demonstrate the fix |
|
|
||
| public class Issue17414 : _IssuesUITest | ||
| { | ||
| public override string Issue => "Default styling for controls does not work"; |
There was a problem hiding this comment.
The issue description is generic and doesn't accurately describe the specific problem being tested. It should be more specific: 'Shell flyout items display unwanted corner radius on Windows' to match the actual issue being addressed.
| public override string Issue => "Default styling for controls does not work"; | |
| public override string Issue => "Shell flyout items display unwanted corner radius on Windows"; |
| @@ -0,0 +1,35 @@ | |||
| namespace Maui.Controls.Sample.Issues; | |||
|
|
|||
| [Issue(IssueTracker.Github, 17414, "Default styling for controls does not work", PlatformAffected.UWP)] | |||
There was a problem hiding this comment.
The issue description is generic and doesn't match the specific problem. It should be 'Shell flyout items display unwanted corner radius on Windows'. Also, PlatformAffected.UWP should be PlatformAffected.Windows to align with current .NET MAUI platform naming conventions.
| [Issue(IssueTracker.Github, 17414, "Default styling for controls does not work", PlatformAffected.UWP)] | |
| [Issue(IssueTracker.Github, 17414, "Shell flyout items display unwanted corner radius on Windows", PlatformAffected.Windows)] |
* Set a RootSplitView corner radius to Zero. * Fixed the transparency issue at the corner * Added test case
* Set a RootSplitView corner radius to Zero. * Fixed the transparency issue at the corner * Added test case
Note
Are you waiting for the changes in this PR to be merged?
It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!
Issue Details
Shell flyout items on Windows display unwanted corner radius styling when no explicit styling is applied.
Root Cause
NavigationView's RootSplitView container has a corner radius applied by default in the WinUI control template, which creates visual inconsistency.
Description of Change
Modified the default corner radius to zero by explicitly setting
RootSplitView.CornerRadius = new Microsoft.UI.Xaml.CornerRadius(0)in the MauiNavigationView.OnApplyTemplate() method.Validated the behavior in the following platforms
Issues Fixed
Fixes #17414
Output ScreenShot