[iOS] Fix Button image sizing and layout

[tj-devel709]

Description of Change

This PR is a continuation of this previous PR: #21759.
This PR will now do some of the heavy work to try to resize the image, improve centering especially in situations where the image is above or below the title, respect the padding, spacing, and borderwidth to give more control to the developer, match Windows and Android where it can, and overall give a better button experience on iOS.

Note: With the introduction of the UIButton.Configuration API in the future, button layout will be a little simpler.

Notable Changes in iOS Button

Spacing

iOS will now respect the spacing, padding, borderwidth, and margins more accurately than before. As a result, the default spacing between the image and title will actually show up as 10 units. Previously, the button was trying to set 10 units but actually rendered around 6. The image below shows the old behavior at the top and the new behavior on the bottom. If you want the old behavior, you can manually add ContentLayout="Left, 6"or whatever width you'd like.

Image Resizing

In the old implementation, images would not be resized if they were too large and the padding, borderwidth, spacing, and margins would changes internally to try to fit the button contents if it could. Now the image will be resized to the max size given the padding, borderwidth, spacing, and margins. If there is also a title, the button content may not all fit inside the button and we would recommend that you size your image manually to achieve the layout you desire.

Example 1

        <VerticalStackLayout Background="LightBlue">
                <Button Background="LightGray" HeightRequest="100" WidthRequest="100" ImageSource="dotnet_bot.png" Text="Button 1" />
        </VerticalStackLayout>

Example 2

        <VerticalStackLayout Background="LightBlue">
                <Button Background="LightGray" ContentLayout="Top, 5" HeightRequest="100" WidthRequest="100" ImageSource="dotnet_bot.png" Text="Button 1" />
        </VerticalStackLayout>

Example 3

        <VerticalStackLayout Background="LightBlue">
                <Button Background="LightGray" ContentLayout="Top, 5" HeightRequest="100" WidthRequest="100" ImageSource="dotnet_bot.png" Text="Button 1" />
        </VerticalStackLayout>

    <MauiImage Update="Resources\Images\dotnet_bot.svg" Color="#FFFFFF" BaseSize="50,50" />

BorderWidth

BorderWidth now matches Windows and should be similar to Android in the future. Before, the button content would be inset by the BorderWidth every time. Now the BorderWidth will try to use the space outside the button if it is available and if it is not, it will use the space inside the button.

In this example below, the top button does not have space outside the button so the BorderWidth will inset the space and the second button has more space available so it will outset the button.

If you'd like to test some cases, here are some code samples:

• https://gist.github.com/tj-devel709/414d75c78cb43b9034eb85351e9f3298

Issues Fixed

Fixes #22306
Fixes #21285
Fixes #23635

[tj-devel709]

I think this needs to rethink how the Measure for the button is taken in the case of moving all the layout logic into the ArrangeOverride

[jsuarezruiz]

There are some UI Tests related with image sizing failing on iOS.

[tj-devel709]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[tj-devel709]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[PureWeen]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[PureWeen]

Investigate not setting ContentEdgeInsets for the padding to fix issues with clipping