[iOS] Fix for Shell custom FlyoutIcon display problem #26016

Tamilarasan-Paranthaman · 2024-11-21T09:56:20Z

Issue: The flyout icon is aligned to the center instead of the left, causing the title to extend beyond the view.

Root Cause of the issue

The custom image size is too large, causing it to render in the center and leaving extra space on the left.

Description of Change

I resized the custom image to match the hamburger size using the UIGraphics concept and implemented caching to prevent redundant image rendering.

Reference for icon size: https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs#L450

Issues Fixed

Fixes #25920

Tested the behaviour in the following platforms

Android
Windows
iOS
Mac

Screenshot

iOS

Before Issue Fix	After Issue Fix

jsuarezruiz · 2024-11-21T11:59:58Z

/azp run

jsuarezruiz · 2024-11-26T12:15:15Z

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

@@ -336,7 +336,7 @@ void UpdateLeftToolbarItems()

 				if (image != null)
 				{
-					icon = result?.Value;
+					icon = ResizeImage(result?.Value, new CGSize(23f, 23f));


Is iOS the only one that doesn't resize?
Is this size correct under all the screen options? (@2x etc) https://developer.apple.com/design/human-interface-guidelines/toolbars

Is iOS the only one that doesn't resize? Is this size correct under all the screen options? (@2x etc) https://developer.apple.com/design/human-interface-guidelines/toolbars

@jsuarezruiz, I have tested the icon under all device screen options, and it works properly on all devices. The size I am using for the custom icon is based on the default Hamburger icon size. Please refer to the code below for your reference

Reference for icon size:

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

Line 495 in c363191

var rect = new CGRect(0, 0, 23f, 23f);

jsuarezruiz · 2024-11-26T12:15:54Z

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

@@ -0,0 +1,27 @@
+#if !WINDOWS
+// In Windows, the foreground color is not applied to the custom icon, 
+// so as of now, the test is not applicable for Windows.


Windows is the only one having a different behavior, right?
Could you open a new issue and include the link in the comment.

Windows is the only one having a different behavior, right? Could you open a new issue and include the link in the comment.

@jsuarezruiz, the new issue for the Windows platform has been logged and I have added a comment. Could you please check and provide your concerns if any?

maui/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue25920.cs

Line 2 in c363191

// https://github.com/dotnet/maui/issues/26148

azure-pipelines · 2024-12-03T11:16:19Z

Azure Pipelines successfully started running 3 pipeline(s).

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

azure-pipelines · 2024-12-12T20:08:42Z

Azure Pipelines successfully started running 3 pipeline(s).

PureWeen · 2025-01-15T22:47:09Z

/azp run

azure-pipelines · 2025-01-15T22:47:33Z

Azure Pipelines successfully started running 3 pipeline(s).

jsuarezruiz · 2025-01-16T10:36:13Z

/azp run

azure-pipelines · 2025-01-16T10:36:35Z

Azure Pipelines successfully started running 3 pipeline(s).

PureWeen

Can you split the android change out from this PR?

I think the resizing parts of this for the iOS Icon is going to need a little bit deeper of an analysis.

Like, I'm curious if users have an icon that's 30x30, or just slightly bigger than 40x40 if we want to resize.

Playing with the sandbox here's a few sizes

I don't know if we can force an opinion here on the size of that icon for users. If this is an issue in our template we should generate an image at the size it should be

30x30

23x23

40x40

Ahamed-Ali · 2025-01-31T15:37:01Z

Can you split the android change out from this PR?

I think the resizing parts of this for the iOS Icon is going to need a little bit deeper of an analysis.

Like, I'm curious if users have an icon that's 30x30, or just slightly bigger than 40x40 if we want to resize.

Playing with the sandbox here's a few sizes

I don't know if we can force an opinion here on the size of that icon for users. If this is an issue in our template we should generate an image at the size it should be

30x30

23x23

40x40

Hi @PureWeen , I have created a separate PR 27502 for Android changes. Please review it and share your concerns.

jsuarezruiz · 2025-02-26T10:14:44Z

/azp run

azure-pipelines · 2025-02-26T10:15:05Z

Azure Pipelines successfully started running 3 pipeline(s).

src/Graphics/src/Graphics/Platforms/iOS/UIImageExtensions.cs

jsuarezruiz · 2025-02-26T11:07:27Z

src/Graphics/src/Graphics/Platforms/iOS/UIImageExtensions.cs

+			if (maxResizeFactor > 1 && !shouldScaleUp)
+				return sourceImage;
+
+			return UIImage.FromImage(sourceImage.CGImage, sourceImage.CurrentScale / maxResizeFactor, sourceImage.Orientation);


UIImage.FromImage creates a new instance of UIImage with the specified parameters. Could modify the implementation to just transform the current one?

internal static UIImage ResizeImageSource(this UIImage sourceImage, nfloat maxWidth, nfloat maxHeight, CGSize originalImageSize, bool shouldScaleUp = false) { if (sourceImage?.CGImage is null) return null; maxWidth = (nfloat)Math.Min(maxWidth, originalImageSize.Width); maxHeight = (nfloat)Math.Min(maxHeight, originalImageSize.Height); var sourceSize = sourceImage.Size; var maxResizeFactor = (nfloat)Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height); if (maxResizeFactor > 1 && !shouldScaleUp) return sourceImage; var newSize = new CGSize(sourceSize.Width * maxResizeFactor, sourceSize.Height * maxResizeFactor); UIGraphics.BeginImageContextWithOptions(newSize, false, 0.0f); sourceImage.Draw(new CGRect(0, 0, newSize.Width, newSize.Height)); var resizedImage = UIGraphics.GetImageFromCurrentImageContext(); UIGraphics.EndImageContext(); return resizedImage; }

