[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).

mattleibow · 2024-12-05T17:05:13Z

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

+				}
+			}
+		}
+		UIImage ResizeImage(UIImage sourceImage, CGSize targetSize)


This creates a new image with new data, and potentially wastes memory. I feel like we have this problem solved somewhere before that just scales the image. Let me see...

This place:

maui/src/Controls/src/Core/Button/Button.iOS.cs

Lines 433 to 449 in af94a22

static UIImage ResizeImageSource(UIImage sourceImage, nfloat maxWidth, nfloat maxHeight, CGSize originalImageSize, bool shouldScaleUp = false)

{

if (sourceImage is null || sourceImage.CGImage is null)

return null;

maxWidth = (nfloat)Math.Min(maxWidth, originalImageSize.Width);

maxHeight = (nfloat)Math.Min(maxHeight, originalImageSize.Height);

var sourceSize = sourceImage.Size;

float maxResizeFactor = (float)Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);

if (maxResizeFactor > 1 && !shouldScaleUp)

return sourceImage;

return UIImage.FromImage(sourceImage.CGImage, sourceImage.CurrentScale / maxResizeFactor, sourceImage.Orientation);

}

I think we can maybe extract this into some helper class, maybe an extension for UIImage?

Also, we probably want to preserve aspect ratio, the code sourceImage.Draw(new CGRect(0, 0, targetSize.Width, targetSize.Height)); will stretch in this PR. So the scaling way we have in button is probably safer.

@mattleibow, Thank you for the suggestion. I have moved the ResizeImageSource method from Button.iOS to the UIImageExtensions class. I applied the same logic in the ShellPageRendererTracker for the custom FlyoutIcon and also updated the button related code. Could you please review these changes and let me know if you have any concerns?

…n/maui into fix-25920

PureWeen · 2024-12-12T20:08:19Z

/azp run

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-05T12:12:19Z

/azp run

azure-pipelines · 2025-02-05T12:12:41Z

Azure Pipelines successfully started running 3 pipeline(s).

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

/azp run

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

Azure Pipelines successfully started running 3 pipeline(s).

jsuarezruiz · 2025-02-26T11:01:38Z

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

@@ -25,6 +26,24 @@ public static UIImage ScaleImage(this UIImage target, float maxWidth, float maxH
 			return ScaleImage(target, new CGSize(targetWidth, targetHeight), disposeOriginal);
 		}

+		internal static UIImage ResizeImageSource(this UIImage sourceImage, nfloat maxWidth, nfloat maxHeight, CGSize originalImageSize, bool shouldScaleUp = false)
+		{
+			if (sourceImage is null || sourceImage.CGImage is null)


Can use the null-conditional operator to simplify the check:
if (sourceImage?.CGImage is null)

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.

Tamilarasan-Paranthaman added 2 commits November 21, 2024 11:16

Shell FlyoutIcon color

72b7bed

Test script changes.

b5de700

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

Added snapshots.

c3cb4f7

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

test script changes.

c363191

Merge branch 'dotnet:main' into fix-25920

118ad13

mattleibow reviewed Dec 5, 2024

View reviewed changes

Tamilarasan-Paranthaman added 3 commits December 6, 2024 17:19

Optimized the code changes

2be5785

Merge branch 'fix-25920' of https://github.com/Tamilarasan-Paranthama…

098cf8f

…n/maui into fix-25920

Revert the changes

2752f1c

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

PureWeen self-assigned this Dec 12, 2024

Tamilarasan-Paranthaman added 2 commits January 16, 2025 12:15

Merge remote-tracking branch 'upstream/main' into fix-25920

37cea0d

Added snapshot for Mac

2140eb9

PureWeen requested changes Jan 30, 2025

View reviewed changes

Revert Android changes

22b0e23

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

Merge remote-tracking branch 'upstream/main' into fix-25920

0680c34

Merge branch 'main' into fix-25920

0095c63

jsuarezruiz requested changes Feb 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Tamilarasan-Paranthaman commented Nov 21, 2024 •

edited

Loading

jsuarezruiz commented Nov 21, 2024 •

edited by jfversluis

Loading

This comment was marked as outdated.

jsuarezruiz Nov 26, 2024

Tamilarasan-Paranthaman Nov 27, 2024

jsuarezruiz Nov 26, 2024

Tamilarasan-Paranthaman Nov 27, 2024

azure-pipelines bot commented Dec 3, 2024

mattleibow Dec 5, 2024

mattleibow Dec 5, 2024

mattleibow Dec 5, 2024

Tamilarasan-Paranthaman Dec 6, 2024

PureWeen commented Dec 12, 2024

azure-pipelines bot commented Dec 12, 2024

PureWeen commented Jan 15, 2025

azure-pipelines bot commented Jan 15, 2025

jsuarezruiz commented Jan 16, 2025

azure-pipelines bot commented Jan 16, 2025

PureWeen left a comment

Ahamed-Ali commented Jan 31, 2025

jsuarezruiz commented Feb 5, 2025

azure-pipelines bot commented Feb 5, 2025

jsuarezruiz commented Feb 26, 2025

azure-pipelines bot commented Feb 26, 2025

jsuarezruiz Feb 26, 2025

jsuarezruiz Feb 26, 2025

	static UIImage ResizeImageSource(UIImage sourceImage, nfloat maxWidth, nfloat maxHeight, CGSize originalImageSize, bool shouldScaleUp = false)
	{
	if (sourceImage is null \|\| sourceImage.CGImage is null)
	return null;

	maxWidth = (nfloat)Math.Min(maxWidth, originalImageSize.Width);
	maxHeight = (nfloat)Math.Min(maxHeight, originalImageSize.Height);

	var sourceSize = sourceImage.Size;

	float maxResizeFactor = (float)Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);

	if (maxResizeFactor > 1 && !shouldScaleUp)
	return sourceImage;

	return UIImage.FromImage(sourceImage.CGImage, sourceImage.CurrentScale / maxResizeFactor, sourceImage.Orientation);
	}

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

Are you sure you want to change the base?

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

Conversation

Tamilarasan-Paranthaman commented Nov 21, 2024 • edited Loading

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

jsuarezruiz commented Nov 21, 2024 • edited by jfversluis Loading

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azure-pipelines bot commented Dec 3, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PureWeen commented Dec 12, 2024

azure-pipelines bot commented Dec 12, 2024

PureWeen commented Jan 15, 2025

azure-pipelines bot commented Jan 15, 2025

jsuarezruiz commented Jan 16, 2025

azure-pipelines bot commented Jan 16, 2025

PureWeen left a comment

Choose a reason for hiding this comment

Ahamed-Ali commented Jan 31, 2025

jsuarezruiz commented Feb 5, 2025

azure-pipelines bot commented Feb 5, 2025

jsuarezruiz commented Feb 26, 2025

azure-pipelines bot commented Feb 26, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tamilarasan-Paranthaman commented Nov 21, 2024 •

edited

Loading

jsuarezruiz commented Nov 21, 2024 •

edited by jfversluis

Loading