ImageButton border (BorderWidth) overlaps the image instead of adding space

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.

https://dot.net/maui

MIT License

21.98k stars 1.71k forks source link

ImageButton border (BorderWidth) overlaps the image instead of adding space #22520

Open mattleibow opened 3 months ago

mattleibow commented 3 months ago

Description

With null/no background:

Android	iOS	Windows

With background:

Android	iOS	Windows

Steps to Reproduce

Run the ImageButtonUITests or "Image Button Gallery" page.

Link to public reproduction project repository

No response

Version with bug

8.0.40 SR5

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, macOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

github-actions[bot] commented 3 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

[Android] ImageButton Border does not fit to CornerRadius (#20801), similarity score: 0.84
Circular ImageButton has edges cut off on Android (#20822), similarity score: 0.79

Closed similar issues:

Button/ImageButton's Border has a default value on Windows (#9871), similarity score: 0.82
Button border not displaying on non-windows platforms if BorderWidth is not defined (#13612), similarity score: 0.77
ImageButton with CornerRadius is not calculated as expected on Android when Padding exists (#11874), similarity score: 0.77

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

mattleibow commented 3 months ago

Observed when adding UI tests to https://github.com/dotnet/maui/pull/22298

espenrl commented 3 months ago

This one could be relevant. It's plain Android UI code, not MAUI, but I get the same problem in MAUI.

https://stackoverflow.com/questions/62341037/shapeableimageview-with-strokewidth-stroke-trimmed-on-all-four-side

It is very obvious that half the border stroke is clipped when using CornerRadius such that the border becomes circular. It can be combatted using Padding. But something has changed in MAUI and ImageButton.Padding doesn't do anything. Seems like its not applied anymore.

mattleibow commented 3 months ago

@espenrl the padding fix was just merged https://github.com/dotnet/maui/issues/22364

espenrl commented 3 months ago

@espenrl the padding fix was just merged #22364

That's super @mattleibow Perhaps ImageButton could have been coded such that it dealt with the issue of clipping half of the borders?

espenrl commented 3 months ago

Found this PR which is about the issue I mentioned #21259