.NET MAUI中如何调整Button控件内图片大小并正常显示文本

你遇到的问题是因为.NET MAUI的Button控件默认的ImageSource属性是为小图标设计的，它会自动拉伸图片填充按钮剩余空间，把文本完全挤没了。要实现带边框、图片+文本的卡片式按钮，推荐以下两种实用方案：

方案一：用ContentView模拟卡片按钮（布局更灵活） #

直接用ContentView包裹图片和文本，搭配点击手势模拟按钮行为，布局完全由你掌控：

<ContentView HeightRequest="300"
             WidthRequest="300"
             BorderColor="Blue"
             BorderWidth="3"
             BackgroundColor="Grey"
             Padding="10">
    <ContentView.GestureRecognizers>
        <!-- 绑定你的点击命令，也可以加Pressed/Released事件做按下效果 -->
        <TapGestureRecognizer Command="{Binding YourButtonCommand}" />
    </ContentView.GestureRecognizers>
    <VerticalStackLayout Spacing="10" HorizontalOptions="Center" VerticalOptions="Center">
        <!-- 固定图片尺寸+AspectFit保证比例不拉伸 -->
        <Image Source="https://aka.ms/campus.jpg"
               HeightRequest="200"
               WidthRequest="200"
               Aspect="AspectFit" />
        <Label Text="TEXT INSIDE BUTTON"
               FontSize="12"
               FontAttributes="Bold"
               TextColor="Black" />
    </VerticalStackLayout>
</ContentView>

方案二：自定义Button的ControlTemplate（保留原生交互） #

如果想保留Button原生的按下视觉效果，可以修改它的ControlTemplate，自定义内部布局：

<ContentPage.Resources>
    <ControlTemplate x:Key="CardButtonTemplate">
        <Border Stroke="{TemplateBinding BorderColor}"
                StrokeThickness="{TemplateBinding BorderWidth}"
                Background="{TemplateBinding BackgroundColor}"
                HeightRequest="{TemplateBinding HeightRequest}"
                WidthRequest="{TemplateBinding WidthRequest}">
            <VerticalStackLayout Spacing="5" Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
                <Image Source="{TemplateBinding ImageSource}"
                       HeightRequest="200"
                       WidthRequest="200"
                       Aspect="AspectFit" />
                <Label Text="{TemplateBinding Text}"
                       FontSize="{TemplateBinding FontSize}"
                       FontAttributes="{TemplateBinding FontAttributes}"
                       TextColor="Black" />
            </VerticalStackLayout>
        </Border>
    </ControlTemplate>
</ContentPage.Resources>

<!-- 使用自定义模板的Button -->
<Button ControlTemplate="{StaticResource CardButtonTemplate}"
        HeightRequest="300"
        WidthRequest="300"
        BorderColor="Blue"
        BorderWidth="3"
        BackgroundColor="Grey"
        Text="TEXT INSIDE BUTTON"
        FontSize="12"
        FontAttributes="Bold"
        ImageSource="https://aka.ms/campus.jpg" />

这两种方法都能解决图片拉伸、文本隐藏的问题，实现你需要的卡片式按钮效果，可根据需求选择。

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