Make sure ImageButton always has a background

[mattleibow]

Description of Change

The OS does not specify a background so we need to make sure there is a transparent background to get the ripple and border.

We can't really test ripple and we can't really test a null background vs a transparent background as they are supposed to look exactly the same.

The original issue was observing a lack of ripple on white, but this is because the ripple is white. In traditional buttons, there is a RippleColor property on the platform view. However, on image buttons, the control is just an image view so does not have any ripple effects - we are adding it. It will have to be a separate platform effect to add a ripple color property.

See #22805

Issues Fixed

Fixes #22603

Before

Notice the lack of a ripple on the top right button

before.webm

After

Now the top right button has a ripple

after.webm

DEMO CODE

  <Grid ColumnDefinitions="*,*">

      <VerticalStackLayout Padding="30"
                           Spacing="10"
                           Background="White"
                           Grid.Column="0">
          <Label Text="NULL Background"
                 TextColor="Gray"/>
          <ImageButton Aspect="Center"
                       CornerRadius="8"
                       HeightRequest="80"
                       WidthRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
          <Label Text="TRANSPARENT Background"
                 TextColor="Gray"/>
          <ImageButton Background="Transparent"
                       Aspect="Center"
                       CornerRadius="8"
                       WidthRequest="80"
                       HeightRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
          <Label Text="WHITE Background"
                 TextColor="Gray"/>
          <ImageButton Background="White"
                       Aspect="Center"
                       CornerRadius="8"
                       WidthRequest="80"
                       HeightRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
          <Label Text="COLOR Background"
                 TextColor="Gray"/>
          <ImageButton Background="DarkSlateGray"
                       Aspect="Center"
                       CornerRadius="8"
                       WidthRequest="80"
                       HeightRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
      </VerticalStackLayout>

      <VerticalStackLayout Padding="30"
                           Spacing="10"
                           Background="Black"
                           Grid.Column="1">
          <Label Text="NULL Background"
                 TextColor="Gray"/>
          <ImageButton Aspect="Center"
                       CornerRadius="8"
                       HeightRequest="80"
                       WidthRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
          <Label Text="TRANSPARENT Background"
                 TextColor="Gray"/>
          <ImageButton Background="Transparent"
                       Aspect="Center"
                       CornerRadius="8"
                       WidthRequest="80"
                       HeightRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
          <Label Text="WHITE Background"
                 TextColor="Gray"/>
          <ImageButton Background="White"
                       Aspect="Center"
                       CornerRadius="8"
                       WidthRequest="80"
                       HeightRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
          <Label Text="COLOR Background"
                 TextColor="Gray"/>
          <ImageButton Background="DarkSlateGray"
                       Aspect="Center"
                       CornerRadius="8"
                       WidthRequest="80"
                       HeightRequest="80"
                       Source="{FontImage FontFamily='Ionicons', Glyph='&#xF32B;', Color='DarkOrange', Size='60'}"/>
      </VerticalStackLayout>

  </Grid>

[jsuarezruiz]

Should we use the same default color applied to Button?

[mattleibow]

Not sure this ever was the case, so it may be a breaking change?

[rmarinho]

Was it always Transparent ? Should we grab the color from the theme here?

[mattleibow]

Let me test OG net8 and see. I am sure I have always seen transparent because this is not a button, it is an image view. I will also test net7.

[mattleibow]

I tested OG 8.0.3 and there is no background. Same with 7.0.101+4.

[Syed-RI]

Do you have any before and after video of the effect?

[mattleibow]

I added a video for the ripple, a bit hard to see as modern Androids have a very subtle ripple. But, I also opened an issue for a platform specific property: #22805

[jsuarezruiz]

[MauiUIui]

This might have just created this bug: #23119