[iOS] Auto Resize chrome icons on iOS to make it more consistent with other platforms - TabBar

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

@@ -98,6 +98,20 @@ public virtual void DidShowViewController(UINavigationController navigationContr
 			}
 			UpdateMoreCellsEnabled();
 		}
+
+		public override void TraitCollectionDidChange(UITraitCollection previousTraitCollection)
+		{
+			if (previousTraitCollection.VerticalSizeClass == TraitCollection.VerticalSizeClass)
+				return;
+
+			if (AppContext.TryGetSwitch("iOSResizeTabIconsToSystemDefault", out bool resize) && resize)
+			{
+				foreach (var item in TabBar.Items)
+				{
+					item.Image = TabbedViewExtensions.AutoResizeTabBarImage(TraitCollection, item.Image);
+				}
+			}
+		}
 
 		public override void ViewDidLayoutSubviews()
 		{

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

@@ -509,7 +509,8 @@ protected virtual void UpdateTabBarItem()
 
 			ShellSection.Icon.LoadImage(ShellSection.FindMauiContext(), icon =>
 			{
-				TabBarItem = new UITabBarItem(ShellSection.Title, icon?.Value, null);
+				var image = (AppContext.TryGetSwitch("iOSResizeTabIconsToSystemDefault", out bool resize) && resize) ? TabbedViewExtensions.AutoResizeTabBarImage(TraitCollection, icon?.Value) : icon?.Value;
+				TabBarItem = new UITabBarItem(ShellSection.Title, image, null);
 				TabBarItem.AccessibilityIdentifier = ShellSection.AutomationId ?? ShellSection.Title;
 			});
 		}

src/Controls/src/Core/Compatibility/Handlers/TabbedPage/iOS/TabbedRenderer.cs

@@ -180,14 +180,29 @@ void OnPagePropertyChanged(object sender, PropertyChangedEventArgs e)
 			if (e.PropertyName == Page.IconImageSourceProperty.PropertyName || e.PropertyName == Page.TitleProperty.PropertyName)
 			{
 				var page = (Page)sender;
+				UpdateTabBarItem(page);
+			}
+		}
+
+		public override void TraitCollectionDidChange(UITraitCollection previousTraitCollection)
+		{
+			if (previousTraitCollection.VerticalSizeClass == TraitCollection.VerticalSizeClass)
+				return;
+
+			if (Element is not null && AppContext.TryGetSwitch("iOSResizeTabIconsToSystemDefault", out bool resize) && resize)
+			{
+				UpdateTabBarItems();
+			}
+		}
 
-				IPlatformViewHandler renderer = page.ToHandler(_mauiContext);
+		void UpdateTabBarItem(Page page)
+		{
+			IPlatformViewHandler renderer = page.ToHandler(_mauiContext);
 
-				if (renderer?.ViewController.TabBarItem == null)
-					return;
+			if (renderer?.ViewController.TabBarItem == null)
+				return;
 
-				SetTabBarItem(renderer);
-			}
+			SetTabBarItem(renderer);
 		}
 
 		void OnPagesChanged(object sender, NotifyCollectionChangedEventArgs e)
@@ -448,6 +463,14 @@ void UpdateBarTranslucent()
 			}
 		}
 
+		void UpdateTabBarItems()
+		{
+			foreach (var page in Tabbed.InternalChildren)
+			{
+				UpdateTabBarItem((Page)page);
+			}
+		}
+
 		void UpdateChildrenOrderIndex(UIViewController[] viewControllers)
 		{
 			if (Tabbed is not TabbedPage tabbed)
@@ -480,11 +503,28 @@ async void SetTabBarItem(IPlatformViewHandler renderer)
 				throw new InvalidCastException($"{nameof(renderer)} must be a {nameof(Page)} renderer.");
 
 			var icons = await GetIcon(page);
-			renderer.ViewController.TabBarItem = new UITabBarItem(page.Title, icons?.Item1, icons?.Item2)
+			if (AppContext.TryGetSwitch("iOSResizeTabIconsToSystemDefault", out bool resize) && resize)
+			{
+				var resizedImage = TabbedViewExtensions.AutoResizeTabBarImage(TraitCollection, icons?.Item1);
+				var resizedSelectedImage = TabbedViewExtensions.AutoResizeTabBarImage(TraitCollection, icons?.Item2);
+				SetTabBarItem(resizedImage, resizedSelectedImage);
+				resizedImage?.Dispose();
+				resizedSelectedImage?.Dispose();
+			}
+			else
 			{
-				Tag = Tabbed?.Children.IndexOf(page) ?? -1,
-				AccessibilityIdentifier = page.AutomationId
-			};
+				SetTabBarItem(icons?.Item1, icons?.Item2);
+			}
+
+			void SetTabBarItem(UIImage image, UIImage selectedImage)
+			{
+				renderer.ViewController.TabBarItem = new UITabBarItem(page.Title, image, selectedImage)
+				{
+					Tag = Tabbed?.Children.IndexOf(page) ?? -1,
+					AccessibilityIdentifier = page.AutomationId
+				};
+			}
+
 			icons?.Item1?.Dispose();
 			icons?.Item2?.Dispose();
 		}

