调整按钮上的图像大小

Question

我正在Xamarin Forms中创建一个应用程序，并尝试模仿FloatingActionButton，所以我创建了一个带有居中图标的圆形Button。不幸的是，我的图标到目前为止与Button重叠，而且我还没有找到适当调整其比例的方法。我试图通过变大Button使其变大以使其适合图标并按比例缩小整个内容，但是这样会失去质量。有没有只调整图像大小的方法？

Button可能看起来像这样，问题似乎很普遍：

<Button x:Name="button" ImageSource="image.png" />

Answer 1

有两种情况。

如果您的图像不圆角且不透明

您可以使用Frame强制这种方式：

<Frame CornerRadius="50" 
       HeightRequest="100"
       WidthRequest="100"
       Padding="0"
       IsClippedToBounds="True">
    <Image Source="image.png" 
           HorizontalOptions="Center"
           VerticalOptions="Center">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="MyTappedEvent" />
                <!-- or <TapGestureRecognizer Command="{Binding MyCommand}" /> -->
            </Image.GestureRecognizers>
    </Image>
</Frame>

只需用您的值替换HeightRequest，WidthRequest和CornerRadius。您必须确保CornerRadius大小的一半或WirthRequest / HeightRequest使其看起来像一个圆形。

然后，将Tapped事件用于基本用法，或者将Command的TapGestureRecognizer用于MVVM模式。

---

如果您的png图像已经四舍五入且透明

然后，您可以直接在图像上直接使用TapGestureRecognizer，使其表现得像一个按钮：

<Image Source="image.png" HeightRequest="100" WidthRequest="100">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding AddCommand}" />
    </Image.GestureRecognizers>
</Image>

希望它有帮助，

快乐编码！