如何使用CSS为Xamarin.Forms的Button设置样式并调整图标尺寸？

现有代码与问题 #

我已经在XAML中添加了如下Button：

<ContentView.Content>
   <Button Image="{Binding Icon}" Text="{Binding Title}" Clicked="ClickEvent" HeightRequest="10"  WidthRequest="10" />
</ContentView.Content>

想要把按钮调整为图标尺寸适中、与文字搭配协调的样式，但当前按钮图标过大，显示效果很差。尝试用项目里的CSS控制图标尺寸，但代码无效果：

.button img {
    height: 50px;
    width: 50px;
}

解决方案 #

1. 直接在XAML中设置图标尺寸属性 #

Xamarin.Forms的Button自带ImageHeightRequest和ImageWidthRequest属性，可以直接控制图标大小，同时要调整按钮本身的尺寸（原Height/WidthRequest设为10太小，会挤压图标显示）：

<ContentView.Content>
   <Button Image="{Binding Icon}" Text="{Binding Title}" Clicked="ClickEvent" 
           HeightRequest="60" WidthRequest="120"
           ImageHeightRequest="50" ImageWidthRequest="50" />
</ContentView.Content>

可根据实际需求调整数值，确保按钮能容纳图标和文字。

2. 使用Style资源复用样式 #

如果需要多个按钮复用该样式，建议在页面资源中定义Style：

<ContentPage.Resources>
    <Style TargetType="Button" x:Key="IconButtonStyle">
        <Setter Property="ImageHeightRequest" Value="50" />
        <Setter Property="ImageWidthRequest" Value="50" />
        <Setter Property="HeightRequest" Value="60" />
        <Setter Property="WidthRequest" Value="120" />
        <!-- 可额外添加Padding、TextColor等样式属性优化显示 -->
    </Style>
</ContentPage.Resources>

<!-- 使用样式 -->
<ContentView.Content>
   <Button Image="{Binding Icon}" Text="{Binding Title}" Clicked="ClickEvent" 
           Style="{StaticResource IconButtonStyle}" />
</ContentView.Content>

3. 修复CSS无效问题 #

Xamarin.Forms的CSS不支持.button img这种DOM元素选择器，因为Button的Image不是独立的img元素。需要用Xamarin专属的CSS属性控制：

.button {
    -xamarin-image-height: 50px;
    -xamarin-image-width: 50px;
    height: 60px;
    width: 120px;
}

然后给Button添加Class属性：

<Button Image="{Binding Icon}" Text="{Binding Title}" Clicked="ClickEvent" 
        Class="button" />

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