This approach uses the image context to resize the image, should be more efficient than creating a new instance.

@jsuarezruiz, previously, I used a similar drawing code without scaling in this PR. As per @mattleibow
suggestion, I utilized the ResizeImageSource method from Button.iOS and have now moved it to the UIImageExtensions class as discussed.

Do I need to modify the existing code as you suggested?

please check the previous discussion and share the details:
#26016 (comment)

yeah for now we can just keep this as is, but maybe create a issue to in another PR try refactor the code to what @jsuarezruiz says

jsuarezruiz · 2025-02-27T09:01:22Z

@PureWeen Should these changes be a Platform Specific similar to #28046? In that case, should target to the net10.0 branch?

jsuarezruiz · 2025-03-26T08:44:21Z

/rebase

…related test and fix

rmarinho · 2025-07-23T11:25:34Z

/azp run

azure-pipelines · 2025-07-23T11:25:57Z

Azure Pipelines successfully started running 3 pipeline(s).

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

src/Graphics/src/Graphics/Platforms/iOS/UIImageExtensions.cs

rmarinho

Address some review feedback and suggestions

rmarinho · 2025-07-23T11:28:30Z

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -219,4 +219,4 @@ body:
  - type: markdown
    attributes:
      value: |
-        By opening the issue you agree to follow this project's [Code of Conduct](https://github.com/dotnet/maui/blob/main/.github/CODE_OF_CONDUCT.md)
+        By opening the issue you agree to follow this project's [Code of Conduct](https://github.com/dotnet/maui/blob/main/.github/CODE_OF_CONDUCT.md)


its adding spaces instead of tabs

Tamilarasan-Paranthaman · 2025-07-24T07:22:27Z

its adding spaces instead of tabs

@rmarinho, Even though I copied the file content from the base branch to my branch and there were no actual changes to push, it's showing as a difference only in the PR, even though there are no real changes locally.

rmarinho · 2025-07-24T15:38:06Z

/azp run

azure-pipelines · 2025-07-24T15:38:29Z

Azure Pipelines successfully started running 3 pipeline(s).

rmarinho · 2025-07-24T16:19:46Z

I saw some issues that I don t think are related to this PR, but seems .svg doesn t work as icon source, and changing the image to avatar.png produce this.

Simulator Screenshot - iPhone Xs (iOS 18 0) - created by XHarness - 2025-07-24 at 17 19 10

rmarinho · 2025-07-24T16:23:28Z

And cover1.jpg

Simulator Screenshot - iPhone Xs (iOS 18 0) - created by XHarness - 2025-07-24 at 17 22 55

rmarinho

I saw some issues, but they also reproduce on main, the size/resize of the icon works well this this PR .

dotnet-policy-service bot added the community ✨ Community Contribution label Nov 21, 2024

jsuarezruiz added platform/ios area-controls-shell Shell Navigation, Routes, Tabs, Flyout labels Nov 21, 2024

This comment was marked as outdated.

Sign in to view

Tamilarasan-Paranthaman marked this pull request as ready for review November 21, 2024 13:19

Tamilarasan-Paranthaman requested a review from a team as a code owner November 21, 2024 13:20

Tamilarasan-Paranthaman requested review from jfversluis and mattleibow November 21, 2024 13:20

jsuarezruiz requested changes Nov 26, 2024

View reviewed changes

mattleibow reviewed Dec 5, 2024

View reviewed changes

src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs Outdated Show resolved Hide resolved