src/Controls/src/Core/PublicAPI/net-ios/PublicAPI.Unshipped.txt

@@ -207,6 +207,8 @@ const Microsoft.Maui.Controls.TitleBar.TrailingHiddenState = "TrailingContentCol
 const Microsoft.Maui.Controls.TitleBar.TrailingVisibleState = "TrailingContentVisible" -> string!
 Microsoft.Maui.Controls.Embedding.EmbeddingExtensions
 Microsoft.Maui.Controls.HandlerProperties
+~override Microsoft.Maui.Controls.Handlers.Compatibility.TabbedRenderer.TraitCollectionDidChange(UIKit.UITraitCollection previousTraitCollection) -> void
+~override Microsoft.Maui.Controls.Platform.Compatibility.ShellItemRenderer.TraitCollectionDidChange(UIKit.UITraitCollection previousTraitCollection) -> void
 *REMOVED*override Microsoft.Maui.Controls.Compatibility.Layout.InvalidateMeasureOverride() -> void
 *REMOVED*Microsoft.Maui.Controls.Handlers.Compatibility.ShellScrollViewTracker
 *REMOVED*Microsoft.Maui.Controls.Handlers.Compatibility.ShellScrollViewTracker.Dispose() -> void

src/Controls/src/Core/PublicAPI/net-maccatalyst/PublicAPI.Unshipped.txt

@@ -207,6 +207,8 @@ const Microsoft.Maui.Controls.TitleBar.TitleVisibleState = "TitleVisible" -> str
 const Microsoft.Maui.Controls.TitleBar.TrailingHiddenState = "TrailingContentCollapsed" -> string!
 const Microsoft.Maui.Controls.TitleBar.TrailingVisibleState = "TrailingContentVisible" -> string!
 Microsoft.Maui.Controls.Embedding.EmbeddingExtensions
+~override Microsoft.Maui.Controls.Handlers.Compatibility.TabbedRenderer.TraitCollectionDidChange(UIKit.UITraitCollection previousTraitCollection) -> void
+~override Microsoft.Maui.Controls.Platform.Compatibility.ShellItemRenderer.TraitCollectionDidChange(UIKit.UITraitCollection previousTraitCollection) -> void
 Microsoft.Maui.Controls.HandlerProperties
 *REMOVED*override Microsoft.Maui.Controls.Compatibility.Layout.InvalidateMeasureOverride() -> void
 *REMOVED*Microsoft.Maui.Controls.Handlers.Compatibility.ShellScrollViewTracker

src/Controls/tests/TestCases.HostApp/Issues/Issue29091Shell.xaml

@@ -0,0 +1,31 @@
+<?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"
+       x:Class="Maui.Controls.Sample.Issues.Issue29091Shell">
+        <TabBar>
+                <Tab Title="Tab1"
+                     Icon="groceries.png">
+                        <ShellContent Icon="groceries.png"
+                                      Title="Tab1">
+                                <ContentPage IconImageSource="groceries.png"
+                                             Title="Tab1"/>
+                        </ShellContent>
+                </Tab>
+                <Tab Title="Tab2"
+                     Icon="coffee.png">
+                        <ShellContent Icon="coffee.png"
+                                      Title="Tab2">
+                                <ContentPage IconImageSource="coffee.png"
+                                             Title="Tab2"/>
+                        </ShellContent>
+                </Tab>
+                <Tab Title="Tab3"
+                     Icon="seth.png">
+                        <ShellContent Icon="seth.png"
+                                      Title="Tab3">
+                                <ContentPage IconImageSource="seth.png"
+                                             Title="Tab3"/>
+                        </ShellContent>
+                </Tab>
+        </TabBar>
+</Shell>

src/Controls/tests/TestCases.HostApp/Issues/Issue29091Shell.xaml.cs

@@ -0,0 +1,9 @@
+namespace Maui.Controls.Sample.Issues;
+[Issue(IssueTracker.Github, "29091Shell", "Shell - Auto Resize chrome icons on iOS to make it more consistent with other platforms - TabBar", PlatformAffected.iOS)]
+public partial class Issue29091Shell : Shell
+{
+	public Issue29091Shell()
+	{
+		InitializeComponent();
+	}
+}

