.NET 8 MAUI按钮图片无法适配问题求助

方案1：通过ControlTemplate自定义按钮内部布局 #

直接修改Button的ControlTemplate，手动控制Image的尺寸，既保留Button原生的Clicked/Pressed事件，又能精准调整图片大小：

<Button Text="User" HeightRequest="35" WidthRequest="225" HorizontalOptions="Start">
    <Button.ControlTemplate>
        <ControlTemplate>
            <Grid WidthRequest="{TemplateBinding WidthRequest}" HeightRequest="{TemplateBinding HeightRequest}">
                <!-- 自定义图片尺寸 -->
                <Image Source="dotnet_bot.png" WidthRequest="24" HeightRequest="24" 
                       HorizontalOptions="Start" VerticalOptions="Center" Margin="8,0"/>
                <Label Text="{TemplateBinding Text}" 
                       HorizontalOptions="Start" VerticalOptions="Center" Margin="40,0,0,0"/>
                <!-- 保留按钮的点击交互状态 -->
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Opacity" Value="0.8"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </Button.ControlTemplate>
</Button>

通过设置Image的WidthRequest和HeightRequest可以精准控制图片大小，同时Button的原生事件（Clicked、Pressed）完全正常触发。

方案2：封装ContentView为可复用按钮组件 #

如果之前自定义控件事件失效，大概率是事件声明方式不对。可以用ContentView封装组件，手动暴露所需事件：

XAML部分： #

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Controls.ImageButton">
    <Grid x:Name="RootGrid" WidthRequest="225" HeightRequest="35">
        <Image Source="{Binding ImageSource}" WidthRequest="24" HeightRequest="24" 
               HorizontalOptions="Start" VerticalOptions="Center" Margin="8,0"/>
        <Label Text="{Binding Text}" 
               HorizontalOptions="Start" VerticalOptions="Center" Margin="40,0,0,0"/>
    </Grid>
</ContentView>

C#代码部分： #

public partial class ImageButton : ContentView
{
    // 声明绑定属性
    public static readonly BindableProperty ImageSourceProperty =
        BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(ImageButton));

    public static readonly BindableProperty TextProperty =
        BindableProperty.Create(nameof(Text), typeof(string), typeof(ImageButton));

    // 声明交互事件
    public event EventHandler Clicked;
    public event EventHandler Pressed;
    public event EventHandler Released;

    public ImageSource ImageSource
    {
        get => (ImageSource)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    public ImageButton()
    {
        InitializeComponent();
        RootGrid.BindingContext = this;
        
        // 添加手势识别器处理事件
        var tapGesture = new TapGestureRecognizer();
        tapGesture.Tapped += (s, e) => Clicked?.Invoke(this, EventArgs.Empty);
        RootGrid.GestureRecognizers.Add(tapGesture);

        var pressGesture = new LongPressGestureRecognizer();
        pressGesture.Pressed += (s, e) => Pressed?.Invoke(this, EventArgs.Empty);
        pressGesture.Released += (s, e) => Released?.Invoke(this, EventArgs.Empty);
        RootGrid.GestureRecognizers.Add(pressGesture);
    }
}

使用时直接绑定事件即可：

<controls:ImageButton Text="User" ImageSource="dotnet_bot.png" Clicked="ImageButton_Clicked"/>

方案3：针对Windows/Mac平台自定义Handler #

通过MAUI的Handler机制，直接修改平台原生控件的图片尺寸，无需改动现有XAML布局：

Windows平台Handler配置 #

在MauiProgram.cs中添加：

.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler<Button, CustomButtonHandler>();
#endif
})

实现CustomButtonHandler：

public class CustomButtonHandler : ButtonHandler
{
    protected override void ConnectHandler(Microsoft.UI.Xaml.Controls.Button nativeView)
    {
        base.ConnectHandler(nativeView);
        // 找到按钮内的Image元素并修改尺寸
        if (nativeView.Content is StackPanel stackPanel)
        {
            foreach (var child in stackPanel.Children)
            {
                if (child is Microsoft.UI.Xaml.Controls.Image image)
                {
                    image.Width = 24;
                    image.Height = 24;
                    image.Stretch = Microsoft.UI.Xaml.Media.Stretch.Uniform;
                }
            }
        }
    }
}

Mac平台Handler配置 #

同样在MauiProgram.cs中添加：

.ConfigureMauiHandlers(handlers =>
{
#if MACCATALYST
    handlers.AddHandler<Button, MacCustomButtonHandler>();
#endif
})

实现MacCustomButtonHandler：

public class MacCustomButtonHandler : ButtonHandler
{
    protected override void ConnectHandler(AppKit.NSButton nativeView)
    {
        base.ConnectHandler(nativeView);
        // 调整原生按钮的图片大小
        if (nativeView.Image != null)
        {
            nativeView.Image = nativeView.Image.Scale(new CoreGraphics.CGSize(24, 24));
            nativeView.ImageAlignment = AppKit.NSImageAlignment.Left;
            nativeView.TitlePosition = AppKit.NSTitlePosition.Right;
        }
    }
}

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