Button with Image on iOS and MacOS always missalign

[arkadym]

Description

Not possible to use Image with Button control it always missalign (see screenshots). Image always align to edge w/o any padding.
Using padding will not help because there always extra space in between image and text

Steps to Reproduce

1. Create NET MAUI App
2. Add any image to Click Me button (have to run on iOS or MacOS))
3. Run app

Version with bug

6.0.400 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 15, MacOS 12.3

Did you find any workaround?

No workaround found yet

Relevant log output

No response

[jsuarezruiz]

The space between the icon and the text is larger than it was in Xamarin.Forms.
Issue8528.zip

[davidortinau]

Yes, I'm seeing this also on Catalyst. No matter how wide I make the button or what padding is set, the image is at the edge.

[davidortinau]

My workaround is to compose an Image and a Label

<Border Stroke="{StaticResource SecondaryBrush}" StrokeShape="{RoundRectangle CornerRadius=8}"
                                StrokeThickness="1" Background="Transparent"
                                Grid.Row="0" HorizontalOptions="End" VerticalOptions="Start"
                                SemanticProperties.Description="Button that opens a filter dialog"
                                >
                            <HorizontalStackLayout Margin="14,12" Spacing="12">
                                <Image Source="filter.png" VerticalOptions="Center" />
                                <Label Text="Filter" VerticalOptions="Center"/>
                            </HorizontalStackLayout>

                            <Border.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                            </Border.GestureRecognizers>
                        </Border>

So instead of this:

I get this:

[arkadym]

Yes, is good idea, but i prefer keep it original, e.g. button has hover effect, click effect. So I've got another workaround - i realized negative padding works fine for image location:

ContentLayout="{OnPlatform Default='Top,2', iOS='Top,-10', MacCatalyst='Top,-10'}"
Padding="{OnPlatform Default='0,3', iOS='0,15,0,0', MacCatalyst='0,15,0,0'}" 

[AbstractionsAs]

Is there any progress on this?

[hartez]

This should have been closed when #10309 was merged.