[iOS] - Fix Custom FlyoutIcon from Being Overridden to Default Color in Shell by prakashKannanSf3972 · Pull Request #27580 · dotnet/maui

prakashKannanSf3972 · 2025-02-05T15:03:16Z

Issue: The color of the custom FlyoutIcon in Shell resets to the default blue instead of retaining its original color.

RootCause

By default, UIImageRenderingMode is set to Automatic, allowing the rendering behavior to be determined based on the UI context. When a custom FlyoutIcon is applied, it does not retain its original color but instead adapts to the predefined tinting behavior, leading to unintended color changes.

Description of Change

The image rendering mode is now set to UIImageRenderingMode.AlwaysOriginal, ensuring that custom icons maintain their original colors without being altered by default rendering behavior.

When no custom FlyoutIcon is set, its color can still be modified using Shell.ForegroundColor.
When a custom FlyoutIcon is applied, it now preserves its original image color without automatic tinting.
If color customization for the custom icon is needed, Shell.ForegroundColor should be set accordingly to allow the color modification to be applied.

Issues Fixed

Fixes #6738

Tested the behaviour in the following platforms

Android
Windows
iOS
Mac

Output

Before	After

Copilot

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

azure-pipelines · 2025-02-12T07:56:34Z

Azure Pipelines successfully started running 3 pipeline(s).

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/IssueShell6738.cs

jfversluis · 2025-02-19T09:06:00Z

src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs

 					icon = result?.Value;
+
+					var foregroundColor = _context.Shell.GetValue(Shell.ForegroundColorProperty);
+					if (foregroundColor is null)


What if I change the foreground color? Will it change back? Should there be an else statement that sets the UIImageRenderingMode the other way? Can we have that in a (additional) test that we can toggle between the colors here?

@jfversluis,

The Flyout icon updates its color correctly when the foreground color changes dynamically. It does not remain in UIImageRenderingMode.AlwaysOriginal since the image is always loaded with its default rendering mode, allowing it to adapt to the assigned ForegroundColor.

I have added a test to validate this behavior. Let me know if any further refinements are needed.

jfversluis

See comment above

rmarinho · 2025-03-20T11:29:45Z

/rebase

jsuarezruiz · 2025-05-26T07:17:44Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/IssueShell6738.cs

+			App.WaitForElement(defaultColor);
+			App.Tap(defaultColor);
+			App.WaitForElement(defaultColor);
+			VerifyScreenshot("EnsureFlyoutIconAsDefaultIconColor");


Pending snapshot on Mac.

Baseline snapshot not yet created: /Users/runner/work/1/s/artifacts/bin/Controls.TestCases.Mac.Tests/Release/net9.0/snapshots/mac/EnsureFlyoutIconAsDefaultIconColor.png Ensure new snapshot is correct: /Users/runner/work/1/a/Controls.TestCases.Shared.Tests/snapshots-diff/mac/EnsureFlyoutIconAsDefaultIconColor.png

@jsuarezruiz, Thank you for pointing this out. I have added the pending snapshot.

jsuarezruiz · 2025-05-27T07:16:18Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-05-27T07:16:29Z

Azure Pipelines successfully started running 1 pipeline(s).

jsuarezruiz · 2025-06-09T06:58:51Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-06-09T06:59:02Z

Azure Pipelines successfully started running 1 pipeline(s).

jsuarezruiz · 2025-06-09T07:15:43Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/IssueShell6738.cs

@@ -0,0 +1,43 @@
+#if TEST_FAILS_ON_WINDOWS && TEST_FAILS_ON_ANDROID


There is a parameter to include or not the TitleBar:

maui/src/Controls/tests/TestCases.Shared.Tests/UITest.cs

Line 186 in 8108c34

, bool includeTitleBar = false

Could you try it?

@jsuarezruiz, Yes, including the TitleBar helps clarify the issue with the FlyoutIcon on the Windows platform. Since there is an existing issue, where the ForegroundColor does not work as expected, it has already been reported and tracked in the following issue: #26148

StephaneDelcroix

PR Review: Approved ✅

Summary

This PR correctly fixes issue #6738 where custom FlyoutIcon colors in Shell were being overridden to iOS's default blue tint.

Fix Analysis

The solution uses UIImageRenderingMode.AlwaysOriginal when no ForegroundColor is set, which correctly preserves the custom icon's original colors while still allowing tinting when ForegroundColor is explicitly set.

Key changes reviewed:

✅ Property change handlers correctly trigger UpdateLeftToolbarItems() for ForegroundColorProperty
✅ Logic correctly checks both CurrentPage and Shell for ForegroundColor
✅ Test coverage is adequate for iOS/Mac (Windows/Android correctly excluded)
✅ Test file preprocessor directive #if TEST_FAILS_ON_WINDOWS && TEST_FAILS_ON_ANDROID correctly limits tests to iOS/Mac

Minor Suggestion (Optional)

Consider adding a defensive null check on icon before calling ImageWithRenderingMode():

if (foregroundColor is null && icon is not null)
{
    icon = icon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}

While unlikely to be null in practice (since image != null is already checked), this would be more defensive.

Tested

Built and ran reproduction scenario on iOS simulator
Confirmed the fix approach is correct for iOS/UIKit behavior

LGTM! 🚀

sheiksyedm · 2025-12-05T11:37:17Z

