[iOS] Fixed LinearGradientBrush in Shell FlyoutBackground misaligned#32137
Merged
PureWeen merged 4 commits intodotnet:inflight/currentfrom Oct 31, 2025
Merged
[iOS] Fixed LinearGradientBrush in Shell FlyoutBackground misaligned#32137PureWeen merged 4 commits intodotnet:inflight/currentfrom
PureWeen merged 4 commits intodotnet:inflight/currentfrom
Conversation
Contributor
|
Hey there @@SubhikshaSf4851! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
Contributor
|
/azp run MAUI-UITests-public |
|
Azure Pipelines successfully started running 1 pipeline(s). |
jsuarezruiz
reviewed
Oct 22, 2025
| App.Tap("navigateButton"); | ||
| App.WaitForElement("welcomeLabel"); | ||
| App.SetOrientationPortrait(); | ||
| VerifyScreenshot(); |
Contributor
There was a problem hiding this comment.
Running a build, pending snapshots.
Contributor
Author
There was a problem hiding this comment.
I have updated the snapshots
jsuarezruiz
suggested changes
Oct 22, 2025
| UpdateFooterPosition(); | ||
| UpdateFlyoutContent(); | ||
| // Whenever the layout changes, the background needs to be redrawn to match the new view dimensions. This is especially important for gradients. | ||
| UpdateBackground(); |
Contributor
There was a problem hiding this comment.
I think UpdateBackground() will be called too frequently.
ViewWillLayoutSubviews() is called many times:
- Initial layout
- Orientation change
- Keyboard appearance
- Safe area inset changes
- Parent view layout changes
Can only redraw when size actually changes?
var currentSize = View.Bounds.Size;
if (_lastBackgroundSize != currentSize)
UpdateBackground();
Contributor
Author
There was a problem hiding this comment.
I have modified the changes
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a rendering issue where LinearGradientBrush in Shell FlyoutBackground was misaligned on iOS after layout changes, particularly during device orientation changes. The gradient wasn't updating because its offsets weren't recalculated when the view's layout changed.
Key Changes:
- Moved background update logic from
ViewDidLoadtoViewWillLayoutSubviewswith bounds checking - Added UI test to verify gradient rendering persists through orientation changes
Reviewed Changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellFlyoutContentRenderer.cs |
Moved UpdateBackground() call from ViewDidLoad to ViewWillLayoutSubviews with bounds tracking to redraw gradient on layout changes |
src/Controls/tests/TestCases.HostApp/Issues/Issue27822.cs |
Added test page demonstrating the gradient background issue in Shell flyout |
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue27822.cs |
Added automated UI test that verifies gradient rendering after orientation change |
Comment on lines
+230
to
+236
| var currentSize = View.Bounds.Size; | ||
| if (_previousBounds != currentSize) | ||
| { | ||
| // Whenever the layout changes, the background needs to be redrawn to match the new view dimensions. This is especially important for gradients. | ||
| UpdateBackground(); | ||
| _previousBounds = currentSize; | ||
| } |
There was a problem hiding this comment.
[nitpick] The background is redrawn on every layout change, which could be called multiple times during animations or layout passes. Consider adding a small tolerance check or debouncing to avoid unnecessary redraws during minor layout adjustments.
Contributor
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
jsuarezruiz
approved these changes
Oct 28, 2025
PureWeen
pushed a commit
that referenced
this pull request
Nov 11, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 11, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 14, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 15, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 15, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 18, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 18, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 18, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 20, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
github-actions bot
pushed a commit
that referenced
this pull request
Nov 20, 2025
…32137) * [iOS] Fix for Linear gradient not update * Updated TestCase * updated review changes * updated snapshots for iOS and android
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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!
RootCause
The gradient didn’t update after layout changes because its offsets weren’t recalculated when the view’s layout changed. Solid colors weren’t affected since they don’t depend on offsets.
Description of Change
Ensured the background is redrawn on every layout change by calling
UpdateBackground()inViewWillLayoutSubviewsinstead of only inViewDidLoadinShellFlyoutContentRenderer.cs, fixing gradient rendering issues.Issues Fixed
Fixes #27822
Tested the behavior in the following platforms
Screenshot
WithoutFixIssue27822.mp4
Untitled.4.mp4