Fix Android ImageButton background, ripple and padding

src/Controls/samples/Controls.Sample.UITests/Issues/Issue18857.xaml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="Maui.Controls.Sample.Issues.Issue18857">
+ <VerticalStackLayout>
+ <ImageButton 
+ x:Name="BackgroundImageButton"
+ AutomationId="TestImageButton"
+ HorizontalOptions="Center" 
+ Aspect="AspectFit" 
+ BorderColor="Red"
+ BorderWidth="10"
+ CornerRadius="12"
+ HeightRequest="200"
+ WidthRequest="200"
+ Source="shopping_cart.png"
+ Padding="0" />
+ <HorizontalStackLayout
+ HorizontalOptions="Center">
+ <Button
+ x:Name="UpdateBackgroundButton"
+ AutomationId="TestUpdateBackgroundButton"
+ Text="Update Background"
+ Clicked="OnUpdateBackgroundButtonClicked"/>
+ <Button 
+ x:Name="RemoveBackgroundButton"
+ AutomationId="TestRemoveBackgroundButton"
+ Text="Remove Background"
+ Clicked="OnRemoveBackgroundButtonClicked"/>
+ </HorizontalStackLayout>
+ </VerticalStackLayout>
+</ContentPage>

src/Controls/samples/Controls.Sample.UITests/Issues/Issue18857.xaml.cs

@@ -0,0 +1,44 @@
+using System;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Xaml;
+using Microsoft.Maui.Graphics;
+
+namespace Maui.Controls.Sample.Issues
+{
+ [XamlCompilation(XamlCompilationOptions.Compile)]
+ [Issue(IssueTracker.Github, 18857, "ImageButton Padding & Ripple effect stops working with .NET 8", PlatformAffected.Android)]
+ public partial class Issue18857 : ContentPage
+ {
+ public Issue18857()
+ {
+ InitializeComponent();
+ UpdateImageButtonBackground();
+ }
+
+ void OnUpdateBackgroundButtonClicked(object sender, EventArgs e)
+ {
+ UpdateImageButtonBackground();
+ }
+
+ void OnRemoveBackgroundButtonClicked(object sender, EventArgs e)
+ {
+ BackgroundImageButton.Background = null;
+ }
+
+ void UpdateImageButtonBackground()
+ {
+ Color startColor = Colors.GreenYellow;
+ Color endColor = Colors.Yellow;
+
+ BackgroundImageButton.Background = new LinearGradientBrush
+ {
+ EndPoint = new Point(1, 0),
+ GradientStops = new GradientStopCollection
+ {
+ new GradientStop { Color = startColor },
+ new GradientStop { Color = endColor, Offset = 1 }
+ }
+ };
+ }
+ }
+}

src/Controls/samples/Controls.Sample/Pages/Controls/ImageButtonPage.xaml

@@ -91,6 +91,16 @@
  Source="cog.png"
  CornerRadius="10"
  BackgroundColor="Purple"/>
+ <ImageButton 
+ Aspect="AspectFit" 
+ Source="cog.png"
+ BackgroundColor="Purple"
+ CornerRadius="{Binding Source={x:Reference CornerRadiusSlider}, Path=Value}" />
+ <Slider 
+ x:Name="CornerRadiusSlider"
+ Minimum="0"
+ Maximum="60"
+ Value="10"/>
  <Label
  Text="Custom Size"
  Style="{StaticResource Headline}"/>
@@ -164,6 +174,40 @@
  <Button
  Text="Use Online Source"
  Clicked="UseOnlineSource_Clicked"/>
+ <Label
+ Text="Background (Null)"
+ Style="{StaticResource Headline}"/>
+ <ImageButton 
+ HorizontalOptions="Center" 
+ Clicked="OnImageButtonClicked"
+ Aspect="AspectFit" 
+ BorderColor="Red"
+ BorderWidth="10"
+ Source="cog.png"
+ Padding="0" />
+ <Label
+ Text="Background (Gradient)"
+ Style="{StaticResource Headline}"/>
+ <ImageButton 
+ x:Name="BackgroundImageButton"
+ HorizontalOptions="Center" 
+ Clicked="OnImageButtonClicked"
+ Aspect="AspectFit" 
+ BorderColor="Red"
+ BorderWidth="10"
+ Source="cog.png"
+ Padding="0" />
+ <HorizontalStackLayout
+ HorizontalOptions="Center">
+ <Button
+ x:Name="UpdateBackgroundButton"
+ Text="Update Background"
+ Clicked="OnUpdateBackgroundButtonClicked"/>
+ <Button
+ x:Name="RemoveBackgroundButton"
+ Text="Remove Background"
+ Clicked="OnRemoveBackgroundButtonClicked"/>
+ </HorizontalStackLayout>
  </VerticalStackLayout>
  </ScrollView>
  </views:BasePage.Content>

