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

rmarinho · 2025-07-22T18:01:05Z

why is it changing this file?

While rebasing this branch, it appears that this file was changed, but I didn’t make any modifications to it.

its adding spaces instead of tabs

rmarinho · 2025-07-22T18:01:14Z

why is it changing this file?

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

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -172,4 +172,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)

Original file line number	Diff line number	Diff line change
Expand Up		@@ -273,4 +273,4 @@ Always put that at the top, without the block quotes. Without it, the users will

		---

		Note for Future Updates: This document should be expanded as new development patterns, tools, or workflows are discovered. Add sections for specific scenarios, debugging techniques, or tooling as they become relevant to the development process.
		Note for Future Updates: This document should be expanded as new development patterns, tools, or workflows are discovered. Add sections for specific scenarios, debugging techniques, or tooling as they become relevant to the development process.
Copy link Member rmarinho Jul 22, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. why is it changing this file?

Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,4 +24,3 @@ stages:
		apiScanSoftwareVersionNum: ${{ parameters.softwareVersion }}
		apiScanAuthConnectionString: 'runAs=App;AppId=$(ApiScanClientId)'
		tsaUploadEnabled: ${{ parameters.tsaUploadEnabled }}

-Original file line number
+Diff line change
@@ Expand Up / @@ -288,4 +288,4 @@ extends: @@
                   $(Build.SourcesDirectory)\eng\scripts\push_nuget_org.ps1 -ApiKey "$(pat--nuget--xamarinc--push--wildcard)" -FeedUrl "${{ parameters.feedUrl }}" -NuGetSearchPath "$(Build.StagingDirectory)\nupkgs\shipping\packages\*" -NuGetIncludeFilters "*Manifest*.nupkg;${{ parameters.nugetIncludeFilters }}" -NuGetExcludeFilters "${{ parameters.nugetExcludeFilters }}"
                 displayName: Push workload manifests to NuGet.org
                 env:
-                  PUSH_PACKAGES: ${{ parameters.pushPackages }}
+                  PUSH_PACKAGES: ${{ parameters.pushPackages }}

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ @@
     using Microsoft.Extensions.Logging;
     using Microsoft.Maui.Controls.Platform;
     using Microsoft.Maui.Graphics;
+    using Microsoft.Maui.Graphics.Platform;
     using Microsoft.Maui.Handlers;
     using Microsoft.Maui.Layouts;
     using UIKit;
@@ Expand Down Expand Up @@
     				// if the image is too large then we will size it smaller
     				if (currentImageHeight - availableHeight > buffer || currentImageWidth - availableWidth > buffer)
     				{
-    					image = ResizeImageSource(image, availableWidth, availableHeight, _originalImageSize);
+    					image = image.ResizeImageSource(availableWidth, availableHeight, _originalImageSize);
     				}
     				// if the image is already sized down but now has more space, we will size it up no more than the original image size
     				else if (availableHeight - additionalVerticalSpace - currentImageHeight > buffer
     					&& availableWidth - additionalHorizontalSpace - currentImageWidth > buffer
     					&& currentImageHeight != _originalImageSize.Height
     					&& currentImageWidth != _originalImageSize.Width)
     				{
-    					image = ResizeImageSource(image, (nfloat)widthConstraint - additionalHorizontalSpace, (nfloat)heightConstraint - additionalVerticalSpace, _originalImageSize, true);
+    					image = image.ResizeImageSource((nfloat)widthConstraint - additionalHorizontalSpace, (nfloat)heightConstraint - additionalVerticalSpace, _originalImageSize, true);
     				}
     				else
     				{
@@ Expand All @@
     			return false;
     		}
-    		/// <summary>
-    		/// Resize the image to fit within the constraints.
-    		/// </summary>
-    		/// <param name="sourceImage"></param>
-    		/// <param name="maxWidth"></param>
-    		/// <param name="maxHeight"></param>
-    		/// <param name="originalImageSize"></param>
-    		/// <param name="shouldScaleUp"></param>
-    		/// <returns></returns>
-    		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);
-    		}
     		public static void MapText(ButtonHandler handler, Button button) =>
     			MapText((IButtonHandler)handler, button);
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Uh oh!