sheiksyedm added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Dec 6, 2024

PureWeen self-assigned this Dec 12, 2024

PureWeen requested changes Jan 30, 2025

View reviewed changes

Tamilarasan-Paranthaman changed the title ~~[iOS] [Android] Fix for Shell custom FlyoutIcon display problem~~ [iOS] Fix for Shell custom FlyoutIcon display problem Jan 31, 2025

jsuarezruiz requested changes Feb 26, 2025

View reviewed changes

github-actions bot force-pushed the fix-25920 branch from 2c23c5f to b493d9a Compare March 26, 2025 08:44

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

dotnet deleted a comment from jsuarezruiz Mar 31, 2025

Ahamed-Ali and others added 3 commits July 23, 2025 11:48

Integrate the changes of AppContext and include the other FlyoutPage …

b011b91

…related test and fix

Revert unwanted changes

bed5a23

Revert unwanted changes

abec60b

Tamilarasan-Paranthaman force-pushed the fix-25920 branch from b87ff23 to abec60b Compare July 23, 2025 06:19

Tamilarasan-Paranthaman added 2 commits July 23, 2025 11:58

Revert unwanted changes

c5d4607

Revert changes

281213c

Tamilarasan-Paranthaman force-pushed the fix-25920 branch from 6ffe51f to 281213c Compare July 23, 2025 06:32

Removed the AppContext Change and keep the resizing change

552e724

rmarinho reviewed Jul 23, 2025

View reviewed changes

src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs Show resolved Hide resolved

rmarinho reviewed Jul 23, 2025

View reviewed changes

src/Graphics/src/Graphics/Platforms/iOS/UIImageExtensions.cs Outdated Show resolved Hide resolved

rmarinho reviewed Jul 23, 2025

View reviewed changes

Ahamed-Ali added 3 commits July 24, 2025 07:12

Reverting unwanted space changes in apiscan.yml

ca4d4bb

indentation change

55f62bd

Optimized the code

ec81088

rmarinho requested review from rmarinho, PureWeen and jsuarezruiz July 24, 2025 15:39

rmarinho approved these changes Jul 24, 2025

View reviewed changes

dotnet deleted a comment from PureWeen Jul 24, 2025

dotnet deleted a comment from jsuarezruiz Jul 24, 2025

dotnet deleted a comment from azure-pipelines bot Jul 24, 2025

rmarinho merged commit 93bfe35 into dotnet:net10.0 Jul 25, 2025
131 checks passed

github-project-automation bot moved this from Changes Requested to Done in MAUI SDK Ongoing Jul 25, 2025

[iOS] Fix for Shell custom FlyoutIcon display problem #26016

[iOS] Fix for Shell custom FlyoutIcon display problem #26016

Uh oh!

Conversation

Tamilarasan-Paranthaman commented Nov 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue: The flyout icon is aligned to the center instead of the left, causing the title to extend beyond the view.

Root Cause of the issue

Description of Change

Issues Fixed

Tested the behaviour in the following platforms

Screenshot

Uh oh!

jsuarezruiz commented Nov 21, 2024 • edited by jfversluis Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

azure-pipelines bot commented Dec 3, 2024

Uh oh!

Uh oh!

azure-pipelines bot commented Dec 12, 2024

Uh oh!

PureWeen commented Jan 15, 2025

Uh oh!

azure-pipelines bot commented Jan 15, 2025

Uh oh!

jsuarezruiz commented Jan 16, 2025

Uh oh!

azure-pipelines bot commented Jan 16, 2025

Uh oh!

PureWeen left a comment

Choose a reason for hiding this comment

Uh oh!

Ahamed-Ali commented Jan 31, 2025

Uh oh!

jsuarezruiz commented Feb 26, 2025

Uh oh!

azure-pipelines bot commented Feb 26, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented Feb 27, 2025

Uh oh!

jsuarezruiz commented Mar 26, 2025

Uh oh!

rmarinho commented Jul 23, 2025

Uh oh!

azure-pipelines bot commented Jul 23, 2025

Uh oh!

Uh oh!

Uh oh!

rmarinho left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Tamilarasan-Paranthaman commented Jul 24, 2025

Uh oh!

rmarinho commented Jul 24, 2025

Uh oh!

azure-pipelines bot commented Jul 24, 2025

Uh oh!

rmarinho commented Jul 24, 2025

Uh oh!

rmarinho commented Jul 24, 2025

Uh oh!

rmarinho left a comment

Tamilarasan-Paranthaman commented Nov 21, 2024 •

edited

Loading

jsuarezruiz commented Nov 21, 2024 •

edited by jfversluis

Loading