[.Net10] [Proposal] [iOS] TabbedPage.AutoResizeIconsProperty

[kubaflo]

Description of Change

Maybe we can add TabbedPage.AutoResizeIconsProperty so that when it is set to true, the tab bar icons will be resized to Apple's recommended values grabbed from here https://developer.apple.com/design/human-interface-guidelines/tab-bars#Target-dimensions. Currently, devs have to manually rescale their images to make them look appealing to users, which is not a disaster, but I think they would appreciate us making it for them

TabbedPage.AutoResizeIconsProperty

False	True

Screen.Recording.2025-02-26.at.01.21.12.mov

[kubaflo]

If this makes sense, then I think It would be a good idea to do something similar for shell

[jfversluis]

Yes! Love it! Do we have any indication how much of a performance hit this would be?

I guess another approach to circumvent that is to generate an image with the right size at compile time and add _tab or something to the name and make it use that automatically. But I guess this is fine and shouldn’t even be noticed, especially on iOS.

25 is hard coded now, can we get that size programmatically from somewhere? And isn’t there a different size for the compact mode? What will this do when you turn the iPhone to landscape?

[jsuarezruiz]

Also, could retarget to the net10.0 branch?

[kubaflo]

Also, could retarget to the net10.0 branch?

Yeah, I will do it, but later, because it is easier for me to develop on net9.0

[kubaflo]

Yes! Love it! Do we have any indication how much of a performance hit this would be?

I guess another approach to circumvent that is to generate an image with the right size at compile time and add _tab or something to the name and make it use that automatically. But I guess this is fine and shouldn’t even be noticed, especially on iOS.

25 is hard coded now, can we get that size programmatically from somewhere? And isn’t there a different size for the compact mode? What will this do when you turn the iPhone to landscape?

Hmmm that's kind of tricky because according to Apple there are a few configurations:

The 25pt is almost always used, but you're right for the compact/horizontal mode it should be 18pt. I tried to find some method to get the recommended size for the current screen from Apple's API, but they don't provide devs with this :/

[kubaflo]

Apple docs for tab bar and icons: https://developer.apple.com/design/human-interface-guidelines/tab-bars

[kubaflo]

@jfversluis I think I've figured it out! Now it should adjust when switching orientation and in compact mode. Check the latest commit :)

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-02-26.at.20.17.27.mp4

[kubaflo]

@jfversluis I've noticed one bug with my approach. I didn't respect proportions, so all images were scaled to a square. I've added a commit that fixes it. Now everything adheres to Apple's native scaling https://developer.apple.com/design/human-interface-guidelines/tab-bars#Target-dimensions

Before	After

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jfversluis]

Dude you're on fire, this makes me so happy

[kubaflo]

Dude you're on fire, this makes me so happy

Yeah, I like it too. What puzzles me is whether we should do something similar for the tabbed page generated by shell?
Currently, this iOS-specific flag works only with TabbedPage

[jfversluis]

Why would we (not) do that?

[kubaflo]

Why would we (not) do that?

Okay, I will see what I can come up with this weekend

[kubaflo]

Why would we (not) do that?

Here it is :)
#28128

[jsuarezruiz]

/azp run

[jsuarezruiz]

Here, can create some variables like:

bool isRegularTabBar = traitCollection.VerticalSizeClass == UIUserInterfaceSizeClass.Regular;
float targetWidth = isRegularTabBar ? 31f : 23f;
float targetHeight = isRegularTabBar ? 28f : 20f;

And then, reuse like:

if (image.Size.Width > image.Size.Height) // Wide
{
    newSize.Width = targetWidth;
    newSize.Height = targetWidth * image.Size.Height / image.Size.Width;
}
else if (image.Size.Width < image.Size.Height) // Tall
{
    newSize.Height = targetHeight;
    newSize.Width = targetHeight * image.Size.Width / image.Size.Height;
}

[jsuarezruiz]

The link to the apple dimensions guidelines is nice, but could we include more comments associated with the numbers?

[jsuarezruiz]

@kubaflo Could you rebase and fix the conflicts?

[kubaflo]

@kubaflo Could you rebase and fix the conflicts?

done

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

Pending snapshots. Could you commit the images?

Example, Windows:

[rmarinho]

Can you rebase and retarget net10.0 @kubaflo ? and change the base of the PR .

Thanks

[PureWeen]

Need to review APIs

[PureWeen]

Closing in favor of #29003