src/Controls/tests/TestCases.HostApp/Issues/Issue29091Tabbed.xaml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<TabbedPage
+        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+        x:Class="Maui.Controls.Sample.Issues.Issue29091Tabbed">
+        <ContentPage IconImageSource="groceries.png"
+                     Title="Tab1">
+                <Label Text="Tab1"
+                       AutomationId="Tab1"
+                       HorizontalOptions="Center"
+                       VerticalOptions="Center"/>
+        </ContentPage>
+        <ContentPage IconImageSource="coffee.png"
+                     Title="Tab2"/>
+        <ContentPage IconImageSource="seth.png"
+                     Title="Tab3"/>
+</TabbedPage>

src/Controls/tests/TestCases.HostApp/Issues/Issue29091Tabbed.xaml.cs

@@ -0,0 +1,9 @@
+namespace Maui.Controls.Sample.Issues;
+[Issue(IssueTracker.Github, "29091Tabbed", "Tabbed - Auto Resize chrome icons on iOS to make it more consistent with other platforms - TabBar", PlatformAffected.iOS)]
+public partial class Issue29091Tabbed : TabbedPage
+{
+	public Issue29091Tabbed()
+	{
+		InitializeComponent();
+	}
+}

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

@@ -0,0 +1,22 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues;
+
+public class Issue29091Shell : _IssuesUITest
+{
+	public Issue29091Shell(TestDevice testDevice) : base(testDevice)
+	{
+	}
+
+	public override string Issue => "Shell - Auto Resize chrome icons on iOS to make it more consistent with other platforms - TabBar";
+
+	[Test]
+	[Category(UITestCategories.Shell)]
+	public void TabBarIconsShouldAutoscale()
+	{
+		App.WaitForElement("Tab1");
+		VerifyScreenshot();
+	}
+}

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

@@ -0,0 +1,22 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues;
+
+public class Issue29091Tabbed : _IssuesUITest
+{
+	public Issue29091Tabbed(TestDevice testDevice) : base(testDevice)
+	{
+	}
+
+	public override string Issue => "Tabbed - Auto Resize chrome icons on iOS to make it more consistent with other platforms - TabBar";
+
+	[Test]
+	[Category(UITestCategories.TabbedPage)]
+	public void TabBarIconsShouldAutoscale()
+	{
+		App.WaitForElement("Tab1");
+		VerifyScreenshot();
+	}
+}

src/Core/src/Platform/iOS/TabbedViewExtensions.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Diagnostics.CodeAnalysis;
 using System.Text;
+using CoreGraphics;
 using Foundation;
 using Microsoft.Maui.Graphics;
 using UIKit;
@@ -118,5 +119,52 @@ internal static void UpdateiOS15TabBarAppearance(
 			// Set the TabBarAppearance
 			tabBar.StandardAppearance = tabBar.ScrollEdgeAppearance = _tabBarAppearance;
 		}
+
+		internal static UIImage? AutoResizeTabBarImage(UITraitCollection traitCollection, UIImage image)
+		{
+			if (image == null || image.Size.Width <= 0 || image.Size.Height <= 0)
+			{
+				return null;
+			}
+
+			CGSize newSize = image.Size;
+
+			//Define size constants according to Apple's guidelines
+			//https://developer.apple.com/design/human-interface-guidelines/tab-bars#Target-dimensions
+			const int regularWideWidth = 31, compactWideWidth = 23;
+			const int regularTallHeight = 28, compactTallHeight = 20;
+			const int regularSquareSize = 25, compactSquareSize = 18;
+
+			bool isRegularTabBar = traitCollection.VerticalSizeClass == UIUserInterfaceSizeClass.Regular;
+			if (image.Size.Width > image.Size.Height) //Wide
+			{
+				newSize.Width = isRegularTabBar ? regularWideWidth : compactWideWidth;
+				newSize.Height = newSize.Width * image.Size.Height / image.Size.Width;
+			}
+			else if (image.Size.Width < image.Size.Height) //Tall
+			{
+				newSize.Height = isRegularTabBar ? regularTallHeight : compactTallHeight;
+				newSize.Width = newSize.Height * image.Size.Width / image.Size.Height;
+			}
+			else //Square
+			{
+				newSize.Width = isRegularTabBar ? regularSquareSize : compactSquareSize;
+				newSize.Height = newSize.Width;
+			}
+
+			UIImage? resizedImage = null;
+			try
+			{
+				UIGraphics.BeginImageContextWithOptions(newSize, false, 0);
+				image.Draw(new CGRect(0, 0, newSize.Width, newSize.Height));
+				resizedImage = UIGraphics.GetImageFromCurrentImageContext();
+			}
+			finally
+			{
+				UIGraphics.EndImageContext();
+			}
+
+			return resizedImage;
+		}
 	}
 }