/azp run

azure-pipelines · 2025-12-05T11:37:38Z

Azure Pipelines successfully started running 3 pipeline(s).

changes made

dotnet-policy-service bot added the community ✨ Community Contribution label Feb 5, 2025

jsuarezruiz added the area-controls-shell Shell Navigation, Routes, Tabs, Flyout label Feb 6, 2025

sheiksyedm added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Feb 7, 2025

This comment was marked as off-topic.

Sign in to view

prakashKannanSf3972 marked this pull request as ready for review February 11, 2025 14:59

Copilot AI review requested due to automatic review settings February 11, 2025 14:59

prakashKannanSf3972 requested a review from a team as a code owner February 11, 2025 14:59

prakashKannanSf3972 requested review from PureWeen and mattleibow February 11, 2025 14:59

Copilot AI reviewed Feb 11, 2025

View reviewed changes

This comment was marked as off-topic.

Sign in to view

jsuarezruiz suggested changes Feb 12, 2025

View reviewed changes

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/IssueShell6738.cs Show resolved Hide resolved

This comment was marked as off-topic.

Sign in to view

jfversluis added this to the .NET 9 SR5 milestone Feb 19, 2025

github-actions bot force-pushed the fix-6738 branch from 821492b to 2057da3 Compare February 19, 2025 08:59

jfversluis reviewed Feb 19, 2025

View reviewed changes

jfversluis previously requested changes Feb 19, 2025

View reviewed changes

PureWeen modified the milestones: .NET 9 SR5, .NET 9 SR6 Mar 7, 2025

PureWeen added this to MAUI SDK Ongoing Mar 18, 2025

github-project-automation bot moved this to Todo in MAUI SDK Ongoing Mar 18, 2025

PureWeen moved this from Todo to Ready To Review in MAUI SDK Ongoing Mar 18, 2025

rmarinho changed the base branch from main to inflight/current March 20, 2025 11:28

dotnet deleted a comment from azure-pipelines bot Mar 20, 2025

dotnet deleted a comment from jfversluis Mar 20, 2025

dotnet deleted a comment from jsuarezruiz Mar 20, 2025

prakashKannanSf3972 force-pushed the fix-6738 branch from 8884344 to dfb21fd Compare March 20, 2025 12:11

jsuarezruiz suggested changes May 26, 2025

View reviewed changes

jsuarezruiz previously requested changes Jun 9, 2025

View reviewed changes

StephaneDelcroix previously approved these changes Dec 4, 2025

View reviewed changes

Tamilarasan-Paranthaman added platform/ios shell-flyout labels Dec 5, 2025

prakashKannanSf3972 added 9 commits December 5, 2025 15:14

Fixed-Custom-FlyoutIcon-Color

3c9d43b

Updated-Platform-Code

6e46382

Added-Mac-SnapShot

2b2191a

Fixed-Custom-FlyoutIcon-Color

a054979

Added-Test-And-Snapshot

a68c755

Modified-Test

725b015

Added-Pending-Mac-Snapshots

69ff0e5

Added-Pending-SnapShot

7eb7709

Modified-Changes

a3a0a3b

SyedAbdulAzeemSF4852 dismissed StephaneDelcroix’s stale review via a3a0a3b December 5, 2025 10:06

SyedAbdulAzeemSF4852 force-pushed the fix-6738 branch from 243b7c7 to a3a0a3b Compare December 5, 2025 10:06

Added Fix

c21a702

StephaneDelcroix approved these changes Dec 8, 2025

View reviewed changes

PureWeen mentioned this pull request Jan 7, 2026

January 5th, Candidate #33363

Merged

		@@ -0,0 +1,43 @@
		#if TEST_FAILS_ON_WINDOWS && TEST_FAILS_ON_ANDROID

Conversation

prakashKannanSf3972 commented Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue: The color of the custom FlyoutIcon in Shell resets to the default blue instead of retaining its original color.

RootCause

Description of Change

Issues Fixed

Output

Uh oh!

This comment was marked as off-topic.

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as off-topic.

azure-pipelines bot commented Feb 12, 2025

Uh oh!

Uh oh!

This comment was marked as off-topic.

jfversluis Feb 19, 2025

Choose a reason for hiding this comment

Uh oh!

prakashKannanSf3972 Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

jfversluis left a comment

Choose a reason for hiding this comment

Uh oh!

rmarinho commented Mar 20, 2025

Uh oh!

jsuarezruiz May 26, 2025

Choose a reason for hiding this comment

Uh oh!

prakashKannanSf3972 May 27, 2025

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented May 27, 2025

Uh oh!

azure-pipelines bot commented May 27, 2025

Uh oh!

jsuarezruiz commented Jun 9, 2025

Uh oh!

azure-pipelines bot commented Jun 9, 2025

Uh oh!

jsuarezruiz Jun 9, 2025

Choose a reason for hiding this comment

Uh oh!

prakashKannanSf3972 Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

StephaneDelcroix left a comment

Choose a reason for hiding this comment

PR Review: Approved ✅

Summary

Fix Analysis

Minor Suggestion (Optional)

Tested

Uh oh!

sheiksyedm commented Dec 5, 2025

Uh oh!

azure-pipelines bot commented Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

prakashKannanSf3972 commented Feb 5, 2025 •

edited

Loading