.NET Maui设置MaterialComponents主题后Button圆角显示白色问题求助

在.NET 8的Maui Android项目中，将主题设置为Theme.MaterialComponents.Light.DarkActionBar后，设置了CornerRadius的Button控件会出现圆角区域显示白色的异常，示例Button代码如下：

<Button Text="Login" BackgroundColor="Green" HorizontalOptions="FillAndExpand" FontSize="20" HeightRequest="50" VerticalOptions="EndAndExpand" CornerRadius="40" />

异常表现为Button的圆角角落露出白色底色，未被设置的背景色覆盖。

问题原因 #

这是MaterialComponents主题与Maui Button的自定义背景设置冲突导致的：MaterialComponents主题下Button默认带有自身的背景drawable，Maui设置的圆角和背景色没有完全覆盖这个默认背景，从而露出底层白色。

解决方案 #

方案1：全局自定义Button样式

在Resources/Styles/Styles.xaml中添加自定义Button样式，覆盖默认视觉状态并明确设置背景和圆角：

<Style TargetType="Button">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#CC008000" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#FFA5A5A5" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
    <Setter Property="BackgroundColor" Value="Green" />
    <Setter Property="CornerRadius" Value="40" />
</Style>

该样式会全局应用到所有Button，也可以通过x:Key指定为局部样式。

方案2：自定义Android平台渲染器

创建自定义Button控件并编写Android平台专属渲染器，直接设置背景drawable：

1. 共享项目中创建自定义Button类：

namespace YourAppNamespace.Controls;

public class CustomButton : Button
{
}

2. Android项目中创建渲染器（路径：Platforms/Android/Renderers/CustomButtonRenderer.cs）：

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

[assembly: ExportRenderer(typeof(CustomButton), typeof(CustomButtonRenderer))]
namespace YourAppNamespace.Platforms.Android.Renderers;

public class CustomButtonRenderer : ButtonRenderer
{
    public CustomButtonRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);
        if (Control == null || e.NewElement == null) return;
        
        var customButton = e.NewElement as CustomButton;
        var gradientDrawable = new GradientDrawable();
        gradientDrawable.SetColor(customButton.BackgroundColor.ToAndroid());
        gradientDrawable.SetCornerRadius(customButton.CornerRadius);
        Control.SetBackground(gradientDrawable);
    }
}

3. XAML中使用自定义控件：

<controls:CustomButton Text="Login" BackgroundColor="Green" HorizontalOptions="FillAndExpand" FontSize="20" HeightRequest="50" VerticalOptions="EndAndExpand" CornerRadius="40" />

方案3：修改Android主题配置

在Android项目的Platforms/Android/Resources/values/styles.xml中修改主题，禁用MaterialComponents Button的默认背景：

<style name="Theme.YourAppName" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- 保留原有主题设置 -->
    <item name="android:buttonStyle">@style/CustomButtonStyle</item>
</style>

<style name="CustomButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="android:background">@null</item>
    <item name="backgroundTint">@null</item>
</style>

此方法让Button完全由Maui控制背景绘制，避免主题冲突。

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