如何在 Xamarin.Forms xaml 中设置按钮内的图像宽度？答案

【问题标题】：How to set width of image inside button in Xamarin.Forms xaml?如何在 Xamarin.Forms xaml 中设置按钮内的图像宽度？
【发布时间】：2022-05-12 21:10:51
【问题描述】：

我想知道是否可以在此按钮内设置图像的宽度和高度：

<Button Image="ic_music_white.png" BorderWidth="1" BorderColor="White" HeightRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center" Clicked="Button_Clicked">
</Button>

有什么办法吗？

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

您始终可以创建一个图像控件并向其添加一个轻击手势识别器。这样您就可以更好地控制图像大小和位置。

XAML

<Image x:Name="myImage" Source="ic_music_white.png" HeightRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center"/>

XAML.CS

TapGestureRecognizer tapEvent = new TapGestureRecognizer();
tapEvent.Tapped += Button_Clicked;
myImage.GestureRecognizers.Add(tapEvent);

【讨论】：

【解决方案2】：

在 iOS 项目中，padding 可以调整按钮内图像的大小。如果您的宽度为 50，内边距为 10，则生成的图像宽度将为 30。

【讨论】：

具有固定像素数的填充和边距可能会在分辨率变化时导致布局问题

【解决方案3】：

这在 Xamarin.Forms 项目中是不可能的，但您可以创建自定义呈现器，这将允许您修改本机控件的属性。

对于 iOS，您将更改 ImageEdgeInsets。

对于 Android，您可能需要查看Button renderer，以便获得任何想法。

希望这会有所帮助。-

【讨论】：

【解决方案4】：

不，您无法管理 button 内图像的高度/宽度。更好的选择是创建一个堆栈布局，然后将文本和图像放入其中。我这样做的方式：

<StackLayout Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand"  VerticalOptions="End" HeightRequest="60">

                <Label Text="Review task" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" FontSize="25" FontAttributes="Bold"/>
                <Image Source="nextarrow_white.png" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="32" Margin="20,4,0,0"/>

        </StackLayout>

【讨论】：

【解决方案5】：

如果您只想将按钮放置在屏幕中而不添加文本或其他内容，您可以将按钮放置在网格布局中，如下所示

<Grid RowDefinitions="auto"
              ColumnDefinitions="auto"
              Margin="40 40 40 40">
              
              <ImageButton Grid.Row="1"
                         Grid.Column="1"
                         Source="Resources/Images/installations.png"
                         HorizontalOptions="Center"
                         VerticalOptions="Center"/>
          </Grid>

在那里，您对网格布局应用边距，这种情况下的图像将自动调整其大小以适应可用空间。

【讨论】：

【解决方案6】：

您现在可以使用缩放来更改内容的大小。和 padding 以在图像周围添加边框。

例子

  <Button 
    Image="ic_music_white.png" 
    BorderWidth="1"  
    BorderColor="White" 
    HeightRequest="56"  
    BackgroundColor="PowderBlue" 
    HorizontalOptions="Center" 
    Clicked="Button_Clicked"
    Scale = "0.7",
    Padding = "10"
    >
  </Button>

【讨论】：

【解决方案7】：

您错过了添加 WidthRequest。你能像下面这样添加WidthRequest吗

<Button Image="ic_music_white.png" BorderWidth="1" BorderColor="White" HeightRequest="56" WidthRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center" Clicked="Button_Clicked">
</Button>

【讨论】：

感谢您的回答Venky，但是如果我将WidthRequest 放在