Diff view

Diff view

There are no files selected for viewing

rmarinho Jul 22, 2025

Uh oh!

Tamilarasan-Paranthaman Jul 23, 2025

Uh oh!

rmarinho Jul 23, 2025

Uh oh!

rmarinho Jul 22, 2025

Uh oh!

Uh oh!

jsuarezruiz Feb 26, 2025

Uh oh!

Tamilarasan-Paranthaman Feb 27, 2025

Uh oh!

rmarinho Jul 22, 2025

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ @@
     using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;
     using Microsoft.Maui.Devices;
     using Microsoft.Maui.Graphics;
+    using Microsoft.Maui.Graphics.Platform;
     using Microsoft.Maui.Platform;
     using ObjCRuntime;
     using UIKit;
@@ Expand Down Expand Up @@
     				return;
     			}
     			FlyoutPage.Flyout.IconImageSource.LoadImage(FlyoutPage.FindMauiContext(), result =>
     			{
     				var icon = result?.Value;
-    				if (icon != null)
-    				{
+    				var originalImageSize = icon?.Size ?? CGSize.Empty;
+    				// Referred from the default hamburger size
+    				var defaultIconHeight = 23f;
+    				var defaultIconWidth = 23f;
+    				var buffer = 0.1;
+    				// if the image is bigger than the default available size, resize it
+    				if (icon is not null)
+    				{
+    					if (originalImageSize.Height - defaultIconHeight > buffer || originalImageSize.Width - defaultIconWidth > buffer)
+    					{
+    						icon = icon.ResizeImageSource(defaultIconWidth, defaultIconHeight, originalImageSize);
+    					}
     					try
     					{
     						containerController.NavigationItem.LeftBarButtonItem = new UIBarButtonItem(icon, UIBarButtonItemStyle.Plain, OnItemTapped);
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ @@
     using System.Collections.Specialized;
     using System.ComponentModel;
     using System.Runtime.Versioning;
+    using Microsoft.Maui.Graphics.Platform;
     using System.Windows.Input;
     using CoreGraphics;
     using Foundation;
@@ Expand Down Expand Up / @@ -415,9 +416,20 @@ void UpdateLeftToolbarItems() @@
     				UIImage? icon = null;
-    				if (image != null)
+    				if (image is not null)
     				{
     					icon = result?.Value;
+    					var originalImageSize = icon?.Size ?? CGSize.Empty;
+    					// Referred from the default hamburger size
+    					var defaultIconHeight = 23f;
+    					var defaultIconWidth = 23f;
+    					var buffer = 0.1;
+    					// if the image is bigger than the default available size, resize it
+    					if (icon is not null && originalImageSize.Height - defaultIconHeight > buffer || originalImageSize.Width - defaultIconWidth > buffer)
+    					{
+    						icon = icon.ResizeImageSource(defaultIconWidth, defaultIconHeight, originalImageSize);
+    					}
     				}
     				else if (String.IsNullOrWhiteSpace(text) && IsRootPage && _flyoutBehavior == FlyoutBehavior.Flyout)
     				{
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,17 @@
+    <?xml version="1.0" encoding="utf-8" ?>
+    <Shell
+        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+        Shell.FlyoutBehavior="Flyout"
+        FlyoutIcon="groceries.png"
+        Shell.ForegroundColor="red"
+        x:Class="Maui.Controls.Sample.Issues.Issue25920">
+        <ShellContent Title="Home">
+            <ContentPage>
+                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
+                    <Label AutomationId="Label" Text="This is Label"/>
+                </StackLayout>
+            </ContentPage>
+        </ShellContent>
+    </Shell>

-Original file line number
+Diff line change
@@ -0,0 +1,14 @@
+    using System;
+    using Microsoft.Maui.Controls.Internals;
+    namespace Maui.Controls.Sample.Issues
+    {
+    	[Issue(IssueTracker.Github, 25920, ".NET MAUI set AppShell custom FlyoutIcon display problem", PlatformAffected.iOS | PlatformAffected.Android)]
+    	public partial class Issue25920: Shell
+    	{
+    		public Issue25920()
+    		{
+    			InitializeComponent();
+    		}
+    	}
+    }

-Original file line number
+Diff line change
@@ -0,0 +1,20 @@
+    namespace Maui.Controls.Sample.Issues;
+    [Issue(IssueTracker.Github, "29092Flyout", "Flyout - Auto Resize chrome icons on iOS to make it more consistent with other platforms - hamburger icon", PlatformAffected.iOS)]
+    public partial class Issue29092Flyout : FlyoutPage
+    {
+    	public Issue29092Flyout()
+    	{
+    		Flyout = new ContentPage
+    		{
+    			IconImageSource = "groceries.png",
+    			Title = "Flyout"
+    		};
+    		Detail = new NavigationPage(new ContentPage
+    		{
+    			Title = "Title",
+    			Content = new Label() { Text = "Hello, World!", AutomationId = "HelloWorldLabel", },
+    		});
+    	}
+    }

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    #if TEST_FAILS_ON_WINDOWS && TEST_FAILS_ON_ANDROID
+    // https://github.com/dotnet/maui/issues/26148
+    // In Windows, the foreground color is not applied to the custom icon, so as of now, the test is not applicable for Windows.
+    // https://github.com/dotnet/maui/pull/27502
+    // For Android, we have separate PR to fix the issue, so the test is not applicable for Android.
+    using NUnit.Framework;
+    using UITest.Appium;
+    using UITest.Core;
+    namespace Microsoft.Maui.TestCases.Tests.Issues
+    {
+    	public class Issue25920 : _IssuesUITest
+    	{
+    		public Issue25920(TestDevice device) : base(device) { }
+    		public override string Issue => ".NET MAUI set AppShell custom FlyoutIcon display problem";
+    		[Test]
+    		[Category(UITestCategories.Shell)]
+    		public void ForegroundColorShouldbeSetandCustomIconAlignedProperly()
+    		{
+    			App.WaitForElement("Label");
+    			VerifyScreenshot();
+    		}
+    	}
+    }
+    #endif

-Original file line number
+Diff line change
@@ -0,0 +1,27 @@
+    #if TEST_FAILS_ON_ANDROID && TEST_FAILS_ON_WINDOWS
+    //IconImageSource is not properly updated in Android and Windows, so the test is not applicable for these platforms.
+    //https://github.com/dotnet/maui/issues/15211
+    //https://github.com/dotnet/maui/issues/15211#issuecomment-1557569889
+    using NUnit.Framework;
+    using UITest.Appium;
+    using UITest.Core;
+    namespace Microsoft.Maui.TestCases.Tests.Issues;
+    public class Issue29092Flyout : _IssuesUITest
+    {
+    	public Issue29092Flyout(TestDevice testDevice) : base(testDevice)
+    	{
+    	}
+    	public override string Issue => "Flyout - Auto Resize chrome icons on iOS to make it more consistent with other platforms - hamburger icon";
+    	[Test]
+    	[Category(UITestCategories.FlyoutPage)]
+    	public void FlyoutIconShouldAutoscale()
+    	{
+    		App.WaitForElement("HelloWorldLabel");
+    		VerifyScreenshot();
+    	}
+    }
+    #endif

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

Uh oh!

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

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

rmarinho Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Tamilarasan-Paranthaman Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

rmarinho Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

rmarinho Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jsuarezruiz Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

Tamilarasan-Paranthaman Feb 27, 2025

Choose a reason for hiding this comment

Uh oh!

rmarinho Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!