MAUI中如何调整按钮图片大小以适配按钮并保持宽高比？

当直接给MAUI Button设置大尺寸图片时，Button会自动适配图片大小，导致超出Grid分配的布局范围。要让图片自适应Button尺寸且维持宽高比，推荐以下两种方案：

方案一：自定义Button的Content（最灵活） #

放弃直接设置Button的ImageSource，改用Button.Content嵌入Image控件，通过Image的Aspect属性控制缩放规则，同时约束图片填充Button空间但不超出：

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <Button HorizontalOptions="Start"
            Command="{Binding ResgistrarEntradaCommand}">
        <Button.Content>
            <!-- AspectFit 保证图片完整显示且维持宽高比 -->
            <Image Source="entrada.svg"
                   Aspect="AspectFit"
                   HorizontalOptions="Fill"
                   VerticalOptions="Fill" />
        </Button.Content>
    </Button>

    <Button HorizontalOptions="End" Grid.Column="1"
            Command="{Binding ResgistrarSalidaCommand}">
        <Button.Content>
            <Image Source="salida.svg"
                   Aspect="AspectFit"
                   HorizontalOptions="Fill"
                   VerticalOptions="Fill" />
        </Button.Content>
    </Button>
</Grid>

关键参数说明： #

• Aspect="AspectFit"：图片会按比例缩放，完整显示在Button内部，不会变形。
• HorizontalOptions="Fill" + VerticalOptions="Fill"：让图片填充Button的可用空间，同时不超出Button的边界。

方案二：固定Button尺寸（适合布局要求严格的场景） #

如果需要Button保持固定大小，可以给Button设置WidthRequest和HeightRequest，或者给Grid的行设置固定高度，再配合方案一的Image配置：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <!-- 固定按钮所在行的高度 -->
        <RowDefinition Height="70" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Button WidthRequest="60" HeightRequest="60"
                HorizontalOptions="Start"
                Command="{Binding ResgistrarEntradaCommand}">
            <Button.Content>
                <Image Source="entrada.svg"
                       Aspect="AspectFit"
                       HorizontalOptions="Fill"
                       VerticalOptions="Fill" />
            </Button.Content>
        </Button>

        <Button WidthRequest="60" HeightRequest="60"
                HorizontalOptions="End" Grid.Column="1"
                Command="{Binding ResgistrarSalidaCommand}">
            <Button.Content>
                <Image Source="salida.svg"
                       Aspect="AspectFit"
                       HorizontalOptions="Fill"
                       VerticalOptions="Fill" />
            </Button.Content>
        </Button>
    </Grid>
</Grid>

这样Button会保持设定的尺寸，图片在内部按比例自适应，不会撑大Button。

内容的提问来源于stack exchange，提问作者Álvaro García