如何在.NET MAUI按钮中添加图标与文本等多元素内容？

.NET MAUI的Button默认不支持直接添加多个子元素，你之前尝试直接放内容报错就是这个原因。解决这个问题最直接的方式是使用Button的ContentTemplate属性，通过它来定义包含图标和文本的自定义内容布局。

步骤1：定义图标静态资源 #

先在你的XAML资源字典里定义要用到的图标（以FontImageSource为例，也可以用本地图片）：

<ResourceDictionary>
    <!-- 这里用Material Icons字体图标，你可以换成自己的图标资源 -->
    <FontImageSource x:Key="HeartIcon" 
                     FontFamily="MaterialIcons" 
                     Glyph="&#xe87d;" 
                     Size="20" 
                     Color="#e53935"/>
</ResourceDictionary>

步骤2：用ContentTemplate创建带图标和文本的按钮 #

在Button中通过ContentTemplate嵌套布局容器（比如HorizontalStackLayout），把Image和Label放进去：

<Button Padding="12,8"
        Command="{Binding LikeCommand}"> <!-- 绑定你的命令逻辑 -->
    <Button.ContentTemplate>
        <DataTemplate>
            <HorizontalStackLayout Spacing="8" 
                                  VerticalOptions="Center">
                <!-- 绑定静态资源图标 -->
                <Image Source="{StaticResource HeartIcon}" 
                       VerticalOptions="Center"/>
                <!-- 按钮文本 -->
                <Label Text="点赞" 
                       FontSize="16" 
                       VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

动态绑定文本的情况 #

如果按钮文本需要动态绑定，直接在Label里用Binding即可，ContentTemplate内的元素会继承Button的BindingContext：

<Button Padding="12,8"
        Command="{Binding LikeCommand}">
    <Button.ContentTemplate>
        <DataTemplate>
            <HorizontalStackLayout Spacing="8" 
                                  VerticalOptions="Center">
                <Image Source="{StaticResource HeartIcon}" 
                       VerticalOptions="Center"/>
                <Label Text="{Binding ButtonText}" 
                       FontSize="16" 
                       VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

这种方式完全符合.NET MAUI的控件设计规范，不会出现报错，而且能灵活定制按钮的内容布局。

内容的提问来源于stack exchange，提问作者Samuel Catchpole-Radford