.NET MAUI中Android端LinearGradientBrush导致按钮样式异常问题

问题 #

在基础测试项目中，按钮点击后会更新文本内容和尺寸，但设置LinearGradientBrush作为按钮背景（直接设置或全局样式）时，Android端出现按钮无法自适应文本尺寸、甚至向左偏移的问题，Windows端无此异常。

复现代码 #

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Clicked="OnCounterClicked"
    HorizontalOptions="Center">
    <Button.Background>
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#8A26ED"/>
            <GradientStop Color="#381061" Offset="1"/>
        </LinearGradientBrush>
    </Button.Background>
</Button>

解决办法 #

方法1：显式设置按钮内边距 #

给按钮添加Padding属性，强制保留足够空间以适配文本变化：

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Clicked="OnCounterClicked"
    HorizontalOptions="Center"
    Padding="16,8"> <!-- 数值根据需求调整 -->
    <Button.Background>
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#8A26ED"/>
            <GradientStop Color="#381061" Offset="1"/>
        </LinearGradientBrush>
    </Button.Background>
</Button>

方法2：用Border控件包裹按钮 #

将渐变背景转移到Border上，按钮设为透明背景，避免渐变干扰按钮布局：

<Border HorizontalOptions="Center" StrokeThickness="0" CornerRadius="4"> <!-- CornerRadius匹配按钮默认圆角 -->
    <Border.Background>
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#8A26ED"/>
            <GradientStop Color="#381061" Offset="1"/>
        </LinearGradientBrush>
    </Border.Background>
    <Button
        x:Name="CounterBtn"
        Text="Click me"
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="OnCounterClicked"
        BackgroundColor="Transparent"
        Padding="16,8"/>
</Border>

方法3：Android自定义渲染器 #

针对Android平台重写按钮渲染逻辑，修复布局测量问题：

1. 在Android项目中添加以下渲染器类：

using Android.Content;
using Android.Graphics.Drawables;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Platform;

[assembly: ExportRenderer(typeof(Button), typeof(CustomGradientButtonRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomGradientButtonRenderer : ButtonRenderer
    {
        public CustomGradientButtonRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (Control == null || e.NewElement == null) return;

            // 重置背景，用原生渐变Drawable替代
            var gradient = new GradientDrawable(GradientDrawable.Orientation.TopBottom, 
                new int[] { Android.Graphics.Color.ParseColor("#8A26ED"), Android.Graphics.Color.ParseColor("#381061") });
            gradient.SetCornerRadius(Control.CornerRadius);
            Control.Background = gradient;

            // 确保布局测量正常
            Control.SetPadding(Control.PaddingLeft, Control.PaddingTop, Control.PaddingRight, Control.PaddingBottom);
        }
    }
}

2. 移除MAUI项目中按钮的LinearGradientBrush背景设置，由渲染器统一处理渐变。

原因 #

Android端MAUI按钮的默认渲染逻辑中，LinearGradientBrush会干扰控件的布局测量流程，导致无法正确根据文本内容调整尺寸，而Windows端的渲染机制不受此影响。

内容的提问来源于stack exchange，提问作者Abanoub Zak