src/Controls/samples/Controls.Sample/Pages/Controls/ImageButtonPage.xaml.cs

@@ -2,6 +2,7 @@
 using System.Diagnostics;
 using System.Windows.Input;
 using Microsoft.Maui.Controls;
+using Microsoft.Maui.Graphics;
 
 namespace Maui.Controls.Sample.Pages
 {
@@ -20,6 +21,8 @@ public ImageButtonPage()
  if (e.PropertyName == ImageButton.IsLoadingProperty.PropertyName)
  Debug.WriteLine($"{e.PropertyName}: {ImageButton01.IsLoading}");
  };
+
+ UpdateImageButtonBackground();
  }
 
  void OnImageButtonClicked(object sender, EventArgs e)
@@ -39,6 +42,33 @@ void UseOnlineSource_Clicked(object sender, EventArgs e)
  AnimatedGifImage.Source =
  ImageSource.FromUri(new Uri("https://raw.githubusercontent.com/dotnet/maui/126f47aaf9d5c01224f54fe1c6bfb1c8299cc2fe/src/Compatibility/ControlGallery/src/iOS/GifTwo.gif"));
  }
+
+ void OnUpdateBackgroundButtonClicked(object sender, EventArgs e)
+ {
+ UpdateImageButtonBackground();
+ }
+
+ void OnRemoveBackgroundButtonClicked(object sender, EventArgs e)
+ {
+ BackgroundImageButton.Background = null;
+ }
+
+ void UpdateImageButtonBackground()
+ {
+ Random rnd = new Random();
+ Color startColor = Color.FromRgba(rnd.Next(256), rnd.Next(256), rnd.Next(256), 255);
+ Color endColor = Color.FromRgba(rnd.Next(256), rnd.Next(256), rnd.Next(256), 255);
+
+ BackgroundImageButton.Background = new LinearGradientBrush
+ {
+ EndPoint = new Point(1, 0),
+ GradientStops = new GradientStopCollection
+ {
+ new GradientStop { Color = startColor },
+ new GradientStop { Color = endColor, Offset = 1 }
+ }
+ };
+ }
  }
 
  public class ImageButtonPageViewModel : BindableObject

src/Controls/tests/UITests/Tests/Issues/Issue18857.cs

@@ -0,0 +1,36 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.AppiumTests.Issues
+{
+ public class Issue18857 : _IssuesUITest
+ {
+ public Issue18857(TestDevice device)
+ : base(device)
+ { }
+
+ public override string Issue => "ImageButton Padding & Ripple effect stops working with .NET 8";
+
+ [Test]
+ [Category(UITestCategories.ImageButton)]
+ public async Task GradientImageButtonBackground()
+ {
+ this.IgnoreIfPlatforms(new[]
+ {
+ TestDevice.Mac,
+ TestDevice.iOS,
+ TestDevice.Windows
+ });
+
+ App.WaitForElement("TestImageButton");
+
+ App.Tap("TestRemoveBackgroundButton");
+ App.Tap("TestUpdateBackgroundButton");
+
+ await Task.Delay(500);
+
+ VerifyScreenshot();
+ }
+ }
+}

src/Core/src/Handlers/ImageButton/ImageButtonHandler.Android.cs

@@ -40,27 +40,27 @@ protected override void ConnectHandler(ShapeableImageView platformView)
 
  public static void MapBackground(IImageButtonHandler handler, IImageButton imageButton)
  {
- (handler.PlatformView as ShapeableImageView)?.UpdateBackground(imageButton);
+ handler.PlatformView?.UpdateBackground(imageButton);
  }
 
  public static void MapStrokeColor(IImageButtonHandler handler, IButtonStroke buttonStroke)
  {
- (handler.PlatformView as ShapeableImageView)?.UpdateStrokeColor(buttonStroke);
+ handler.PlatformView?.UpdateStrokeColor(buttonStroke);
  }
 
  public static void MapStrokeThickness(IImageButtonHandler handler, IButtonStroke buttonStroke)
  {
- (handler.PlatformView as ShapeableImageView)?.UpdateStrokeThickness(buttonStroke);
+ handler.PlatformView?.UpdateStrokeThickness(buttonStroke);
  }
 
  public static void MapCornerRadius(IImageButtonHandler handler, IButtonStroke buttonStroke)
  {
- (handler.PlatformView as ShapeableImageView)?.UpdateCornerRadius(buttonStroke);
+ handler.PlatformView.UpdateCornerRadius(buttonStroke);
  }
 
  public static void MapPadding(IImageButtonHandler handler, IImageButton imageButton)
  {
- (handler.PlatformView as ShapeableImageView)?.UpdatePadding(imageButton);
+ handler.PlatformView?.UpdatePadding(imageButton);
  }
 
  void OnFocusChange(object? sender, View.FocusChangeEventArgs e)